jQuery ajaxSubmit(): ho to send the form referencing on the fields id, instead of the fields name?

Question

Hi guys, im pretty new to jQuery, and i dont know how to do that, and if it can be done without editing manually the plugin.

Assume to have a simply form like that:

<form action="page.php" method="post">
Name: <input type="text" name="Your name" id="contact-name" value="" />
Email: <input type="text" name="Your email" id="contact-email" value="" />
</form>

When you submit it, both in 'standard' way or with ajaxSubmit(), the values of the request take the label of the field name, so in the page.php i'll have:

$_POST['Your name'];
$_POST['Your email'];

Instead i'll like to label the submitted values with the id of the field:

$_POST['contact-name'];
$_POST['contact-email'];

Is there a way to do that with jquery and the ajaxsubmit() plugin? And, maybe, there is a way to do it even with the normal usage of a form?

p.s: yes, i know, i could set the name and id attributes of the field both as 'contact-name', but how does two attributes that contain the same value be usefull?

Answer 1

It's the way forms work in HTML.

Besides, Id's won't work for checkboxes and radio buttons, because you'll probably have several controls with the same name (but a different value), while an HTML element's id attribute has to be unique in your document.

If you really wanted, you could create a preprocessor javascript function that sets every form element's name to the id value, but that wouldn't be very smart IMHO.

Answer 2

var name = $("#contact-name").val();
var email = $("#contact-email").val();
$.post("page.php", { contact-name: name, contact-email: email } );

This will let you post the form with custom attributes.

Answer 3

According to the HTML spec, the browser should submit the name attribute, which does not need to be unique across elements.

Some server-side languages, such as Rails and PHP, take multiple elements with certain identical names and serialize them into data structures. For instance:

<input type="text" name="address[]" />
<input type="text" name="address[]" />

If the user types in 1 Infinite Loop in the first box and Suite 45 in the second box, PHP and Rails will show ["1 Infinite Loop", "Suite 45"] as the contents of the address parameter.

This is all related to the name attribute. On the other hand, the id attribute is designed to uniquely represent an element on the page. It can be referenced using CSS using #myId and in raw JavaScript using document.getElementById. Because it is unique, looking it up in JavaScript is very fast. In practice, you would use jQuery or another library, which would hide these details from you.

It is reasonably common for people to use the same attribute value for id and name, but the only one you need to care about for form submission is name. The jQuery Form Plugin emulates browser behavior extremely closely, so the same would apply to ajaxSubmit.