jQuery表单提交不起作用？

时间：2018-07-23 03:17:26

标签： jquery

这是我的JavaScript，也是我的第一篇文章，非常抱歉。 $("form,.login").on("submit", onchanges)是我遇到的大问题。我之前已经做过，所以我知道这应该起作用。非常困惑。

var senddata = {
  "Sender": "Grant",
  "To": "Node-Server",
  "Password": "NodeSender12",
  "data": []
}

$(document).ready(function() {


  $(".pass").attr({
    "type": "password"
  });

  $(".flexer").on("click", function() {
    $(".images").css({
      "filter": "blur(8px)"
    });
  })

  $(".images").on("click", function() {
    $(".images").css({
      "filter": "blur(0px)"
    });
    $(".user").attr({
      "placeholder": "Please Enter Username"
    });
    $(".pass").attr({
      "placeholder": "Please Enter Password"
    });
  })


  $("form,.login").on("submit", onchanges)




  function onchanges(e) {

    // data for the events and dates

    for (var i = 0; i <= 1; i++) {
      var hashes = md5(tArray[i]);
      senddata.data.push(hashes)
      // "2063c1608d6e0baf80249c42e2be5804"
      console.log(hashes + " ____iiii_______ " + senddata.data[i])
    }

    //return false;
    
e.preventDefault()

JSON.stringify(senddata)

    grabAndPut()
  }


  var x = 0;

  function grabAndPut() {
    $.ajax({
      method: 'POST',
      url: '/people',
      data: senddata,
      success: function() {
        console.log("has sent the data to localhost:8080/serverBox" + datajson)
      },
      contentType: 'application/x-www-form-urlencoded'
    })
  }
})
* {
  margin: 0px;
  padding: 0px;
  color: white;
  font-style: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 24px;
}

div {
  margin: 0px;
}

body {
  height: 100%;
  width: 100%;
}

.imageOne {
  width: 100%;
  position: relative;
  height: 100vh;
  background-image: url('main.jpg');
  background-size: cover;
}

.center {
  position: fixed;
  top: 50%;
  display: flex;
  justify-content: center;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: 500px;
  margin: 0px;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 1;
  border: red 8px solid;
  border-radius: 20px;
  box-sizing: border-box;
}

.flexer {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 500px;
  text-align: center;
  /*
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    */
}

.imageBack {
  width: 100px;
  top: -50px;
  height: 100px;
  position: absolute;
  border: red 2px solid;
  border-radius: 50%;
}

.createAccount,
.forgotPass {
  box-sizing: border-box;
  text-decoration: none !important;
  color: white !important;
  position: relative;
  font-size: 15px;
  display: block;
  margin-bottom: 20px;
  top: 20px;
  right: 20%;
  top: 40px;
  overflow: hidden;
}

 ::placeholder {
  color: grey;
}

input {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 300px;
  height: 40px;
  margin: 0px !important;
  background-color: white;
  color: grey;
  border: 3px transparent solid;
  border-radius: 75px;
  /*padding-left: 14px;*/
}

.loginBox {}

.inputs {
  display: block;
  position: relative;
}

.login {
  display: block;
  color: white;
  background-color: #20B2AA;
  position: relative;
  margin: 0px;
  width: 300px;
  top: 20px;
  height: 50px;
  border: 4px transparent solid;
  border-radius: 100px;
}

.account {
  font-style: bold;
  color: black;
  text-decoration: underline;
  margin: 0px;
}

.audio {}

