javascript - 表单提交按钮不起作用

Question

我看不出我的代码有什么问题，但每当我按下 submit按钮，没有任何反应:

<form id = "form_signin_containers" action = "" method = "post">
    <input type = "text" name = "si_idnumber" placeholder = "ID Number" required/>
    <input type = "password" name = "si_password" placeholder = "Password" required/>
    <input type = "submit" name = "si_submit" value = "    sign in    ">
</form>

我尝试在我的 html 代码上方的 php 代码中添加一个 isset 按钮来测试它:

if(isset($_POST['si_submit'])) {
  header("Location:home.php");
}

当我按下提交按钮时，它仍然不起作用。我也注意到了，因为我放了一个 <...required/>在所有文本框上，如果我应该单击提交按钮，如果文本框为空，它会通知我吗？但是当我将文本框留空并按下提交按钮时，它什么也不会做，它甚至不会告诉我文本框是空的。好像按钮已经死了。

更新
我有这个 javascript我放在 </body> 之前每当我单击 anchor 按钮时，这将使页面平滑滚动。
我的 anchor 按钮示例:

<form id = "form_createaccount_button" action="#createchooserblink">
    <input type="submit" value="  create account  " />
</form> 

JS:

<script>
  $(function() {
     $('input').click(function(e) {
     e.preventDefault();
     var hash = $(this).parent('form').attr('action');
     var target = $(hash);
     target = target.length ? target : $('[name=' + hash.slice(1) +']');
     if (target.length) {
       $('html, body').animate({
         scrollTop: target.offset().top
       }, 1000);
     }

 });
 });
</script>

这会影响登录表单吗？

Answer 1

是的，您的 JavaScript 阻止了表单提交:

$('input').click(function(e) {
     e.preventDefault();
     // ...

点击提交按钮会触发点击处理程序，阻止默认操作会阻止表单提交。

您可以通过添加 :not([name=si_submit]) 来明确地将 name="si_submit" 按钮排除在外:

$('input:not([name=si_submit])').click(function(e) {
     e.preventDefault();
     // ...

...但我认为与其这样做，我可能会在“ anchor 按钮”上使用类或其他东西(或者根本不使用“ anchor 按钮”)，然后添加该类。例如:

<form id = "form_createaccount_button" action="#createchooserblink">
    <input type="submit" class="anchor-button" value="  create account  " />
</form>

和:

$('input.anchor-button').click(function(e) {
     e.preventDefault();
     // ...