Jquery 表单提交不起作用？

标签 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) 根本不会调用该函数。感谢您的支持

最佳答案

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

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>

关于Jquery 表单提交不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51471176/

上一篇：jQuery 选择器 :first in class, 但 id :not 开头

下一篇：jquery - 使用jquery更改具有未知id的图像的src

相关文章：

javascript - 在点击事件/函数期间获取 URL 哈希值

jquery - 灯箱的 CSS 问题

jquery - 将 ListView 中的 jquery 移动复选框与数据图标组合在一起

jquery - 删除所有子元素的 CLASS

javascript - 按钮显示和隐藏内容时出现问题

javascript - 显示模态时未触发 Twitter Bootstrap 模态事件

javascript - 打开一个新选项卡并在其中运行 javascript

javascript - 如果 div 隐藏或可见，则将类应用于元素

javascript - JQuery 根据商品详情计算运费，只有 2 种可能的选择，你会怎么做？

jquery - 用于 fontawesome 的append() 或appendTo()

©2024 IT工具网  联系我们