未调用表单中的提交
[英]Onsubmit in form does not called
问题描述
我有下一个表格：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> function submit(form) { var first_pass = form.find('.first_try'); var second_pass = form.find('.second_try'); if (first_pass.value == second_pass.value) { return true } first_pass.value = ''; second_pass.value = ''; first_pass.attr('placeholder', 'Пароли не совпадают'); first_pass.css('border-color', 'red'); second_pass.css('border-color', 'red'); return false } </script> <form role="form" method="post" onsubmit="return submit($('#PasswordChange form'))"> <h3>Редактирование пользователя</h3> <div class="form-group"> <input type="password" class="form-control first_try" name="password" placeholder="Новый пароль" required> </div> <div class="form-group"> <input type="password" class="form-control second_try" name="password" placeholder="Повтор пароля" required> </div> <input type="submit" name="submit" class="btn btn-primary pull-right" value="Отправить"></input> </form>
此脚本检查密码是否相同。
但是使用 Firefox 调试器我找不到它进入这个方法。
这是脚本的问题吗？ 还是关于声明 onsubmit 处理程序的问题？
5 个解决方案
解决方案1
1 2017-10-07 12:52:26
有很多问题：
- 将
value更改为val - 使用另一个名称作为提交功能，它有点保留
- 使用
this而不是$('#PasswordChange form') - 使用
var first_pass = $('.first_try');而不是find - 你忘了写
else - 你需要使用
event.preventDefault();停止刷新页面或提交页面。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> function save(form) { var first_pass = form.querySelector('.first_try'); var second_pass = form.querySelector('.second_try'); if (first_pass.value == second_pass.value) { alert('its ok'); return true; } else { first_pass.value = ''; second_pass.value = ''; first_pass.placeholder = 'Пароли не совпадают'; first_pass.style.borderColor='red'; second_pass.style.borderColor='red'; return false } } </script> <form role="form" method="post" onsubmit="event.preventDefault(); return save(this)"> <h3>Редактирование пользователя</h3> <div class="form-group"> <input type="password" class="form-control first_try" name="password" placeholder="Новый пароль" required> </div> <div class="form-group"> <input type="password" class="form-control second_try" name="password" placeholder="Повтор пароля" required> </div> <input type="submit" name="submit" class="btn btn-primary pull-right" value="Отправить"/> </form>
解决方案2
0 2017-10-07 12:32:11
用这个 ：
onsubmit="return submit(this)"
解决方案3
0 2017-10-07 12:33:36
请更改提交函数名称，因为它是关键字，因此不使用它。 同时删除提交按钮旁边的</input>
解决方案4
0 2017-10-07 12:55:46
使用此代码
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> function submitData(form) { var first_pass = form.find('.first_try'); var second_pass = form.find('.second_try'); if (first_pass.value == second_pass.value) { return true } first_pass.value = ''; second_pass.value = ''; first_pass.attr('placeholder', 'Пароли не совпадают'); first_pass.css('border-color', 'red'); second_pass.css('border-color', 'red'); return false } </script> </head> <body> <form role="form" method="post" onsubmit="return submitData($('#PasswordChange form'))"> <h3>Редактирование пользователя</h3> <div class="form-group"> <input type="password" class="form-control first_try" name="password" placeholder="Новый пароль" required></div> <div class="form-group"> <input type="password" class="form-control second_try" name="password" placeholder="Повтор пароля" required></div><input type="submit" name="submit" class="btn btn-primary pull-right" value="Отправить"></form> </body> </html>
解决方案5
0 2018-01-14 10:20:46
如果您不需要取消提交操作，则不应返回任何内容。 您也可以使用带有 jQuery .submit()方法的提交表单事件处理程序，而不是onsubmit属性中的 hanler 定义。
$("form").submit(function(e) { var passwords = $('[name=password]'); if (passwords.eq(0).val() !== passwords.eq(1).val()) { alert("Пароли не совпадают!"); return false; } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form role="form" method="post" action="/"> <h3>Редактирование пользователя</h3> <div class="form-group"> <input type="password" class="form-control first_try" name="password" placeholder="Новый пароль" required > </div> <div class="form-group"> <input type="password" class="form-control second_try" name="password" placeholder="Повтор пароля" required /> </div> <input type="submit" name="submit" class="btn btn-primary pull-right" value="Отправить" /> </form>
另外我建议您使用 Bootstrap 验证状态而不是输入的边框样式设置。
JavaScript：函数“提交”时，表单onSubmit不起作用
[英]JavaScript: Form onSubmit does not work when function is called 'submit'
未在表单上调用html / javascript onsubmit事件提交以验证表单
[英]html/javascript onsubmit event not called on form submit to validate form
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.