提交表单后,简单的JQuery函数将无法执行

时间:2018-09-17 20:39:16

标签: javascript jquery html

提交表单后,将不会执行简单的JQuery函数。我可以看到发送了表单值,但是当到达函数时,没有执行。我已经阅读了几篇文章,并从我的按钮ID中删除了“提交”值,但JQuery仍然可以工作。任何帮助方向将不胜感激。

$(document).ready(function() {

  //When the chat form is submitted
  $("#chatform").submit(function(event) {
    event.preventDefault();
    //Take the values directly form the chat form//
    var name = $("#uname").val();
    var message = $("#message").val();


    if (message != "" && name != "") {
      $.post("clashofcolchatdata.php", {
        message: message,
        name: name
      }, function(data) {
        $("#chat_space").append(data);
      });
    } else {
      alert("Data missing");
    }

  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="chatform" action="">
  <div id="chat_comform">

    <!-- This is the blank space for the chat -->
    <div id="chat_space">
    </div>

    <div id="chat_message">
      <!--Name | Name of the user entering the message  -->
      <input type="text" placeholder=" Name" name="uname" id="uname" style="color:black" required/>
      <br />

      <!--Message | This is the chat message -->
      <input type="text" placeholder=" Enter your chat message" name="message" id="message" style="color:black" required/>

      <!-- This disables the button if anything on the is still invalid -->
      <button type="submit" id="chat_submit" name="formsub" value="post" style="color:black">Submit</button>
    </div>
  </div>

</form>

1 个答案:

答案 0 :(得分:3)

更改<form id="chatform">$('#chatform')。当您执行i++时,您是通过html id查询的,但尚未在表单上设置id。