朋友们,大家好,我是jquery和javascript的新手,所以我在不重新加载页面的情况下将我想发送表单的代码复制到了php页面,这个代码有效,但我想点击提交按钮发送表单,而不是输入键:
<input type="text" id="name" name="name" /><br><br>
<input type="text" id="job" name="job" /><br><br>
<input type="submit" id="submit" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#name').focus();
$('#name').keypress(function(event) {
var key = (event.keyCode ? event.keyCode : event.which);
if (key == 13) {
var info = $('#name').val();
$.ajax({
method: "POST",
url: "fell.php",
data: {
name: $('#name').val(),
job: $('#job').val()
},
success: function(status) {
}
});
};
});
});
</script>
要使提交按钮的点击生效,您应该将代码包装在form
元素中,然后将JS代码更改为挂钩到该表单的submit
事件。请注意,默认情况下,这还会为您提供"在输入按键时提交"操作,因此可以删除当前的按键处理程序。试试这个:
<form id="my-form">
<input type="text" id="name" name="name" /><br><br>
<input type="text" id="job" name="job" /><br><br>
<input type="submit" id="submit" />
</form>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#name').focus();
$('#my-form').submit(function(e) {
e.preventDefault();
$.ajax({
method: "POST",
url: "fell.php",
data: $(this).serialize(),
success: function(status) {
console.log('AJAX call successful');
console.log(status);
}
});
});
});
</script>
You are not name the submit button. Try to give name to submit button and try below:-
<form id="myFrom" onsubmit="submitForm();">
<input type="text" id="name" name="name" /><br><br>
<input type="text" id="job" name="job" /><br><br>
<input type="submit" id="submit" name="submit" />
</form>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#name').focus();
});
function submitForm(){
$.ajax({
method: "POST",
url: "fell.php",
data: $("#myFrom").serialize(),
success: function(status) {
alert("successfull");
}
});
return false;
}
</script>