Append value to input field using jQuery

Question

I have a small form with three fields and I can submit that form choose different options next time. I am submitting this form with ajax call.

Now on form submit I want to post all the selected options. For this, I have created a hidden field like

<input type="hidden" name="selectedproduct[]" id="sel-product">

and ajax success method am appending value like

 $('#sel-product').val(element.product);

But here I am getting only one value instead of an array. How can I append all the values to the field?

Where did you get the element.product object? can you show us the structure of the element data. — Joven28
– Joven28, Commented Jul 2, 2018 at 9:17
in ajax response $(data.success).each(function( index, element ) {$('#sel-product').val(element.product);}); — Daniel_12
– Daniel_12, Commented Jul 2, 2018 at 9:18
That won't work. The input element will just be filled with the value of the last element of your array. You need to push the element.product in a temporary array variable then put the temp array on the input value. — Joven28
– Joven28, Commented Jul 2, 2018 at 9:27
But when I send ajax call again temp array getting reset and I have only one value :( — Daniel_12
– Daniel_12, Commented Jul 2, 2018 at 10:16

Ignacio Ramos · Accepted Answer · 2018-07-02 10:18:10Z

2

Assuming the product fields with class ".element_product".

//init the array products
arrp=[];


//loop the elements
    $('.element_product').each( function () 
      {
            arrp.push( $(this).val() );
      });

//Pass the array to field
$('#sel-product').val(arrp);

edited Jul 2, 2018 at 10:18

answered Jul 2, 2018 at 9:28

Ignacio Ramos

616 bronze badges

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

5 Comments

Mark Baijens Over a year ago

You don't close your each loop

Daniel_12 Over a year ago

it still overwriting previous values

Ignacio Ramos Over a year ago

Store the previous values in an array and push arrp to array with previous values. Join them in input.

Daniel_12 Over a year ago

It still not working. Could you please whats wrong here [arrp=[] temp =[]; temp = element. product; $('.selectedMet').each( function () { arrp.push(temp); }); $('#sel-product').val(arrp);]

Ignacio Ramos Over a year ago

You are looping element.product (as temp) in the array without passing the values of inputs

Collectives™ on Stack Overflow

Append value to input field using jQuery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related