Javascript html表单在提交时未调用正确的函数

编辑： 我在HTML页面上有两个表单，两个表单都有一个提交按钮。当按下提交按钮时，我试图调用特定的函数。为此，我使用2

标记来处理提交按钮的单击，但只要我添加2

标记，它就会刷新页面

表格1。

<div class="contact-form col-md-6 ">
  <form id="contact-form" method="post" action="" role="form">
    <div class="form-group">
      <input type="text" placeholder="Your Name" class="form-control" name="name" id="name" required>
    </div>
    <div class="form-group">
      <input type="email" placeholder="Your Email" class="form-control" name="email" id="email" required>
    </div>
    <div class="form-group">
      <input type="text" placeholder="Your Phone Number" class="form-control" name="phone" id="phone" required>
    </div>
    <div class="response_msg"></div>
    <div id="mail-success" class="success">
      Thank you. Welcome in Family. :)
    </div>
    <div id="mail-fail" class="error">
      Sorry, don't know what happened. Try later :(
    </div>
    <div id="cf-submit">
      <input type="submit" id="contact-submit" class="btn btn-transparent" value="Register" name="submit">
    </div>
  </form>
</div>

非常感谢。欢迎加入家庭。：）
对不起，我不知道发生了什么事。请稍后再试：(

表格2

<div class="contact-form col-md-6 ">
  <form id="contact-form_message" method="post" action="" role="form">
    <div class="form-group">
      <input type="text" placeholder="Your Name" class="form-control" name="name" id="name" required>
    </div>
    <div class="form-group">
      <input type="email" placeholder="Your Email" class="form-control" name="email" id="email" required>
    </div>
    <div class="form-group">
      <input type="text" placeholder="Your Phone Number" class="form-control" name="phone" id="phone" required>
    </div>
    <div class="response_msg"></div>
    <div id="mail-success" class="success">
      Thank you. Welcome in Family. :)
    </div>
    <div id="mail-fail" class="error">
      Sorry, don't know what happened. Try later :(
    </div>
    <div id="cf-submit">
      <input type="submit" id="contact-submit" class="btn btn-transparent" value="Register" name="submit">
    </div>
  </form>
</div>

