Jump to content

Archived

This topic is now archived and is closed to further replies.

IlaminiAyebatonyeDagogo

How to Set form fields into an array using javascript

Recommended Posts

Hello everyone I need your assitance a great deal, so I have a form which i submitted to a php file throug ajax and jquery. It is working A ok but I want to be able to submit it with javascript instead, so i don't load any lib. And it is now a problem. The method I use to get the form field names and values in jquery is so simple and dynamic hence if changes are made on the html form i don't have to edit my jquery file to effect the change ie in respect to changing the name of the fields or adding more fields. But I don't know to archieve this using javascript. So i want to post my jquery script, for you all my mighty programmers to assist me get a javascript Clone for me, thank you very much for Helping

Jquery file

$("form.ajax").on("submit", function(){

var that= $(this);

that.find('[name]').each(function(index,value){

var that = $(this),

name =that.attr('name'),

value =that.val();

data[name]=value;

});

return false;});

 

Now the above code is just my major focus of the script. What it does is that select the form with an ajax class attribute and run a function after the user submits the form. The var that get reference to the above form throug the (this) reference. Next i use find fuction to look through out the open and close of our form.ajax form for any element that has the name attribute and set it into array using the .each(function (index,value){}) this is my main focus how to ilterate through the form looking for name attribute and set my finding into array using javascript. The next that var reference to the find statement and then we steal the name attribute and value from our findings and set an array called data with the stolen name variable as its index n value attribute as its value. Thank you once more my aim again is with the find and array setting statement.

Share this post


Link to post
Share on other sites

Note that simply iterating over the elements array and grabbing each name/value pair is only going to work for simple forms with text boxes. If you have things like radio buttons/checkboxes/buttons then you need to do additional checking to determine if that item is valid or not. Unless you have some good reason for not wanting to use jQuery, I would suggest you just stick with it so it will handle all these conditions for you. Even if you do stick with jQuery though your above code is not correct and suffers the same problem of not properly handling radio's and checkboxes. The proper way to do this is to use the jQuery.serializeArray function.

 

var formFields = $('form').serializeArray();
//This returns them in the form of
//formFields[0]['name'] = blah; formFields[0]['value'] = blah
//formFields[1]['name'] = blah; formFields[1]['value'] = blah

//If you want formFields[name] = value instead, you'll have to convert it
var converted = {};
$.each(formFields, function(idx,obj){
   converted[obj.name] = obj.value;
});

Share this post


Link to post
Share on other sites

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.