我有一个表单，您可以将数据添加到数据库中。这一切都是用 jquery 和 ajax 完成的，所以当您按下提交时，它会验证代码，然后如果一切正确，它会提交发布数据而不刷新页面。问题是表格第一次工作，但是当您使用该表格提交另一个条目时它不起作用。我认为这与
$(document).ready(function(){
但我真的不知道。我在下面粘贴了一些代码。它很长，但这应该提供足够的信息来了解它在做什么。 整个js文件在http://www.myfirealert.com/callresponse/js/AddUser.js
$(document).ready(function(){
$('#AddCaller').click(function(e){
//stop the form from being submitted
e.preventDefault();
/* declare the variables, var error is the variable that we use on the end
to determine if there was an error or not */
var error = false;
var Firstname = $('#Firstname').val();
...OTHER FORM FIELDS HERE
/* in the next section we do the checking by using VARIABLE.length
where VARIABLE is the variable we are checking (like name, email),
length is a javascript function to get the number of characters.
And as you can see if the num of characters is 0 we set the error
variable to true and show the name_error div with the fadeIn effect.
if it's not 0 then we fadeOut the div( that's if the div is shown and
the error is fixed it fadesOut. */
if(Firstname.length == 0){
var error = true;
$('#Firstname_error').fadeIn(500);
}else{
$('#Firstname_error').fadeOut(500);
}
if(Lastname.length == 0){
var error = true;
$('#Lastname_error').fadeIn(500);
}else{
$('#Lastname_error').fadeOut(500);
}
...MORE CONDITIONAL STATEMENTS HERE
//now when the validation is done we check if the error variable is false (no errors)
if(error == false){
//disable the submit button to avoid spamming
//and change the button text to Sending...
$('#AddCaller').attr({'disabled' : 'true', 'value' : 'Adding...' });
/* using the jquery's post(ajax) function and a lifesaver
function serialize() which gets all the data from the form
we submit it to send_email.php */
$.post("doadd.php", $("#AddCaller_form").serialize(),function(result){
//and after the ajax request ends we check the text returned
if(result == 'added'){
//$('#cf_submit_p').remove();
//and show the success div with fadeIn
$('#Add_success').fadeIn(500);
$('#AddCaller').removeAttr('disabled').attr('value', 'Add A Caller');
document.getElementById('Firstname').value = "";
document.getElementById('Lastname').value = "";
document.getElementById('PhoneNumber').value = "";
document.getElementById('DefaultETA').value = "";
document.getElementById('Apparatus').value = "";
document.getElementById('DefaultLocation').value = "";
setTimeout(" $('#Add_success').fadeOut(500);",5000);
}else if(result == 'alreadythere'){
//checks database to see if the user is already there
$('#Alreadythere').fadeIn(500);
$('#AddCaller').removeAttr('disabled').attr('value', 'Add A Caller');
}
else{
//show the failed div
$('#Add_fail').fadeIn(500);
//reenable the submit button by removing attribute disabled and change the text back to Send The Message
$('#AddCaller').removeAttr('disabled').attr('value', 'Send The Message');
}
});
}
});
});
现在，您第一次使用该表单时效果很好。并且该按钮被重新启用，但是当您尝试进行另一个输入并单击该按钮时，没有任何反应。
感谢您的帮助!
编辑: 第一次提交表单后，该按钮仍处于启用状态，您可以点击它，但是当您点击它时什么也没有发生...即使您不填写表格。这就像表单的点击事件不是第一次触发。
EDIT2 根据要求，我将发布 HTML，它位于受密码保护的网站后面，因此我无法向您发送页面链接。
<form action='addcallers.php' method='post' id='AddCaller_form'>
<h2>Add Callers</h2>
<p>
First Name:
<div id='Firstname_error' class='error'> Please Enter a First Name</div>
<div><input type='text' name='Firstname' id='Firstname'></div>
</p>
<p>
Last Name:
<div id='Lastname_error' class='error'> Please Enter a Last Name</div>
<div><input type='text' name='Lastname' id='Lastname'></div>
</p>
...MORE FORM FIELDS HERE
<div style="display:none;">
<input type='text' name='DefaultLocation' id='DefaultLocation' value= "Sometthing" readonly=readonly >
</div>
</p>
<p>
<div id='Add_success' class='success'> The user has been added</div>
<div id='Alreadythere' class='error'> That user is already in the database</div>
<div id='Add_fail' class='error'> Sorry, don't know what happened. Try later.</div>
<p id='cf_submit_p'>
<input type='submit' id='AddCaller' value='Send The Message'>
</p>
</form>
</div>
EDIT3 页面上还有其他 ajax，但它是直接用 javascript 编写的。我不确定这是否会以任何方式影响功能。但如果需要，我也可以发布该 ajax。
EDIT4 我从 http://web.enavu.com/tutorials/create-an-amazing-contact-form-with-no-ready-made-plugins/ 得到了原始教程并修改了
编辑 在放入一些不同的警报后，我发现它不执行条件语句 if(error==false)... 知道为什么吗？
最佳答案
很可能是 #DefaultLocation 字段，因为它是只读的，并且您在第一篇文章后重置它:
document.getElementById('DefaultLocation').value = "";
并且永远不会将它的值(value)改回某物(或者你是？) 所以您必须执行以下操作之一:
- 不要重置它
- 在填写表单后设置它的值
- 根本不要验证它，因为它是只读的，并且您将它用作隐藏输入(顺便说一句，这是错误的)!
此外，它可能是您正在谈论的其他“ajax”代码，因此也请将其张贴在这里，也可能您在页面其他地方有其他字段(元素)，其 ID 与表单中的 ID 相同。
无论如何，这里有一些提示给你: 1- 正确关闭输入标签(添加/到它的末尾):
<input type='text' name='Firstname' id='Firstname' />
2- 确保所有 DIV 和 P 都已关闭...因为您在这里似乎有一个打开的 P:
<p>
<div id='Add_success' class='success'> The user has been added</div>
<div id='Alreadythere' class='error'> That user is already in the database</div>
<div id='Add_fail' class='error'> Sorry, don't know what happened. Try later.</div>
</p> <---- missing this one
<p id='cf_submit_p'>
3- 你一直在重新声明错误变量，你不需要这样做:
if(Firstname.length == 0){
var error = true;
....
只需使用 error = true; 而不使用 var 这适用于您要更改其值的所有地方 仅在初始化时使用 var:
var error = false;
4- 而不是这个:
$('#AddCaller').attr({'disabled' : 'true', 'value' : 'Adding...' });
使用:
$('#AddCaller').attr({'disabled' : 'disabled', 'value' : 'Adding...' });
5- 如果您使用 DefaultLocation 作为隐藏字段，则代替此:
<div style="display:none;">
<input type='text' name='DefaultLocation' id='DefaultLocation' value= "Sometthing" readonly=readonly />
</div>
使用:
<input type="hidden" name="DefaultLocation" id="DefaultLocation" value="Something" />
关于php - Jquery 表单仅在您第一次提交时有效，而不是第二次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4439988/