Question

I have many textboxes which are dynamically added through jQuery. they all have same name like…

<input type="text" name="employer" id="employer" />
<input type="text" name="position" id="position" />
<input type="text" name="city" id="city" />

<input type="text" name="employer" id="employer" />
<input type="text" name="position" id="position" />
<input type="text" name="city" id="city" />

so many...

I am passing all textbox value through AJAX, but its not working. my AJAX code is below..

AJAX

$.ajax(
    {
      type: "POST",
      url: $("#cfgRoot").val()+'/accounts/educationInfoPost.php',
      data:
      {
        employer:$("#employer").val().trim(),
        position:$("#position").val().trim(),
        city:$("#city").val().trim()
      }
});

Thanks in Advance

Answer 1

var empName = $("input[name=employer]").map(function(){
   return $(this).val();
}).get().join(",");

And pass it into ajax data.

Code

var empName = $("input[name=employer]").map(function(){
   return $(this).val();
}).get().join(",");

var position = $("input[name=position]").map(function(){
   return $(this).val();
}).get().join(",");

var city = $("input[name=city]").map(function(){
   return $(this).val();
}).get().join(",");


$.ajax(
{
    type: "POST",
    url: $("#cfgRoot").val()+'/accounts/educationInfoPost.php',
    data:
    {
        employer:empName,
        position:position,
        city:city
    }
});

And one more thing DO NOT ADD SAME ID FOR DOM.

ID MUST BE UNIQUE FOR EACH DOM