Sample quick extraction of web form data using jquery selectors

  • 2020-03-30 02:29:42
  • OfStack

I am relatively lazy, when doing the web, when it comes to repeat the same thing many times, I want to find a way to save time and effort.

In web before submitting the form and need to validate user input, the extraction of the user input information, will be in js use document. The getElementById (), so a two form fields are ok, but when there are many (I just met with a dozen) look at all, so people are disgusted this way, but also good, I consider myself, found a convenient method using the jquery.

I added an extra attribute to each form field where I needed to submit the data, and I replaced the original name attribute with an extra attribute of my own, "_postField", such as < Input type = "text" _postField = "name" / > < Input type = "radio" _postField = "sex" / > , and then use query to get all the dom objects with _postField attribute, and walk through them, and wrap them into a json key-value pair with the value of _postField as the key and its content as the value. The js method is as follows:
 
<script type="text/javascript> 
function getFormField(sel){ 
var objs = $("*["+sel+"]"); 
var postData = {}; 
for(var i=0,len=objs.length;i<len;i++){ 
var obj = objs[i]; 
var nodeName = obj.nodeName.toLowerCase(); 
var field = $(obj).attr(sel); 

if(nodeName=="input"){ 
if(obj.type.trim()=="radio"&&(obj.checked||obj.checked=="checked")){ 

postData[field] = $(obj).val(); 
continue; 
} 
if(obj.type.trim()=="checkbox"&&(obj.checked||obj.checked=="checked")){ 
var ov = postData[field]||""; 
var nv = ov+","+$(obj).val(); 
postData[field] = nv.replace(/^,+/,""); 
continue; 
} 

if(obj.type.trim()=="text"||obj.type.trim()=="hidden"){ 
postData[field] = $(obj).val(); 
continue; 
} 

continue; 
} 

if(nodeName=="textarea"){ 
postData[field] = $(obj).val(); 
continue; 
} 

if(nodeName=="select"){ 
var val = obj.options[obj.selectedIndex].value; 
postData[field] = val; 
continue; 
} 

postData[field] = $(obj).html(); 

} 

//Returns json data that gets the data from the form
return postData; 
} 
</script> 

Test code:
 
<form style="margin-left:200px; margin-top:300px;"> 
<input type="text" value="" _postField="name" /><br /><br /> 
<input type="radio" value=" male " name="sex" _postField="sex" /> male  
<input type="radio" value=" female " name="sex" _postField="sex" /> female  
<input type="radio" value=" neutral " name="sex" _postField="sex" /> neutral  <br /><br /> 
<select _postField="job"> 
<option value=" Go to work "> Go to work </option> 
<option value=" A beggar "> A beggar </option> 
<option value=" It doesn't matter "> It doesn't matter </option> 
</select> 
<br /><br /> 
<input type="button" value=" OK " onclick="test();" /> 
</form> 
<script> 
function test(){ 
var postData = getFormField("_postField"); 

var sb = []; 
for(var o in postData){ 
sb.push(o+"="+postData[o]); 
} 
alert(sb.join("n")); 
} 
</script> 

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201403/201403271642234.gif? 2014227164239 ">  

The form fields in the above example are relatively few, and some things cannot be reflected, but when the number of form fields is compared, it can reflect its convenience and good reuse; Furthermore, if you commit asynchronously with jquery, you don't have to wrap json data manually.
Some people may not want to add a custom field like "_postField" to the form field, so just use the name that you already have. It's just the use of jquery selectors that makes it the same.

Related articles: