Получение значений отмеченных флажков из формы с помощью ajax

ProgramBox

Получение значений отмеченных флажков из формы с помощью ajax

Post author:admin
Запись опубликована:9 апреля, 2023
Post category:Вопросы по программированию

#javascript #php #html #forms

#javascript #php #HTML #формы

Вопрос:

Просто пытаюсь самостоятельно научиться создавать форму, и в настоящее время я застрял с флажками.

При отправке моя форма отправляет электронное письмо на определенный адрес (в настоящее время работает).

Однако я не могу получить все значения отмеченных флажков, выбранные пользователем; Я получаю ‘undefined’ по почте. Пожалуйста, смотрите, как показано ниже, мою html / js / php часть кода. Пожалуйста, будьте как можно проще, поскольку я начинающий.

HTML

     <!-- Start Contact -->
    <div id="contact" class="contact-box">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="title-box">
                        <h2>Confirmez-nous votre présence</h2>
                        <p>On a hâte d'y être. Et vous ? </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 col-sm-12 col-xs-12">
                  <div class="contact-block">
                    <form method="POST" action="form-process.php" id="contactForm">
                      <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <input type="text" class="form-control" id="name" name="name" placeholder="Nom amp; Prénom" required data-error="Merci d'entrer votre nom et prénom.">
                                <div class="help-block with-errors"></div>
                            </div>                                 
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <input type="text" placeholder="Adresse mail" id="email" class="form-control" name="email" required data-error="Merci d'entrer votre adresse mail.">
                                <div class="help-block with-errors"></div>
                            </div> 
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <select class="custom-select d-block form-control" id="adulte" name="adulte" required data-error="Merci d'indiquer le nombre d'invités adultes.">
                                  <option disabled selected value>Nombre d'invités adultes*</option>
                                  <option value="1">Juste moi !</option>
                                  <option value="2">2</option>
                                  <option value="3">3</option>
                                  <option value="4">4</option>
                                  <option value="5">5</option>
                                </select>
                                <div class="help-block with-errors"></div>
                            </div> 
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <select class="custom-select d-block form-control" id="enfant" name="enfant" required data-error="Merci d'indiquer le nombre d'invités enfants.">
                                  <option disabled selected value>Nombre d'invités enfants*</option>
                                  <option value="Aucun">Aucun !</option>
                                  <option value="1">1</option>
                                  <option value="2">2</option>
                                  <option value="3">3</option>
                                  <option value="4">4</option>
                                </select>
                                <div class="help-block with-errors"></div>
                            </div> 
                        </div>
                        <div class="col-md-12">
                        <div class="form-group">
                        Je serai présent(e) / Nous serons présent(e)s :*
                         <table class="form-control" style="background-color: #e6eceb; height: 210px" id="event">
                         <tr>
                           <td><label>
                             <input type="checkbox" name="choice[]" value="mairie" id="CheckboxGroup1">
                             Cérémonie civile</label></td>
                           </tr>
                         <tr>
                           <td><label>
                             <input type="checkbox" name="choice[]" value="vin d'honneur" id="CheckboxGroup2">
                             À la santé des mariés !</label></td>
                           </tr>
                         <tr>
                           <td><label>
                             <input type="checkbox" name="choice[]" value="église" id="CheckboxGroup3">
                             Cérémonie religieuse</label></td>
                           </tr>
                         <tr>
                           <td><label>
                             <input type="checkbox" name="choice[]" value="dîner" id="CheckboxGroup4">
                             Dîner</label></td>
                           </tr>
                         <tr>
                           <td><label>
                             <input type="checkbox" name="choice[]" value="brunch" id="CheckboxGroup5">
                             Brunch BBQ</label></td>
                           </tr>
                         <tr>
                           <td><label>
                             <input type="checkbox" name="choice[]" value="aucun" id="CheckboxGroup6">
                             Malheureusement indisponible(s)</label></td>
                           </tr>
                         </table>
                                                </div>
                           </div>
                        <div class="col-md-12">
                            <div class="form-group"> 
                                <textarea class="form-control" id="message" name="msg" placeholder="Une information à nous communiquer ? Le nom des gens accompagnant ? Végan, végétarien ou simplement au régime ?" rows="8" data-error="Une information à nous communiquer ? Le nom des personnes accompagnatrices ? Végan, végétarien ou simplement au régime ? Une musique qui vous ambiance ?" ></textarea>
                                <div class="help-block with-errors"></div>
                            </div>
                            <div class="submit-button text-center">
                                <button class="btn btn-common" id="submit" type="submit">Envoyer la confirmation</button>
                                <div id="msgSubmit" class="h3 text-center hidden"></div> 
                                <div class="clearfix"></div> 
                            </div>
                        </div>
                      </div>            
                    </form>
                  </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Contact -->

