this.form.submit vs. submit button
I am trying to auto submit a form after a zip code is entered that will trigger the display of a google map.
The code works fine if I use a submit button with the form. The form submits and the ajax code does it's thing and the div is replaced with the google map that corresponds to the zip code.
However, if I try to auto submit the form using the code below:
// prepare the form when the DOM is ready
$(document).ready(function() {
var options = {
target: '#htmlExampleTarget' // target element(s) to be updated with server response
// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
// bind to the form's submit event
$('#htmlForm').submit(function() {
// inside event callbacks 'this' is the DOM element so we first
// wrap 开发者_运维百科it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
});
});
<form id="htmlForm" action="html-echo.php" method="post">
Message: <input type="text" name="message" onKeyUp="if(this.value.length>4)this.form.submit()">
<div id="htmlExampleTarget">
<script type="text/javascript">
$(function()
{
$("#map").gMap({ address: "Los Angeles", zoom: 13 });
});
</script>
<div id="map" style="width: 547px; height: 320px; border: 1px solid #777; overflow: hidden;"></div>
</div>
All that happens is that the forms action (action="html-echo.php") page is loaded.
How can I make this.form.submit behave the same as a submit button?
Thank you!
The DOM method form.submit() doesn't trigger submit handlers. Since you are using jQuery, use $(this.form).trigger("submit") instead.
加载中,请稍侯......
精彩评论