I have a form with two input fields, one text and one send button. I want to submit via jQuery .ajax() without reloading the doc开发者_Python百科ument. It works as long as the button is clicked, but not when you press return/enter, then it submits without ajax methodology. I tried onEnter() or onSubmit(), but that didn't work either.
These are the code bits:
//HTML
<div id="search_form">
<form method="POST" action="search.php">
<input id="search_text" type="text" name="query"/>
<input id="search_button" type="button" value="send"/>
</form>
</div>
<div id="results"></div>
//Javascript
jQuery(function(){
$("#search_button").click(function(){
var query = "query="+$("input[name=query]").val();
$.ajax({
type: "GET",
url: "request.php",
data:query,
cache:false,
success: function(result){
$('#results').fadeIn();
},
error:function(xhr,err){
alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status);
alert("responseText: "+xhr.responseText);
}
});
});
});
Instead of a click
on the button, rig up to the submit
event on the <form>
, like this:
$(function() {
$("#myFormId").submit(function() {
$.ajax({
type: "GET",
url: "request.php",
data: $(this).serialize(),
cache: false,
success: function(result){
$('#results').fadeIn();
},
error:function(xhr,err){
alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status);
alert("responseText: "+xhr.responseText);
}
});
return false;
});
});
精彩评论