谢谢。欢迎加入我们的家庭。：）
对不起，我不知道发生了什么事。请稍后再试：(

为每个表单使用2个标签

  <script> 
```
$(document).ready(function(){
  $("#contact-form").on("submit",function(e){
    e.preventDefault();
    if($("#contact-form [name='name']").val() === '')
      {
      $("#contact-form [name='name']").css("border","1px solid red");
      }
    else if ($("#contact-form [name='email']").val() === '')
      {
      $("#contact-form [name='email']").css("border","1px solid red");
      }
    else if ($("#contact-form [name='phone']").val() === '')
      {
      $("#contact-form [name='phone']").css("border","1px solid red");
      }
    else
    {
      $("#loading-img").css("display","block");
      var sendData = $( this ).serialize();
      $.ajax({
        type: "POST",
        url: "js/ajaxsubmit.php",
        data: sendData,
        success: function(data)
        {
          $("#loading-img").css("display","none");
          $(".response_msg").text(data);
          $(".response_msg").slideDown().fadeOut(3000);
          $("#contact-form").find("input[type=text], input[type=email], textarea").val("");
        }
      });
    }
    return false;
  });

  $("#contact-form input").blur(function(){
    var checkValue = $(this).val();
    if(checkValue != '')
      {
      $(this).css("border","1px solid #eeeeee");
      }
  });
});
```
    </script> 

    <script>
```
$(document).ready(function () {
  $("#contact-form_message").on("submit1", function (e) {
    e.preventDefault();
    if ($("#contact-form_message [name='name1']").val() === '') {
      $("#contact-form_message [name='name1']").css("border", "1px solid red");
    } else if ($("#contact-form_message [name='email1']").val() === '') {
      $("#contact-form_message [name='email1']").css("border", "1px solid red");
    } else if ($("#contact-form_message [name='phone1']").val() === '') {
      $("#contact-form_message [name='phone1']").css("border", "1px solid red");
    } else if ($("#contact-form_message [name='message1']").val() === '') {
      $("#contact-form_message [name='message1']").css("border", "1px solid red");
    } else {
      $("#loading-img").css("display", "block");
      var sendData = $(this).serialize();
      $.ajax({
        type: "POST",
        url: "js/contact.php",
        data: sendData,
        success: function (data) {
          $("#loading-img").css("display", "none");
          $(".response_msg").text(data);
          $(".response_msg").slideDown().fadeOut(3000);
          $("#contact-form_message").find("input[type=text], input[type=email], textarea").val("");
        }

      });
    }
    return false;
  });

  $("#contact-form_message input").blur(function () {
    var checkValue = $(this).val();
    if (checkValue != '') {
      $(this).css("border", "1px solid #eeeeee");
    }
  });
});

```
    </script> 

```
$（文档）.ready（函数（）{
$（“#联系表格”）。在（“提交”上，功能（e）{
e、 预防默认值（）；
如果（$（“#联系方式[姓名]”）.val（）
{
$（“#联系人表单[name='name']”）css（“边框”，“1px实心红色”）；
}
else if（$（“#联系方式[姓名=电子邮件]”）.val（）
{
$（“#联系人表单[name='email']”）css（“边框”，“1px实心红色”）；
}
else if（$（“#联系方式[name='phone']”）val（）=''）
{
$（“#联系人表单[name='phone']”）css（“边框”，“1px实心红色”）；
}
其他的
{
$（“#加载img”）.css（“显示”、“块”）；
var sendData=$（this）.serialize（）；
$.ajax({
类型：“POST”，
url:“js/ajaxsubmit.php”，
数据：sendData，
成功：功能（数据）
{
$（“#加载img”）.css（“显示”、“无”）；
$（“.response_msg”）.text（数据）；
$（“.response_msg”）.slideDown（）.fadeOut（3000）；
$（“#联系人表单”）.find（“输入[type=text]，输入[type=email]，textarea”）.val（“”）；
}
});
}
返回false；
});
$（“#联系人表单输入”）.blur（函数（）{
var checkValue=$（this.val（）；
如果（检查值！=''）
{
$（this.css（“border”，“1px solid#eeeeee”）；
}
});
});
```
```
$（文档）.ready（函数（）{
$（“#联系方式#信息”）。关于（“提交1”，功能（e）{
e、 预防默认值（）；
if（$（“#联系方式#u消息[name='name1']”）。val（）=''）{
$（“#contact-form_message[name='name1']”）css（“border”，“1px实心红色”）；
}else if（$（“#联系方式"消息[name='email1']”）val（）=''）{
$（“#contact-form_message[name='email1']”）css（“border”，“1px实心红色”）；
}else if（$（“#contact-form_message[name='phone1']”）val（）=''）{
$（“#contact-form_message[name='phone1']”）css（“border”，“1px实心红色”）；
}else if（$（“#contact-form_message[name='message1']”）val（）=''）{
$（“#contact-form_message[name='message1']”）css（“边框”，“1px实心红色”）；
}否则{
$（“#加载img”）.css（“显示”、“块”）；
var sendData=$（this）.serialize（）；
$.ajax({
类型：“POST”，
url:“js/contact.php”，
数据：sendData，
成功：功能（数据）{
$（“#加载img”）.css（“显示”、“无”）；
$（“.response_msg”）.text（数据）；
$（“.response_msg”）.slideDown（）.fadeOut（3000）；
$（“#contact-form_message”）.find（“输入[type=text]，输入[type=email]，textarea”）.val（“”）；
}
});
}
返回false；
});
$（“#联系人表单_消息输入”）.blur（函数（）{
var checkValue=$（this.val（）；
如果（检查值！=''）{
$（this.css（“border”，“1px solid#eeeeee”）；
}
});
});
```

当按下提交按钮时，我需要调用desire函数。当我只使用第一个表单而不使用上面的双功能时，JS工作正常，但当我为另一个表单添加一个

时，它只会刷新页面而不提交表单。请帮我一下。我不擅长JS。

首先

<div class="contact-form col-md-6 ">
  <form id="contact-form" method="post" action="" role="form">
    <div class="form-group">
      <input type="text" placeholder="Your Name" class="form-control" name="name" required>
    </div>
    <div class="form-group">
      <input type="email" placeholder="Your Email" class="form-control" name="email"  required>
    </div>
    <div class="form-group">
      <input type="text" placeholder="Your Phone Number" class="form-control" name="phone" required>
    </div>
    <div class="response_msg"></div>
    <div class="mail-success success">
      Thank you. Welcome in Family. :)
    </div>
    <div class="mail-fail error">
      Sorry, don't know what happened. Try later :(
    </div>
    <div id="cf-submit">
      <input type="submit" class="btn btn-transparent" value="Register" >
    </div>
  </form>
