LoicTheAztec LoicTheAztec - 5 months ago 7
Javascript Question

Convert a coma separated string to an array and back and deleting array elements with onClick event

I have an document. There is 2 fields:


  1. First one is an hidden input field (with a pre selected value)

  2. The other is an empty text imput field

    It displays the current value of the first one with jQuery.



Between that 2 fields, I have 9 buttons with different texts inside them.

With , when I click on a button it add his text in the visible field (separated by a coma) and it adds to himself an
enabled
class. This works.

When I click on the same button, the class is removed (this works).

What is not working:

I would like at the same time it removes his name from the field (with a coma) I With jQuery / Javascript I have tried to convert with
split()
each name in the field (coma separated) to an array, to easily delete one of them when needed with
splice()
.

What I haven done yet:

I need to convert-it back to a coma separated string, replacing the existing string value in the field ( I haven done this yet). I am not far.

My code on jsfiddle

How can I achieve this?

Any help would be greatly appreciated.

My code in here:



jQuery(document).ready(function($){
if ($('.subscribe-text').val() == ''){
$('.subscribe-text').val($('.subscribe-text-get').val()+',')
}


$('.subscribe-button').click(function(){
if(!$(this).hasClass('enable'))
{
$('.subscribe-text').val($('.subscribe-text').val()+$(this).html()+',');
$(this).addClass('enable');
}
else if($(this).hasClass('enable'))
//
// I would like to remove the name in the field
// when a button is clicked and has 'enable' class
//
{
var myArray = new Array();
var myString = $('.subscribe-text').val();
myArray = myString.split(",");
var myItem = $(this).html()+' ';
var indexPos = myArray.indexOf(myItem);
if(indexPos != -1)
{
myArray = myArray.splice(indexPos, 1);
}
$('.subscribe-text').val(myArray);
$(this).removeClass('enable');
}
});
});

.subscribe-button {
background-color:#ddd
}
#buttons_x3 {
width:500px;
}
.subscribe-text {
width:100%;
font-size:9px;
}
.subscribe-button {
display: inline-block;
text-align:center;
padding:3px;
margin-bottom: 10px;
color: black;
height:20px;
width:100px;
margin:10px 20px 10px;
cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="my_custom_checkout_field">
<input type="hidden" class="subscribe-text-get" name="my_field_name" value="woo-multi-1">
</div>
<br>
<div id="buttons_x3">
<a class="subscribe-button">woo-single-1</a>
<a class="subscribe-button">woo-single-2</a>
<a class="subscribe-button">woo-single-3</a>
<a class="subscribe-button">woo-multi-1</a>
<a class="subscribe-button">woo-multi-2</a>
<a class="subscribe-button">woo-top-1</a>
<a class="subscribe-button">woo-top-2</a>
<a class="subscribe-button">woo-top-3</a>
<a class="subscribe-button">woo-special</a>
</div>
<br>
<div id="my_custom_checkout_field">
<input type="text" class="subscribe-text" name="my_field_name" value>





Reference: My fiddle here

Answer

Be careful of a few things here:

1) Every time you click a button you are creating a new array with one long string inside.

2) Splice returns the value of the removed item, so each time a button is clicked you are setting the array string to be the item that you just removed.

Instead, initialize the array outside of your click function, and add each new item to the end. Set the value of the input with the toString() method. This will preserve the array of remaining values and their order.

jQuery(document).ready(function($){

var myArray = [];

if ($('.subscribe-text').val() == ''){
	myArray[0] = $('.subscribe-text-get').val();
	$('.subscribe-text').val( myArray.toString() );
}

var $item, length;

$('.subscribe-button').click(function(){

	length = myArray.length;

    if(!$(this).hasClass('enable')) {

    	$item = $(this).html();
    	myArray[length] = $item;

    	$('.subscribe-text').val( myArray.toString() );
    	$(this).addClass('enable');
    } 
    else if($(this).hasClass('enable')) {
        
        var myItem = $(this).html();
        var indexPos = myArray.indexOf(myItem);
        if(indexPos != -1) {
	       	myArray.splice(indexPos, 1);
		}

        $('.subscribe-text').val( myArray.toString() );
    	$(this).removeClass('enable');
    }
});
});
.subscribe-button {
    background-color:#ddd
}
#buttons_x3 {
    width:500px;
}
.subscribe-text {
    width:100%;
    font-size:9px;
}
.subscribe-button {
    display: inline-block;
    text-align:center; 
    padding:3px;
    margin-bottom: 10px;
    color: black;
    height:20px;
    width:100px;
    margin:10px 20px 10px;
    cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="my_custom_checkout_field">
    <input type="hidden" class="subscribe-text-get" name="my_field_name" value="woo-multi-1">
</div>
<br>
<div id="buttons_x3">
<a class="subscribe-button">woo-single-1</a>
<a class="subscribe-button">woo-single-2</a>
<a class="subscribe-button">woo-single-3</a>
<a class="subscribe-button">woo-multi-1</a>
<a class="subscribe-button">woo-multi-2</a>
<a class="subscribe-button">woo-top-1</a>
<a class="subscribe-button">woo-top-2</a>
<a class="subscribe-button">woo-top-3</a>
<a class="subscribe-button">woo-special</a>
</div>
<br>
<div id="my_custom_checkout_field">
    <input type="text" class="subscribe-text" name="my_field_name" value>

Here is my code on a jsFiddle