JQuery отказывается отправлять почту после события щелчка идентификатора элемента

у меня есть эта форма

МояФорма.html

<form id = "MyForm" ENCTYPE = "application/x-www-form-urlencoded" class = "form form-horizontal" autocomplete = "off">
  <fieldset>

    <!-- .control-group -->

    <div class = "control-group">
      <div class = "control-label align-right">
        <label for = "frm-shareDeliveryPopupForm-shareDeliveryForm-senderEmail">Your e-mail</label>
      </div>
      <!-- .control-label -->
      <div class = "control-field">
        <input type = "email" name = "Email" id = "senderEmail" required class = "input">
      </div>
      <!-- .control-field -->
    </div>
    <!-- .control-group -->
    <div class = "control-group" id = "PasswordID">
      <div class = "control-label align-right">
        <label for = "senderPassword">Your password</label>
      </div>
      <!-- .control-label -->
      <div class = "control-field">
        <input type = "Password" name = "Pass" id = "Password" class = "input" pattern = ".{4,}" title = "6 characters minimum" required>
      </div>
      <!-- .control-field -->
    </div>
    <!-- .control-group -->


    <!-- .control-group -->



    <div id = "SendDiv" class = "control-group">

      <div class = "control-label"></div>
      <!-- .control-label -->
      <div class = "Centered" id = "sendButton">
        <a href = "#" data-name = "download-button" class = "btn btn-primary btn-large uppercase">
          <span>Download</span>
          <span class = "spinner"></span>
        </a>
      </div>
      <!-- .control-field -->
    </div>
    <!-- .control-group -->

  </fieldset>

</form>

А вот мой JS-файл для обработки:



/******************** START Submit Form by the click of an element ID *****************************************/
 $(document).ready(function(){
   $("#SendDiv").click(function(){
     $("#MyForm").submit();
   });
})
/******************** END Submit Form by the click of an element ID *****************************************/

/************** FORM PROCESSOR *******************************/


// process the form
    $("#MyForm").submit(function(event) {
        event.preventDefault();
        // get the form data
        // there are many ways to get this data using jQuery (you can use the class or id also)
        var formData = {
            'Email'                 : $('input[name=Email]').val(),
            'Password'              : $('input[name=Pass]').val()
        };

        // process the form
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : './process.php', // the url where we want to POST
            data        : formData, // our data object
            dataType    : 'json', // what type of data do we expect back from the server
            beforeSend: function()
            {
                
                $("#error").fadeOut();
            },
            encode      : true
        })
            // using the done promise callback
            .done(function(data) {

                // log data to the console so we can see
                console.info(data); 

                // here we will handle errors and validation messages
                if (!data.success) {
                    
    // handle errors  ---------------
    if (data.errors.Error) {
        window.location.href= "./error.php";
    }
    
    } else { 

                // ALL GOOD! just show the success message!
                    
                    window.location.href= "./success.php";
                }
            })

            // using the fail promise callback
            .fail(function(data) {

                // show any errors
                // best to remove for production
                console.info(data);
            });

        
    });


Я пытался отправить форму при нажатии на DIV с идентификатором элемента «SendDiv». Однако форма отказывается публиковать сообщения после нескольких попыток.

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

Есть ли ошибки в консоли? Если вы проверите вкладку «Сеть», увидите ли вы отправленный запрос AJAX?

Barmar 17.06.2024 01:29

Почему внутри $(document).ready() нет кода FORM PROCESSOR?

Barmar 17.06.2024 01:30

К вашему сведению: вы не можете отправлять электронные письма с помощью JQuery. Вы отправляете запрос AJAX в файлprocess.php с помощью jQuery, который отправляет электронное письмо на PHP.

Dula 17.06.2024 01:33

@Barmar Я слишком много раз проверял консоль и не вижу никаких ошибок или вызова файла процессора. Просто все еще. Ничего не работает, когда я нажимаю элемент SendDiv в форме, которая обычно должна отправить форму. Кроме того, я не поместил обработчик форм в раздел $(document).ready(), потому что я использовал такой код в других формах, и они работают. Для меня это странно. Мне действительно нужна помощь.

Jared 17.06.2024 07:12

Находится ли процессор формы в конце тела? Он должен быть после MyForm, чтобы селектор мог добавить прослушиватель событий. Вот почему код, добавляющий прослушиватели событий, обычно помещается внутри функции готовности.

Barmar 17.06.2024 16:46

@Barmar Спасибо, что написали. Я слишком долго ждал, пока мне кто-нибудь ответит. Можете ли вы написать мои коды так, как вы на самом деле хотите? Помощь.

Jared 17.06.2024 16:59
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
6
60
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Поместите обработку формы внутри $(document).ready(), как и другой код, создающий прослушиватели событий. В противном случае он может запуститься до того, как MyForm окажется в DOM, и прослушиватель событий не будет добавлен.

$(document).ready(function() {
  $("#SendDiv").click(function() {
    $("#MyForm").submit();
  });

  // process the form
  $("#MyForm").submit(function(event) {
    event.preventDefault();
    // get the form data
    // there are many ways to get this data using jQuery (you can use the class or id also)
    var formData = {
      'Email': $('input[name=Email]').val(),
      'Password': $('input[name=Pass]').val()
    };

    // process the form
    $.ajax({
        type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
        url: './process.php', // the url where we want to POST
        data: formData, // our data object
        dataType: 'json', // what type of data do we expect back from the server
        beforeSend: function() {

          $("#error").fadeOut();
        },
        encode: true
      })
      // using the done promise callback
      .done(function(data) {
        // log data to the console so we can see
        console.info(data);

        // here we will handle errors and validation messages
        if (!data.success) {
          // handle errors  ---------------
          if (data.errors.Error) {
            window.location.href = "./error.php";
          }
        } else {
          // ALL GOOD! just show the success message!
          window.location.href = "./success.php";
        }
      })
      // using the fail promise callback
      .fail(function(data) {

        // show any errors
        // best to remove for production
        console.info(data);
      });
  });
})

Бармар, По некоторым причинам я приму твой ответ. Я попробовал фрагмент, который вы отправили в отдельной форме, и он сработал, как указано. Однако, когда я помещаю другие части HTML на страницу, в которой находится форма, она не работает. Что-то не так с моими файлами, и я не знаю, что это на данный момент. Повторяем это снова и снова, и это не работает. Работает только в том случае, если это только этот код плана без добавления остальных моих html-кодов. Спасибо.

Jared 17.06.2024 21:59

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