...

View Full Version : Jquery Form



mrmrsg
11-16-2010, 10:37 PM
If I am using the Jquery form plugin, how can I get the it to fire the submit when an option is selected in a Select control rather than a submit button?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">

$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});

</script>

</head>

<body>
<form id="myForm" action="testpost.php" method="POST">
<select name="test" id="item_select">
<option value="0">No Tech Assigned</option>
<option value="1">No Tech Assigned</option>
<option value="2">No Tech Assigned</option>
</select>

</form>
</body>
</html>

Rowsdower!
11-17-2010, 05:51 PM
Add a jquery handler for "onchange" for your select tag:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//hide the submit button
$('#hidden_submit_button').hide();

// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});

// bind 'item_select' and provide a simple callback function
$('#item_select').change(function() {
alert('Selection has changed!');
document.getElementById('hidden_submit_button').click();
});
});
</script>
</head>

<body>
<form id="myForm" action="testpost.php" method="POST">
<select name="test" id="item_select">
<option value="0">No Tech Assigned</option>
<option value="1">No Tech Assigned</option>
<option value="2">No Tech Assigned</option>
</select>
<input type="submit" value="Submit" id="hidden_submit_button" />
</form>
</body>
</html>

And add a submit button (which you can hide with CSS) to "click" with the script to submit the form. The reason you can't simply use a javascript "submit" directly on the form is that when you do so, the "onsubmit" script will not run. Adding a submit button and simulating a click on it will allow your onsubmit (ajaxForm) script to still run.

Alternatively, you could set the onchange function above to do all of your current onsubmit stuff (remove your onsubmit code since it won't fire anyway), then do a call to this.parentNode.submit() so that you don't have to worry about the hidden submit button at all. The downside is a complete lack of support for any user who has javascript disabled. On the whole, the first approach is better practice as far as I am concerned.

lavonsmith
11-22-2010, 05:48 AM
All the frameworks I seem to find are either huge and are full of features I simply don't need or are so lightweight.
Nitro Muscle mass (http://nitromusclemasssite.com/)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum