CODEWITHSUNDEEP
jqueryajax
Stuart Taylor-Jones
Stuart Taylor-Jones

Reputation: 210

jQuery input with same name and square brackets

I have a form that is using jQuery and Ajax to post the form data, but cannot get it to send the values of inputs with the same name and square brackets.

The inputs look like this and will have different values:

<input type="text" name="service[]" value="Value 1">

Here is the var for getting the value:

var service = $("input[name=service\\[\\]]")

Then the var for collecting the data to send via Ajax looks like this: 

var data = 'name=' + name.val() + '&email=' + email.val() + '&phone=' + phone.val() + '&service=' + service.val() + '&brief='  + encodeURIComponent(brief.val());

Then in the PHP script for sending the mail includes the following...

$service = $_POST['service'];
$body .= implode(' | ', $service);

So my question is, how do I get the values of the inputs with the name name=service[] and send them via Ajax.

Thanks in advance :)

Upvotes: 3

Views: 3950

Answers (5)

Sergio
Sergio

Reputation: 28837

You might want to read this and try this:

$('#theFormID').serialize().replace('%5B%5D', '[]')

or this

$.param(obj, true);
$.post(url,serializedObj,function(){});

The true in the $.param indicates the traditional method of serializing an object should be used. The traditional method does not use square brackets when it encounters the same parameter name.

Upvotes: 1

Tomalak
Tomalak

Reputation: 338148

Why are you doing this?

var data = 'name=' + name.val() + '&email=' + email.val() + '&phone=' 
           + phone.val() + '&service=' + service.val() + '&brief=' 
           + encodeURIComponent(brief.val());

You shall not build strings from unescaped values. This is true for HTML, and it is true for URL-encoded form data and SQL and JSON and virtually every other way that transports structured data in string form.

Apparently you are using encodeURIComponent(), but why only once?

There is .serialize() which takes care of all the details. Use that instead of building your own URL string.

alert($('form').serialize());

Upvotes: 1

Murali N
Murali N

Reputation: 3498

if you have multiple inputs with the name service[] you can retrieve the inputs like the one below

var service = $("input[name=service\\[\\]]");

but if you have multiple inputs now service variable is an array now you have to loop thru each item in the service array and retrieve the values like

for(var i=0;i<service.length;i++){
  data += service[i].val()+",";
}

Upvotes: 0

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

do you mean something like:

var values = $("input[name='service\\[\\]']")
              .map(function(){return $(this).val();}).get();

var joined = values.join("|"); //so it shows val1|val2| val3 .. and pass to server

Upvotes: 0

OptimusCrime
OptimusCrime

Reputation: 14863

Not an exact answer to your question, but there is an easier way to do this.

Wrap your input-fields in a form and make an on-submit-event. Return this event false so it's not actually submitted.

Here's the trick. Before you return the event false, do the ajax-request. Give the form an id and use the seralize-method to make a json-string.

[...]
data: $('#formIDGoesHere').serialize(),
[...]

If you post this to your PHP file as POST-variables, all your values are not available like they normally would be in $_POST.

Upvotes: 2

Related Questions