我的表格如下:
<form accept-charset="UTF-8" action="{{ path("fos_user_resetting_send_email") }}" method="post">
<div class="field">
<label for="username">Email:</label>
<input class="text" id="passwordEmail" name="username" required="required" size="30" type="text">
<div class="field-meta">Put in your email, and we send you instructions for changing your password.</div>
</div>
<div class="field">
<input id="submitPasswordRequest" class="full-width button" name="commit" tabindex="3" type="submit" value="Get Password">
</div>
<div class="field center">
<a href="#" onclick='togglePasswordForm(); return false;' class="password_link extra_form_link">Nevermind, I Remembered</a>
</div>
我正在尝试通过AJAX发布帖子,所以我做了一个简单的测试:
$("#submitPasswordRequest").click(function() {
var username = $('#passwordEmail').value();
console.log(username);
/*
$.ajax({
type: "POST",
url: "/resetting/send-email",
data: { username: username}, // serializes the form's elements.
success: function( data ) {
console.log(data); // show response from the php script.
}
});
*/
return false;
});
然而,似乎没有触发点击功能,它会通过常规表单操作发布表单。我在这做错了什么?我想通过AJAX处理这个问题。
答案 0 :(得分:2)
单击按钮时,只需将表单提交到后端即可。要覆盖此行为,您应该覆盖表单上的submit
操作。旧式:
<form onsubmit="javascript: return false;">
新风格:
$('form').submit(function() { return false; });
在提交时,您想要执行ajax查询:
$('form').submit(function() {
$.ajax({ }); // here we perform ajax query
return false; // we don't want our form to be submitted
});
答案 1 :(得分:2)
使用jQuery的preventDefault()
方法。此外,value()
应为val()
。
$("#submitPasswordRequest").click(function (e) {
e.preventDefault();
var username = $('#passwordEmail').val();
...
});
完整代码:http://jsfiddle.net/HXfwK/1/
您还可以收听表单的submit
事件:
$("form").submit(function (e) {
e.preventDefault();
var username = $('#passwordEmail').val();
...
});
答案 2 :(得分:1)
jquery和ajax
$('form id goes here).submit(function(e){
e.preventDefault();
var assign_variable_name_to_field = $("#field_id").val();
...
if(assign_variable_name_to_field =="")
{
handle error here
}
(don't forget to handle errors also in the server side with php)
after everyting is good then here comes ajax
datastring = $("form_id").serialize();
$.ajax({
type:'post',
url:'url_of_your_php_file'
data: datastring,
datatype:'json',
...
success: function(msg){
if(msg.error==true)
{
show errors from server side without refreshing page
alert(msg.message)
//this will alert error message from php
}
else
{
show success message or redirect
alert(msg.message);
//this will alert success message from php
}
})
});
在php页面上
$variable = $_POST['field_name']; //don't use field_id if the field_id is different than field name
...
then use server side validation
if(!$variable)
{
$data['error']= true;
$data['message'] = "this field is required...blah";
echo json_encode($data);
}
else
{
after everything is good
do any crud or email sending
and then
$data['error'] = "false";
$data['message'] = "thank you ....blah";
echo json_encode($data);
}
答案 3 :(得分:1)
您应该使用表单的submit
处理程序而不是单击处理程序。像这样:
$("#formID").submit(function() {
// ajax stuff here...
return false;
});
在HTML中,将ID formID
添加到表单元素:
<form id="formID" accept-charset="UTF-8" action="{{ path("fos_user_resetting_send_email") }}" method="post">
答案 4 :(得分:1)
您需要阻止表单提交和刷新页面,然后运行您的AJAX代码:
$('form').on('submit',function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "/resetting/send-email",
data: $('form').serialize(), // serializes the form's elements.
success: function( data ) {
console.log(data); // show response from the php script.
}
});
return false;
});