Отправка формы 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.info(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.info("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) вообще не вызывает функцию. Спасибо за поддержку

Пожалуйста, укажите, какая у вас ошибка

— 23.07.2018 05:19

Вы ожидали, что вызовут grabAndPut? В этом случае удалите оператор return false перед или поместите его после, если вы намеревались заблокировать отправку формы по умолчанию (кстати, Event.preventDefault() более понятен. И следующий комментарий правильный, ваш <button> должен быть в <form>.

— 23.07.2018 05:38

Возможно, я что-то упускаю из виду, но на <form> нет кнопок, и в JS нет ничего, что запускало бы отправку. Я не понимаю, как / почему событие submit могло быть вызвано.

— 23.07.2018 05:40

Спасибо, ребята, ошибки нет, вот что меня раздражает. Я закрепил кнопку в форме, ничего не изменилось.

— 23.07.2018 05:48

Также я подумал, что при отправке формы jquery вы можете нажать клавишу ввода, чтобы отправить. Другой мой код позволил мне нажать клавишу ВВОД, чтобы отправить свои формы.

— 23.07.2018 05:50

jquery

23.07.2018 05:17

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Проблема в 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>

Однако не проверял, что происходит после отправки.

Я ценю это, теперь он отправляется, но он просто мигает, не показывая зарегистрированную функцию. Я продолжу расследование, но большое вам спасибо.

— 23.07.2018 05:59

23.07.2018 05:45

Ответ принят как подходящий

Это потому, что ваша кнопка отправки находилась за пределами формы. Включите это в форму, и она будет работать.

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.info(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.info("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>

23.07.2018 05:48

Другие вопросы по теме

Как изменить CSS, если определенное модальное окно открыто

Jquery datatable: как добавить кнопку в последнюю ячейку в каждой строке,

Как использовать предупреждения о запрещенных загрузках в html / php / JQuery и изменить массив $ _SESSION

JQuery - щелкните по координате на изображении и нарисуйте там круг

Получите результат со страницы PHP

Загрузка / предварительный просмотр файла и невозможность изменения размеров изображения

JQuery Live Search дважды на одном веб-сайте

Увеличивайте значение диапазона только один раз

Пользовательская функция проверки jQuery - больше минимального значения

Как искать имя, такое как mysql, из данных json или массива в jQuery

Отправка формы jquery не работает?

Ответы 2

Другие вопросы по теме

Похожие вопросы