</div>

<div class="contact-form col-md-6 ">
    <form id="contact-form_message" method="post" action="" role="form">
      <div class="form-group">
        <input type="text" placeholder="Your Name" class="form-control" name="name" required>
      </div>
      <div class="form-group">
        <input type="email" placeholder="Your Email" class="form-control" name="email" required>
      </div>
      <div class="form-group">
        <input type="text" placeholder="Your Phone Number" class="form-control" name="phone" required>
      </div>
      <div class="response_msg">
      </div>
      <div id="mail-success" class="success">
        Thank you. Welcome in Family. :)
      </div>
      <div id="mail-fail" class="error">
        Sorry, don't know what happened. Try later :(
      </div>
      <div id="cf-submit">
        <input type="submit" class="btn btn-transparent" value="Register" >
      </div>
    </form>
  </div>

---

可能的重复是毫无意义的。为什么要添加JavaScript（它控制表单的提交）基于已提交的相同表单…整个过程都是反向的。PHP首先在创建页面时在服务器上运行。JavaScript在页面准备好后在浏览器上运行。因此，当您首次创建itP.s时，这些PHP

if

语句将阻止JavaScript添加到页面中。您意识到了吗您不需要所有手动验证代码来检查字段是否为空？只需将

required

属性添加到输入元素中，浏览器就会完成其余的操作。有关更多信息，请搜索“HTML5验证”info@ADyson请检查更新的问题，所以，

id="

邮件成功

，

邮件失败

，

cf submit

，

联系人提交

不是唯一的。你能告诉我为什么两个表单使用相同的名称，而提交按钮没有名称值。我们之间的区别是什么吗谢谢。它可以工作，但你能告诉我如何删除整个表单并在该区域显示成功消息。@Ritu1 uujQuery序列化功能使用名称，而不是ID。2 uuuid必须是唯一的：即使同一页面上有两个表单，同一ID也只能存在一次。即使它们位于两个不同的表单中。这就是您在代码中所做的，也是每个人在这里告诉您的。3 uuuu名称属于表单，在JS“pure”上您可以使用FormElement.name直接访问输入，这使代码更简单。@Ritu删除表单或表单元素必须使用css/JS处理。您没有给出任何关于此主题的指示，我想您使用的是css框架，但我不知道是哪一个，哪一个版本，这必然会影响要使用的代码类型计算机科学不是占卜术。

$(document).ready(function () {

  $("form input").blur(function () {
    var checkValue = $(this).val();
    if (checkValue != '') {
      $(this).css("border", "1px solid #eeeeee");
    }
  });

  function checkSubmitInputs(form)
  {
    $("input[type=text], input[type=email], textarea", form).css("border", "");

    var ret = false;
    if (     $("input[name='name']", form).val() === '')
      {      $("input[name='name']", form).css("border", "1px solid red");       }
    else if ($("input[name='email']", form).val() === '')
      {      $("input[name='email']", form).css("border", "1px solid red");      }
    else if ($("input[name='phone']", form).val() === '') 
      {      $("input[name='phone']", form).css("border", "1px solid red");      }
    else if ($("textarea[name='message']", form).val() === '')
      {      $("textarea[name='message']", form).css("border", "1px solid red"); }
    else
      { ret = true; }

    return ret
  }

  $("#contact-form").on("submit",function(e)
  {
    var sendData = $(this).serialize();
    e.preventDefault();

    if ( checkSubmitInputs(this)  )
    {
      $.ajax({
        type: "POST",
        url: "js/ajaxsubmit.php",
        data: sendData,
        success: function(data)
        {
          $("#loading-img").css("display","none");
          $(".response_msg").text(data);
          $(".response_msg").slideDown().fadeOut(3000);
          $("#contact-form").find("input[type=text], input[type=email], textarea").val("");
        }
      });
    }
  })

  $("#contact-form_message").on("submit",function(e)
  {
    var sendData = $(this).serialize();
    e.preventDefault();

    if ( checkSubmitInputs(this)  )
    {
      $.ajax({
        type: "POST",
        url: "js/contact.php",
        data: sendData,
        success: function (data) {
          $("#loading-img").css("display", "none");
          $(".response_msg").text(data);
          $(".response_msg").slideDown().fadeOut(3000);
          $("#contact-form_message").find("input[type=text], input[type=email], textarea").val("");
        }
      });
    }
  })

});