Get all form elements and values

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
andrei.mita
Forum Commoner
Posts: 65
Joined: Sun May 08, 2005 4:06 am
Location: Barlad/Romania

Get all form elements and values

Post by andrei.mita »

Hello,

I am currently discovering the power of AJAX and as a result I started learning JavaScript, the PHP I can manage. I am currently trying to submit a form and update a sql database. It's working fine except that when I construct the url to the php file for the script to access it I find very annoying that I have to write variables for all elements and then add them to the url. It works for a small form but when things get complicated, like submitting a 44 elements form it just isn't right. I know for sure the form can be "scanned" and the url automatically constructed but I don't know where to look for info. I don't even know how to Google it.

Here is how I do it:

Code: Select all

 
    var install_date = document.getElementById("install_date").value;
    var posid = document.getElementById("posid").value;
    var ip = document.getElementById("ip").value;
    var pos_type = document.getElementById("pos_type").value;
    var pos_sn = document.getElementById("pos_sn").value;
    var pinpad_sn = document.getElementById("pinpad_sn").value;
    var ID = document.getElementById("ID").value;
 
    var url = "php/change_details.php?";
    var params = "&ID=" + ID + "&install_date=" + install_date + "&posid=" + posid + "&ip=" + ip + "&pos_type=" + pos_type + "&pos_sn=" + pos_sn + "&pinpad_sn=" + pinpad_sn;
 
    url = url+params;
 
User avatar
EverLearning
Forum Contributor
Posts: 282
Joined: Sat Feb 23, 2008 3:49 am
Location: Niš, Serbia

Re: Get all form elements and values

Post by EverLearning »

Function accepts url and form as an arguments(this.form, or forms['form_name'] should work). Here is the code(untested)

Code: Select all

 
<input type="button" name="Submit" onclick="sendRequest(url, this.form)" />
 
function sendRequest(url, form) {
  var params = '';
  if (form) {
    for (var i = 0; i < form.length; i++) {
      if (form[i].name != "") {
        if (form[i].type == "radio") {   // for radio buttons
            if (form[i].checked == true) {
              params += '&' + form[i].name + '=' form[i].value;
            }
        } else {
          params += '&' + form[i].name + '=' form[i].value;
        }
      }
    } 
  }
  
  var requestUrl = url + params;
  //and now make the call...
  
  
}
 
andrei.mita
Forum Commoner
Posts: 65
Joined: Sun May 08, 2005 4:06 am
Location: Barlad/Romania

Re: Get all form elements and values

Post by andrei.mita »

form.name and form.value are used for document.getElementByName("id").value, right? If I use getElementById is ok to use form.id?

Thanks a lot, testing right now.
User avatar
EverLearning
Forum Contributor
Posts: 282
Joined: Sat Feb 23, 2008 3:49 am
Location: Niš, Serbia

Re: Get all form elements and values

Post by EverLearning »

andrei.mita wrote: If I use getElementById is ok to use form.id?

Yes, it should be ok.
andrei.mita
Forum Commoner
Posts: 65
Joined: Sun May 08, 2005 4:06 am
Location: Barlad/Romania

Re: Get all form elements and values

Post by andrei.mita »

Thank you very much, it's perfect for what I need.

One correction thou... there are two + missing in the code and maybe other will use it.

Code: Select all

 
         if (form[i].type == "radio") {   // for radio buttons
             if (form[i].checked == true) {
               params += '&' + form[i].name + '=' [color=#FF0000]+[/color] form[i].value;
             }
         } else {
           params += '&' + form[i].name + '=' [color=#FF0000]+[/color] form[i].value;
         }
 
Again, thank you.
Post Reply