Question

I am looking for a really simple way of getting all the values from all input elements (and some dividers as well) and then quickly sending them to a PHP file with an already prepared submit function.

I have came up with a very crude solution but it needs to be heavily optimized.

For now when I click submit button I call a function

function $('#submit').click(function(){

var $divValues = new Array();
$divValues[0] = $('#divName').html();
$divtValues[1] = $('#divImgName').html();

var $values;
$values = $(':input').serializeArray();

$fileName = "php.php?firstVal=\""+$divValues[0]+"\"&secondVal=\""+$divtValues[1]+"\"&thirdVal=\""+$values['firstValName']+"\"&ect..." 

//then i simply call the ajax function which will send the information to the php file
fetch($fileName);    
});

maybe i could use the fact that the names of values in my associative array and the names of variables retrieved in my php file match and instead of setting my filename to ..."&thirdVal=\"" ... I would instead use the name of the $values['firstValName'] which in this example would be third value (although i have no idea how to do that)

or maybe there is an even easier way to accomplish what im trying to.
Any ideas on how to implement this piece of code in a nice manner??

Update:

For now I don’t have a form element in my html but I can easily add one as soon as I see a solution that requires it to make the code simpler…
I know I can use serialize() function but my questions is about a nice way of dealing with the array that gets returned. (or maybe using 2 arrays one with name other with value or a 2 dimensional array)
Either way I just wish to see what is an easy way of both getting the data and creating the $fileName with correct values for the PHP file

I would appreciate some code or pseudocode in the answer that shows a simple way of creating the fileName with all the values

If anybody doesn’t understand what I am asking or needs some clarification then they should feel free post a comment below so I can try to make myself clear.

Answer 1

Since you’re using jQuery, you could use its AJAX methods with serialize() applied to the entire form. You can read documentation about it by clicking here. Also you can read documentation about jQuery’s AJAX methods by clicking here, here and here.

In response to your request, here is a really simple example:

$.post("test.php", $("#testform").serialize());

You could really get the rest of what you need on how to use $.post or $.get functions from the documentation I referenced.

Serialize also takes care of urlencoding all the variables so you don’t have to worry about that.

EDIT:

It’s not really necessary to have a form. You could just do what you are trying to do with serializeArray() above, except (a) $(‘:input’) does not select anything and (b) you should use serialize() and not serializeArray(). So without a form, the code would look as follows:

$.post("test.php", $("input,select,textarea").serialize());

This will properly request the script with the data encoded correctly and you can then read it in PHP script from $_POST or $_GET depending on whether you used $.post or $.get to request the script.