Adding multiple value to hidden field using jQuery

Question

I have a hidden field in form A.

<input type="hidden" name="item_name[]" id="item_name" />

I want to add multiple values to this field using jQuery on a button click. this value coming from pop up window that just add these values to hidden field .

var name = $('#formid input[name=name1]').val();  
$("#item_name").val(name);

suppose I added values two time "a" and "b" then when I submit the form and print the form values at server side. I get this value

["item_name"]=>
array(1) {
[0]=>
string(2) "ab"
}

how should I proceed to get these value like -

 ["item_name"]=>
 array(2) {
 [0]=>
 string(1) "a",
 [1]=>
 string(1) "b"
 }

Sebastianb · Accepted Answer · 2016-02-01 13:11:28Z

1

When the user clicks the button, you should append another hidden input to the form, with name="item_name[]" and the value you wish to add:

$('#formid input[name=name1]').each(function(){
    var name = $(this).val();
    $("#item_name").after(
        "<input name='item_name[]' value="+name+" />"
    );
});

This way, you can add several values instead of just two. The loop in this case might be unnecessary (if you have just one element with name "name1"), but reflects the fact that you could use this with a selector returning more than one element.

answered Feb 1, 2016 at 13:11

Sebastianb

2,06024 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Radostin Georgiev · Accepted Answer · 2016-02-01 12:52:20Z

1

You need 2 hidden inputs with the same name item_name[] for it to work like you want.

Or you can have something like this

if ($("#item_name").val() == '') {
    $("#item_name").val(name);
} else {
    var value = JSON.parse($("#item_name").val());
    $("#item_name").val(JSON.stringify(value.push(name)));
}

I haven't tested it but with JSON.stringify you could send an array in a single input.

edited Feb 1, 2016 at 12:52

answered Feb 1, 2016 at 12:46

Radostin Georgiev

425 bronze badges

1 Comment

Mohit Sahu Over a year ago

Unexpected token aa. "aa" is the value I entered when I followed your second approach.

Collectives™ on Stack Overflow

Adding multiple value to hidden field using jQuery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related