There are similar questions at SO, but none that seem to address this.
Below is a very simplified variant of my situation. Drupal/PHP site -- I have a form w/ submit button that I am using jquery.form plugin to ajax-ly submit. It works fine if I use the submit (#submit) button.
Now, I want to programmatically fire that button using another button (#submit2) outside of the form. I can do that using jquery click() function, but the content coming back isn't going to the ajax target as I would expect.
I do not have much freedom to re-organize this code, else i would.
(Note I tried to make this code easy for you to run by src-ing jquery and the form plugin from my website.)
Ideas? Thanks!
<?php
if ($_REQUEST['submit'] == 'Submit') {
print 'ajax returns ... ' . $_REQUEST['text'];
exit;
}
?>
<html>
<head>
<script type="text/javascript" src="http://enjoy3d.com/scripts/jquery-1.2.6.js"></script>
<script type="text/javascript" src="http://enjoy3d.com/scripts/jquery.form.js"></script>
<script type="text/javascript">
$(function() {
$('#form').ajaxForm( { target: $('#span') } );
$('#submit2').click( function() { $('#submit').click(); } );
});
</script>
</head>
<body>
<span id='span'>target span</span>
<form method='post' id='form'>
<input type='text' name='text' size='50' />
<input type='submit' id='submit' name='submit' value='Submit'/>
</form>
<input type='submit' id='submit2' name='submit2' value='Submit Too?' />
</body>
</html>
-
You may also need to
return falseimmediately after triggering the form submit button from the non-form submit button click event code. For example:<script type="text/javascript"> $(function() { $('#form').ajaxForm({ target: $('#span') }); $('#submit2').click(function() { $('#submit').click(); return false; }); }); </script>It works for me. Is that what you are looking for?
Scott Evernden : really, it worked for you? Didn't make any difference when I tried your suggestion. Clicking submit2 caused the page to reload showing only the ajax result content (input field goes away) -
Have you tried giving a name to the form, and instead of
$('#submit2').click( function() { $('#submit').click(); } );doing
$('#submit2').click( function() { document.myForm.submit(); } );That should do the same thing as having the submit button clicked if the form has been ajaxified.
Scott Evernden : the jquery.form plugin binds functionality to the submit button's click event, so submitting the form directly doesn't work -
Hi Scott,
I managed to solve a similar situation to yours. If the only objective of simulating a click on submit1 is to submit the form, you might try:
$('#submit2').click(function() { $('#form').trigger('submit'); });
0 comments:
Post a Comment