Javascript

 $("#contactForm").validator().on("submit", function (event) {
    if (event.isDefaultPrevented()) {
        // handle the invalid form...
        formError();
        submitMSG(false, "Le formulaire est incomplet.");
    } else {
        // everything looks good!
        event.preventDefault();
        submitForm();
    }
});


function submitForm(){
    // Initiate Variables With Form Content
    //var name = $("#name").val();
    //var email = $("#email").val();
    //var msg_subject = $("#msg_subject").val();
    //var message = $("#message").val();
    //var adulte = document.getElementById('adulte').value;
    //var enfant = document.getElementById('enfant').value;
    
    var formData = new FormData(event.target);
    var checkedOnes = formData.getAll("choice[]");
    var name = formData.get("name");
    var email = formData.get("email");
    var message = formData.get("msg");
    var adulte = formData.get("adulte");
    var enfant = formData.get("enfant");
    var data = { name, email, message, adulte, enfant, checkedOnes: checkedOnes.toString() };

    $.ajax({
        type: "POST",
        url: "php/form-process.php",
        //data: "name="   name   "amp;email="   email   "amp;msg_subject="   msg_subject   "amp;message="   message   "amp;adulte="   adulte   "amp;enfant="   enfant   "amp;choice="   strChkOnes,
        data: data,
        success : function(text){
            if (text == "success"){
                formSuccess();
            } else {
                formError();
                submitMSG(false,text);
            }
        }
    });
}

function formSuccess(){
    $("#contactForm")[0].reset();
    submitMSG(true, "Message envoyé !")
}

function formError(){
    $("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
        $(this).removeClass();
    });
}