.passUn,
.userUn {
  text-decoration: underline;
  font-size: 18px;
  color: white;
  text-decoration-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>

<head>
  <!-- add fonts -->
  <link rel="stylesheet" href="css.css">
  <!--  <link rel="stylesheet" href="bootstrap.css">-->
  <script src="jquery.min.js"></script>
  <script src="md5.min.js"></script>

</head>


<body>

  <div class="images" style=" position: absolute; z-index: -1; width: 100%; height: 100vh;">
    <div class="imageOne"></div>
  </div>



  <div class="center">


    <img src="login.jpg" class="imageBack">


    <div class="flexer">


      <div class="content">
        <p class="error" style="font-size: 16px; color: blue;"><span class="userUn">Username</span> or <span class="passUn">Password</span> is incorrect</p>


        <div class="inputs">
          <form class="formUser">
            Username<input class="user" placeholder="Enter Username" value=""></input>
            Password<input class="pass" placeholder="Enter Password" value=""></input>
          </form>
        <button class="login">Login</button>

        </div>


        <div class="loginBox">

          <a class="forgotPass" href="forgot.html">Forgot Password&#33;</a>
          <a class="createAccount" href="createAccount.html">CREATE AN ACCOUNT&#33;</a>
        </div>
      </div>


    </div>

  </div>

  <script src="main.js">
  </script>

  <noscript>Sorry, your browser does not support JavaScript!</noscript>

</body>

我一直在尝试所有事情以使我的东西能够发布数据，除了jquery .on(submit, functionName)根本不会调用该函数之外，其他所有东西都可以正常工作。谢谢您的支持

2 个答案:

答案 0 :(得分：1)

问题出在HTML。登录按钮必须是表单元素的子元素。

<form class="form">
            Username<input class="user" placeholder="Enter Username" value=""></input>
            Password<input class="pass" placeholder="Enter Password" value=""></input>
            <button class="login" type="submit">Login</button>
</form>

虽然没有检查提交后会发生什么。

答案 1 :(得分：1)

这是因为您的提交按钮不在表单中。将其包含在表单中，它将起作用。

var senddata = {
  "Sender": "Grant",
  "To": "Node-Server",
  "Password": "NodeSender12",
  "data": []
}

$(document).ready(function() {


  $(".pass").attr({
    "type": "password"
  });

  $(".flexer").on("click", function() {
    $(".images").css({
      "filter": "blur(8px)"
    });
  })

  $(".images").on("click", function() {
    $(".images").css({
      "filter": "blur(0px)"
    });
    $(".user").attr({
      "placeholder": "Please Enter Username"
    });
    $(".pass").attr({
      "placeholder": "Please Enter Password"
    });
  })


  $("form,.login").on("submit", onchanges)




  function onchanges() {

    // data for the events and dates

    for (var i = 0; i <= 1; i++) {
      var hashes = md5(tArray[i]);
      senddata.data.push(hashes)
      // "2063c1608d6e0baf80249c42e2be5804"
      console.log(hashes + " ____iiii_______ " + senddata.data[i])
    }

    return false;
    JSON.stringify(senddata)

    grabAndPut()
  }


  var x = 0;

  function grabAndPut() {
    $.ajax({
      method: 'POST',
      url: '/people',
      data: senddata,
      success: function() {
        console.log("has sent the data to localhost:8080/serverBox" + datajson)
      },
      contentType: 'application/x-www-form-urlencoded'
    })
  }
})
* {
  margin: 0px;
  padding: 0px;
  color: white;
  font-style: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 24px;
}

div {
  margin: 0px;
}

body {
  height: 100%;
  width: 100%;
}

.imageOne {
  width: 100%;
  position: relative;
  height: 100vh;
  background-image: url('main.jpg');
  background-size: cover;
}

.center {
  position: fixed;
  top: 50%;
  display: flex;
  justify-content: center;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: 500px;
  margin: 0px;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 1;
  border: red 8px solid;
  border-radius: 20px;
  box-sizing: border-box;
}

.flexer {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 500px;
  text-align: center;
  /*
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    */
}

.imageBack {
  width: 100px;
  top: -50px;
  height: 100px;
  position: absolute;
  border: red 2px solid;
  border-radius: 50%;
}

.createAccount,
.forgotPass {
  box-sizing: border-box;
  text-decoration: none !important;
  color: white !important;
  position: relative;
  font-size: 15px;
  display: block;
  margin-bottom: 20px;
  top: 20px;
  right: 20%;
  top: 40px;
  overflow: hidden;
}

 ::placeholder {
  color: grey;
}

input {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 300px;
  height: 40px;
  margin: 0px !important;
  background-color: white;
  color: grey;
  border: 3px transparent solid;
  border-radius: 75px;
  /*padding-left: 14px;*/
}

.loginBox {}

.inputs {
  display: block;
  position: relative;
}

.login {
  display: block;
  color: white;
  background-color: #20B2AA;
  position: relative;
  margin: 0px;
  width: 300px;
  top: 20px;
  height: 50px;
  border: 4px transparent solid;
  border-radius: 100px;
}

.account {
  font-style: bold;
  color: black;
  text-decoration: underline;
  margin: 0px;
}

.audio {}

.passUn,
.userUn {
  text-decoration: underline;
  font-size: 18px;
  color: white;
  text-decoration-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>

<head>
  <!-- add fonts -->
  <link rel="stylesheet" href="css.css">
  <!--  <link rel="stylesheet" href="bootstrap.css">-->
  <script src="jquery.min.js"></script>
  <script src="md5.min.js"></script>

</head>


<body>

  <div class="images" style=" position: absolute; z-index: -1; width: 100%; height: 100vh;">
    <div class="imageOne"></div>
  </div>



  <div class="center">


    <img src="login.jpg" class="imageBack">


    <div class="flexer">


      <div class="content">
        <p class="error" style="font-size: 16px; color: blue;"><span class="userUn">Username</span> or <span class="passUn">Password</span> is incorrect</p>


        <div class="inputs">
          <form class="form">
            Username<input class="user" placeholder="Enter Username" value=""></input>
            Password<input class="pass" placeholder="Enter Password" value=""></input>
           <button class="login">Login</button>
          </form>
        </div>

       

        <div class="loginBox">

          <a class="forgotPass" href="forgot.html">Forgot Password&#33;</a>
          <a class="createAccount" href="createAccount.html">CREATE AN ACCOUNT&#33;</a>
        </div>
      </div>


    </div>

  </div>

  <script src="main.js">
  </script>

  <noscript>Sorry, your browser does not support JavaScript!</noscript>

</body>

相关问题
最新问题