Passing only non-Empty fields on form submit

Sometimes you have a lot of text-fields and want only those fields to be sent to the server as parameters, which are not left blank (that is which are filled). This helps in decreasing the amount of data being sent to the server.

This is one way of how the above can be done. Lets first start with the basic HTML. The form (say testform) may consists of a number of text fields and a submit button. When the button named “Submit” is clicked, the javascript function “submitFunc()” is called.
<form name="testform">
      <input type="text" name="text1" id="text1"><br />
      <input type="text" name="text2" id="text2"><br />
      <input type="text" name="text3" id="text3"><br />
      <input type="button" onclick="submitFunc();" value="Submit">
<form>
Now about the “submitFunc()” function. This function checks each text field by calling the “loopRemove ()” function.
function submitFunc() {

      loopRemove("text",3);
      document.testform.action = "http://scriptden.blogspot.com";
      document.testform.submit();
}
The “loopRemove()” function loops over the fields, who have a similar name with two parts, one a string (say, ‘text’), suffixed by an integer part in increasing order starting with one (eg. ‘txtField1’,’txtField2’,…).It checks whether the given element’s field value is empty, and if found empty it removes the corresponding element by accessing the element’s parent node.
function loopRemove(startName,count) {
      for(var i=1;i<=count;i++) {
            if(document.getElementById(startName+i).value=="") { 
                  var t = document.getElementById(startName+i);
                  t.parentNode.removeChild(t); 
            }
      } 
}
The action path of the form is specified dynamically and the form is submit using the “form.submit()” function. The form thus submitted (with empty elements removed) will pass only the filled field’s values to the page/location specified in the action path.
document.testform.action = "http://scriptden.blogspot.com";
document.testform.submit();
This sums up the article. Hope this helps.
This post is open for your queries and suggestions.

You can download the entire script here.

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...
 

Copyright © 2012 | ScriptSplash | Powered by Blogger Templates