How to Set form fields into an array using javascript

[IlaminiAyebatonyeDagogo]

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.

[Ch0cu3r]

You can get the form with the class of ajax using getElementsByClassName. Once you have the the form you can iterate over the form elements and get the name and value attributes using  form.element.name   or   form.element.value

 

 

Live Example

[IlaminiAyebatonyeDagogo]

yoo! Boss You are good alaways getting my back I love you. And i mean it thank you phpfreak for Ch0cu3r

[kicken]

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;
});

[IlaminiAyebatonyeDagogo]

thanks man for assisting that was educating