Gathering data from many inputs

Take a look at this fiddle.
Clicking the plus icon adds more pairs of input boxes(a service and it’s associated price).

My question is how am I going to collect all these values and send them through ajax to the server.If it were just services that would be easy…but here each service name must be linked to its price…

The solution must be a loop but a loop that must take into consideration the above fact.

Thanks

The collecting itself can be done using either FormData or .serialize(). But I would first and foremost link the fields through their names, e.g. (this way works well with PHP, don’t know about other server-side languages)

<input type="text"   name="form[0][service]">
<input type="number" name="form[0][price]">

Downside of that is that copying ain’t that straightforward any more, since you have to update the indices each time.

<input type="text"   name="service[]">
<input type="number" name="price[]">

Use that way with for each loop to gather all fields information. but you can use in javascript to use by id and set the id with plus 1,2,3 all the fields.

Is this going to be helpful at all when using .serialize()?

can somebody explain me what is the point the name attribute is of this type:

name="form[0][service]"

The above is multidimensional array…is it done for putting order to the collection?

This is designed for PHP. there might be differences for other server-side languages, but I’m not familiar how they parse form input.

essentially, the design is made so that PHP will parse this into a useful array.

e.g.

<input type="text" name="form[0][service]" value="foo">
<input type="number" name="form[0][price]" value="10.00">
<input type="text" name="form[1][service]" value="bar">
<input type="number" name="form[1][price]" value="12.50">

would result in:

$_POST['form'] = array(
  0 => array(
    'service' => 'foo',
    'price'   => '10.00',
  ),
  1 => array(
    'service' => 'bar',
    'price'   => '12.50',
  ),
)

without you having to do anything for it.

Since .serialize() doesn’t care about the names it doesn’t matter.

I have one question:
Why use serialize() and not serializeArray()?

If I use serialize look what the console produces(meaning the result of serialize()):

image

Some of the characters seem meaningless…yes you can see the price and service data…but what about the other…what PHP is suppose to do with it.

serilalize() produces the same result that the browser would when submitting the data from a form. serializeArray()–as the name suggest–produces an array for further processing in JS.

cf. http://api.jquery.com/serialize/

The .serialize() method creates a text string in standard URL-encoded notation.

cf. http://api.jquery.com/serializearray/

The .serializeArray() method creates a JavaScript array of objects, ready to be encoded as a JSON string.

@designtrooper out of interest, what’s your field of work? (because all this is Web Dev 101)

can you be more specific when you say “field of work”?

You mean what kind of project I am working on or what is my expertise as a developer.
I am going to ask you the same question again as above for which I did not get a clear answer.

Here is what is sent to the server through ajax(as a result of serialize) with one input field having as a value test and the other 55(price):

form%5B0%5D%5Bservice%5D=test&form%5B0%5D%5Bprice%5D=55

more like what your profession is (unrelated to this topic).

do you mean this one?

I couldn’t make sense of the question, since I couldn’t figure out what characters you meant with ‘meaningless’.

These are standard URL-encoded form data. %5B is [ and %5D is ].

Hey there!

If you use AJAX to send the form data, you can use the query string as described above (localhost/test/rest?form[0][service]=test)

Depending on your backend language, your data will look like this:

To send the data, you can use $.serialize. serializeArray is meant for sending the data via JSON or using it somewhere else in your web-app.

Obviously I cannot put these in the database.The only thins that is meaningful from that string is the name of the service(test for example) and it’s price (55, again for example).

so how to distinguish the data that I want from the string in the server-I use PHP.

Or maybe serialize is not the best option here after all…

I found after all what was causing the meaningless characters.

It is caused by the value of the name attribute:

form[0][service] etc

it seems that form data DOES not reach the server as you show above-in post 6.

you’re not supposed to …

Then there’s something very wrong with either your PHP installation or the way you fetch the form data.

let us forget the issue of the PHP installation for now…just give me an example of how I could be wrong in the fetching of the data.

As I already said in post #6, this design works for PHP. if you use something else, it depends on how that parses form data.

PHP does all the fetching without you having to do anything (Provided you use its superglobals, where it puts the fetched data).

Ok I am going to describe the data flow and tell me if anything looks weird:

input values:
service=test,price=55

HTML follows
     <form id="serv">     
                   <input id="noneserv" size="40"  type="text" name="form[0][service]">
                   <input  id="noneprice"  size="3"  type="text" name="form[0][price]">
    </form>
JS follows
$('#saveserv').click(function(e){
   
      e.preventDefault(); 
      var serv = $( "#serv" ).serialize();
      
 $.ajax({
          type: "POST",
          dataType:"json",
          url: "servajax.php",
          data: {"serviceinfo":serv},
          success:function(data){
 
          },
          error:function(jqXHR, textStatus, errorThrown){ 
 
          }
           });

});
PHP script follows
 var_dump($_POST['serviceinfo']);

result/response from server…from var_dump
string(55) "form%5B0%5D%5Bservice%5D=test&form%5B0%5D%5Bprice%5D=55"