function submitMSG(valid, msg){
    if(valid){
        var msgClasses = "h3 text-center tada animated text-success";
    } else {
        var msgClasses = "h3 text-center text-danger";
    }
    $("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
}

PHP

 <?php

$errorMSG = "";

// NAME
if (empty($_POST["name"])) {
    $errorMSG = "Nom et prénom requis ";
} else {
    $name = $_POST["name"];
}

// EMAIL
if (empty($_POST["email"])) {
    $errorMSG .= "Email requis ";
} else {
    $email = $_POST["email"];
}

// MSG Guest
if (empty($_POST["adulte"])) {
    $errorMSG .= "Nombre d'invités adultes requis ";
} else {
    $adulte = $_POST["adulte"];
}

if (empty($_POST["enfant"])) {
    $errorMSG .= "Nombre d'invités enfants requis ";
} else {
    $enfant = $_POST["enfant"];
}

// MSG Event
//if (empty($_POST["event"])) {
//    $errorMSG .= "Détails de votre présence requis ";
//} else {
//    $event = $_POST["event"];
//}
$checkedOnes = $_POST["checkedOnes"];

// MESSAGE
//if (empty($_POST["message"])) {
//    $errorMSG .= "Message is required ";
//} else {
//    $message = $_POST["message"];
//}
$message = $_POST["message"];


$EmailTo = "xxx@gmail.com";
$Subject = "Nouvelle confirmation de présence";

// prepare email body text
$Body = "";
$Body .= "Nom : ";
$Body .= $name;
$Body .= "n";
$Body .= "Email : ";
$Body .= $email;
$Body .= "n";
$Body .= "Adulte(s) : ";
$Body .= $adulte;
$Body .= "n";
$Body .= "Enfant(s) : ";
$Body .= $enfant;
$Body .= "n";
$Body .= "Présent(s) à : ";
$Body .= $checkedOnes;
$Body .= "n";
$Body .= "Message : ";
$Body .= $message;
$Body .= "n";

// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);

// redirect to success page
if ($success amp;amp; $errorMSG == ""){
   echo "success";
}else{
    if($errorMSG == ""){
        echo "Un problème est survenu :(";
    } else {
        echo $errorMSG;
    }
}

?>

В настоящее время почта выглядит идеально, за исключением того, что рядом с ‘event :’ я получил undefined … :'(

1. Ваши флажки вызываются, choice так почему вы проверяете event в своем PHP? event это таблица, которая является просто элементом HTML — в форме передаются только входные данные.

2. @FluffyKitten Можете ли вы объяснить проверку на event в вашем PHP ? Уверен, что я понял вашу точку зрения, но не уверен, что мне тогда следует изменить?

3. Я изменил event на checkedvalue в js. Что я должен изменить тогда в PHP?

4. @IncredibleHat Только начал с этого, поскольку я пытаюсь самостоятельно создать свой свадебный сайт. Я посмотрю на сериализацию, если вы так говорите.

5. @IncredibleHat Совсем нет!! Я говорил, что OP этого не делает (они пытаются отправить элемент таблицы), и именно по этой причине я подумал, что ваше предложение о сериализации было слишком сложным для них на данном этапе. Им нужно вернуться к основам, а не вам!!

Ответ №1:

Я думаю, вам следует использовать форму вместо таблицы. Проверьте также formSubmit функцию в этом примере, чтобы узнать, как получить значения из формы. Я протестировал приведенный ниже пример, и он работает. В PHP-коде вы можете получить все опубликованные значения ith $_POST["name"] , $_POST["email"] , $_POST["checkedOnes"] :

 <!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <script
      src="https://code.jquery.com/jquery-3.5.1.min.js"
      integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
      crossorigin="anonymous"
    ></script>
  </head>

  <body>
    <div id="app"></div>
    <div class="form-group">
      Je serai présent(e) / Nous serons présent(e)s :*
      <form onsubmit="formSubmit()">
        <label for="form-name">Name</label>
        <input type="textbox" id="form-name" name="name" /><br />
        <label for="form-email">Email</label>
        <input type="email" id="form-email" name="email" /><br />
        <input
          type="checkbox"
          name="choice[]"
          value="mairie"
          id="CheckboxGroup1"
        />
        <label for="CheckboxGroup1">Cérémonie civile</label><br />
        <input
          type="checkbox"
          name="choice[]"
          value="vin d'honneur"
          id="CheckboxGroup2"
        />
        <label for="CheckboxGroup2">À la santé des mariés !</label><br />
        <input type="submit" />
      </form>
    </div>
    <script>
      function formSubmit() {
        event.preventDefault();
        var formData = new FormData(event.target);
        var checkedOnes = formData.getAll("choice[]");
        var name = formData.get("name");
        var email = formData.get("email");
        console.log(checkedOnes, name, email);
        var data = { name, email, checkedOnes: checkedOnes.toString() };
        $.ajax({
          type: "POST",
          url: "./php/form-process.php",
          data: data
        });
      }
    </script>
  </body>
</html>

Это не помогает при проверке isChecked атрибута: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/checkbox

Обновление Я проверил ваш последний код, и есть как минимум две проблемы:

1 HTML-форма:

 <form method="POST" action="form-process.php" id="contactForm">

Таким образом, когда пользователь нажимает submit , вы отправляете POST сообщение form-process.php напрямую, вместо вызова submitForm() функции, которая, в свою очередь, собирает необходимые данные формы и отправляет их form-process.php .

Поэтому вам следует изменить строку на:

 <form onsubmit="submitForm()" id="contactForm">

Таким образом, данные формы будут отправлены submitForm функции, которая извлечет данные и отправит их в form-process.php .

2 Другая проблема заключается в том, что вы пропускаете event.preventDefault(); начало submitForm функции, без этого страница будет перезагружена и код не будет выполнен. Так что это должно быть:

 function submitForm(){ 
    event.preventDefault();
    var formData = new FormData(event.target);
    var checkedOnes = formData.getAll("choice[]");
    // Then the rest of your code

1. Спасибо, чувак! На данный момент кажется, что checkedOnes — это массив со всеми значениями отмеченных флажков; поскольку я преобразовал его в строку, просто нужно добавить это в AJAX, тогда я думаю

2. @JuliaAlexandre Да, ваш запрос ajax должен быть в порядке. Вы можете просто передать ему флажки.

3. Я выполнил проверку в своих формах, и, похоже, проблема остается. console.log(name,email,msg_subject,message,adulte,enfant,strChkOnes); предоставляет мне правильную информацию в виде строки для всех переменных; однако при отправке формы я не получаю информацию о strChkOnes, хотя это тот же процесс, что и для других переменных…

4. Я обновил ответ. Я надеюсь, что это поможет. Я не тестировал с PHP и не могу видеть весь ваш код, поэтому немного сложно сказать. В любом случае вы должны иметь возможность получать опубликованные значения по их имени в PHP. И еще одна вещь.. Я не уверен, как сейчас работает ваш код, но убедитесь, что все данные, которые вы собираете, находятся в той же форме, что и в примере.

5. @JuliaAlexandre Я внес небольшое изменение в код, фактически отмеченные флажки должны были быть преобразованы в строку. Теперь я протестировал код также с помощью PHP, и он работает. Пожалуйста, отметьте ответ, если вы нашли его полезным и / или решили проблему.