| 1 comments ]

Dynamic form element selector based on jquery

<html>
<head>
<title>PHPQA Test</title>
on the script side please add jquery library
<script language="javascript" type="text/javascript"
src="http://jobanjohn.googlepages.com/jquery.js"></script>

<script language="javascript">
function getallElementValue()
{
var postData = {};
var argumentList='';
//$(':input',"#phpqaFrm").each(function(){

$(':input',"form[name=phpqaFrm]").each(function(){
var type = this.type;
if(this.value!=null){
if((type!='checkbox') && (type!='button')
&&(type!='submit')&&(type!='radio'))
{
argumentList =argumentList+'&'+this.name+'='+this.value;
}
else if((type=='checkbox')||(type=='radio')){
if($(this).is(':checked')) {
argumentList =argumentList+'&'+this.name+'='+this.value;
}
}
}
});
$('select',"form[name=phpqaFrm]").each(function(){
var type = this.type;
if(this.value!=null){
argumentList =argumentList+'&'+this.name+'='+this.value;
}
});
$('textarea',"form[name=phpqaFrm]").each(function(){
var type = this.type;
if(this.value!=null){
argumentList =argumentList+'&'+this.name+'='+this.value;
}
});
return argumentList;
}

function getvalues(){
var val = getallElementValue();
alert(val);
// do ajax action if you want to post it using $.get , $.ajax, $.post
etc to a server and handle the response !!
}
</script>

<!--script part ends here -->
</head>
<body>
<!-- note the form name-->
<form name="phpqaFrm" id="phpqaFrm">
<input type="hidden" name="action" value="phpqainsertlocation" />
<table width="500">
<tr>
<td><input type="text" name="phpqaTest1" value="phpqa
Test 1"></td>
<td><input type="text" name="phpqaTest2" value="phpqa
Test 2"></td>
</tr>
<tr>
<td><input type="checkbox" name="phpqaTest3[]"
value="phpqa Test 3"></td>
<td><input type="checkbox" name="phpqaTest3[]"
value="phpqa Test 4"></td>
</tr>
<tr>
<td><input type="radio" name="phpqaTest5[]"
value="phpqa Test 5"></td>
<td><input type="radio" name="phpqaTest5[]"
value="phpqa Test 6"></td>
</tr>
<tr>
<td>
<select name="phpqaTest7">
<option value="phpqaTest8">phpqa Test 8</option>
<option value="phpqaTest9">phpqa Test 9</option>
<option value="phpqaTest10">phpqa Test 10</option>
<option value="phpqaTest11">phpqa Test 11</option>
<option value="phpqaTest12">phpqa Test 12</option>
</select>
</td>
<td>
<select name="phpqaTest13">
<option value="phpqaTest14">phpqa Test 14</option>
<option value="phpqaTest15">phpqa Test 15</option>
<option value="phpqaTest16">phpqa Test 16</option>
<option value="phpqaTest17">phpqa Test 17</option>
<option value="phpqaTest18">phpqa Test 18</option>
</select>
</td>
</tr>
<tr>
<td><textarea name="phpqaTest19" >phpqa Test 19</textarea></td>
<td><textarea name="phpqaTest20" >phpqa Test 20</textarea></td>
</tr>
<tr>
calling the java script function get form values
<td><input type="button" name="phpqa" value="check it"
onclick="javascript:getvalues()"></td>.
<td></td>
</tr>
</table>
</form>
</body>
</html>

Demo here


1 comments

jj said... @ Monday, March 2, 2009 at 5:43:00 AM GMT


Demo here"

Post a Comment

Please put your comments here. your questions, your suggestions, also what went wrong with me.