How to send a more complex POST form?

Question

I have the following table where a user can choose some quanitity for a corresponding item.

What is the simplest way to send this data to the server without using JavaScript?

Right now I am creating a data-name with item's name on each quantity input field. Then grabbing all those input fields, followed by the $.post request (not shown here).

var items = [];
var $quantities = $('.quantity');
$.each($quantities, function(index, input) {
  items.push({
    name: $(input).data('name'),
    quantity: $(input).val()
  });
});

I am curious to know if there is a more elegant approach to do this with just using the HTML form element.

Edit: I am free to choose whatever model I see fit. No constraints there since this is a fresh from the start personal project.

enter image description here

Not really sure where the complication is here? Looks like a simple enough form. Are you completely bound by your current data-model? Because why not just make a plain and simple form-post with the quantity fields identified by name? If you are constrained by some sort of data model, please explain so in the question :) — Nanne, Dec 29 '13 at 08:25
Check this link (for async form submission) http://stackoverflow.com/questions/4985093/jquery-send-a-form-asynchronously — Ahamed Mustafa M, Dec 29 '13 at 08:34
User Barmar thinks that you worded your question poorly because you are asking `What is the simplest way to send this data to the server without using JavaScript` altough you tagged the question with ajax and jquery. Are you aware that you are using javascript to post the form-values to the server? Could it be that you are looking for a simple way to collect the form-field values but would be willing to use javascript? — surfmuggle, Dec 29 '13 at 20:49
@threeFourOneSixOneThree Thanks, you are right. I have updated the tags. I ended up using JavaScript, but if I had a choice to just get all the data I need without JavaScript I'd choose that route. — Sahat Yalkabov, Dec 29 '13 at 22:24

score 2 · Answer 1 · answered Dec 29 '13 at 08:34

2

If you put the item names into hidden input fields in the form, you can use:

$('#formID').serialize()

to get all the inputs in one step, and pass this as the data argument to $.post().

answered Dec 29 '13 at 08:34

Barmar

741,623
53
500
612

I am not using a form. Just a table with inline inputs. – Sahat Yalkabov Dec 29 '13 at 08:35
Put a form around it, then you can use `serialize()`. – Barmar Dec 29 '13 at 08:35
This is still using javascript? The op asked if there is a non-javascript solution? – Nanne Dec 29 '13 at 08:56
I think he worded it poorly. He's using AJAX, so everything is going to be Javascript. He just wants something that doesn't require building the array by hand. – Barmar Dec 29 '13 at 08:59

score 2 · Accepted Answer · answered Dec 29 '13 at 08:35

You could create a traditional HTML form.

<form method="post" action="/url/to/submit/to.php" id="orderform">
    <table>
        ... all your order table code ...
        <input type="text" name="cucumber" value="0">
        ... and all your input code ....
        ... etc ...
    </table>
</form>

Then have the action URL be a server-side script that processes the form data and returns an appropriate webpage. Note: this will require the webpage to reload.

The nice thing about JavaScript is you can submit the form data and not have to reload the webpage.

Also note, you can get your HTML form data using jQuery very easily. In my above example:

var formData = $('#orderform').serializeArray();

Now use can use formData in your $.post() script.

score -1 · Answer 3 · answered Dec 29 '13 at 08:39

-1

In this way you can send form data using ajax

$.ajax({
                            url:'TarfetPage.jsp',
                            type:'POST',
                            datatype:'text',
                            data:$('#formID').serialize(),
                            success:function(data)
                            {
                                $("#divId").html($.trim(data));
                            }
                        });

answered Dec 29 '13 at 08:39

Abhinav015

44
7

well, this is hardly 'without using javascript' ? – Nanne Dec 29 '13 at 08:41
I don't understand. You have posted something that _is_ javascript (jquery after all is a _javascript_ library), while the op said asked if he could do this without it. So for one, the answer kinda ignores that request, and secondly I'm not sure where the "also" in your last comment points to, as it is allready in .js :) – Nanne Dec 29 '13 at 08:47
yes .. I do agree but here we have used ajax using jquery but we can using ajax using javascript also. If you can to submit without using jquery or javascript you can use traditional form submit. `
//your html code here
` – Abhinav015 Dec 29 '13 at 08:50
As I tried to say: jQuery **IS** javascript. Javascript is a language, and jQuery is a library that is written in that language. If you use jQuery, you are ALWAYS using javascript (you can use javascript without jquery though). So any solution using jQuery is by definition using javascript. You can find a hint in the word AJAX. The acronym means "Asynchronous JavaScript and XML". Note the word "javascript" in there. All ajax ALWAYS uses javascript as that is the definition of AJAX. – Nanne Dec 29 '13 at 08:54

How to send a more complex POST form?

3 Answers3