БЛОГ НА HUSL


Как передать массив значений из select multiple

Автор вопроса: realHikkan

Мне нужно из select с multiple передать в массив несколько значений, которые нужно выбрать из списка и отправить это всё на почту.

Сейчас это работает так:

<form>
    <!-- Скрытие поля отправки -->
    <input type="hidden" name="project_name" value="Student Stage">
    <input type="hidden" name="admin_email" value="[email protected]">
    <input type="hidden" name="form_subject" value="Заявка с формы поступления">
    <!-- -->



    <select name="Экзамены[]" multiple>
      <option value="Русский язык">Русский язык</option>
      <option value="Математика">Математика</option>
      <option value="Физика">Физика</option>
      <option value="Химия">Химия</option>
      <option value="Биология">Биология</option>
      <option value="География">География</option>
      <option value="Литература">Литература</option>
      <option value="История">История</option>
      <option value="Обществознание">Обществознание</option>
      <option value="Информатика и ИКТ">Информатика и ИКТ</option>
      <option value="Иностранный язык">Иностранный язык</option>
    </select>

    <button>Отправить</button>
</form>

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="script.js"></script>

Это всё проходит валидацию:

$(document).ready(function() {

    //E-mail Ajax Send
    $("form").submit(function() {
        var th = $(this);
        $.ajax({
            type: "POST",
            url: "mail.php",
            data: th.serialize()
        }).done(function() {
            alert("Ваша заявка была отправлена!\nОжидайте ответа в ближайшее время.");
            setTimeout(function() {
                // Done Functions
                th.trigger("reset");
            }, 1000);
        });
        return false;
    });

});

И отправляется через скрипт на почту:

<?php

$method = $_SERVER['REQUEST_METHOD'];

//Script Foreach
$c = true;
if ( $method === 'POST' ) {

    $project_name = trim($_POST["project_name"]);
    $admin_email  = trim($_POST["admin_email"]);
    $form_subject = trim($_POST["form_subject"]);

    foreach ( $_POST as $key => $value ) {
        if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
            $message .= "
            " . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
                <td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
                <td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
            </tr>
            ";
        }
    }
} else if ( $method === 'GET' ) {

    $project_name = trim($_GET["project_name"]);
    $admin_email  = trim($_GET["admin_email"]);
    $form_subject = trim($_GET["form_subject"]);

    foreach ( $_GET as $key => $value ) {
        if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
            $message .= "
            " . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
                <td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
                <td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
            </tr>
            ";
        }
    }
}

$message = "<table style='width: 100%;'>$message</table>";

function adopt($text) {
    return '=?UTF-8?B?'.Base64_encode($text).'?=';
}

$headers = "MIME-Version: 1.0" . PHP_EOL .
"Content-Type: text/html; charset=utf-8" . PHP_EOL .
'From: '.adopt($project_name).' <'.$admin_email.'>' . PHP_EOL .
'Reply-To: '.$admin_email.'' . PHP_EOL;

mail($admin_email, adopt($form_subject), $message, $headers );

Значения из select передаются не все, а только последнее выбранное. Я думал передать значения через массив, добавив к name вот это[] и написав такой код:

<?php
  foreach ($_GET['Экзамены'] as $selectedOption)          
?>

Но я так и не понял, как этот массив передать в mail.php

Подскажите, как это можно сделать?

P.S Кроме поля select, в форме ещё отправляется несколько инпутов, которые сюда я не вставил


Источник

Ответы (2 шт):

Автор решения: Daniil Loban

Вот пример как создать нужный объект, имя поля канечно дело вкуса Экзамены[], но думаю можно было и без скобок, и не кирилицей.

$(document).ready(function() {
    
    //E-mail Ajax Send
    $("form").submit(function(e) {
        e.preventDefault()
        //получаем данные формы
        var formData = new FormData(this)
        //получаем все выделенные элементы списка
        var exams = $('[name="Экзамены[]"]').val();
        //объединяем полученное в один объект
        var object = {
            ...Object.fromEntries(formData), "Экзамены[]":exams
        };
        //конвертируем в json
        var json = JSON.stringify(object);
        console.log(json)
    });
});
<form>
    <!-- Скрытие поля отправки -->
    <input type="hidden" name="project_name" value="Student Stage">
    <input type="hidden" name="admin_email" value="[email protected]">
    <input type="hidden" name="form_subject" value="Заявка с формы поступления">
    <!-- -->
    <select name="Экзамены[]" multiple>
      <option value="Русский язык">Русский язык</option>
      <option value="Математика">Математика</option>
      <option value="Физика">Физика</option>
      <option value="Химия">Химия</option>
      <option value="Биология">Биология</option>
      <option value="География">География</option>
      <option value="Литература">Литература</option>
      <option value="История">История</option>
      <option value="Обществознание">Обществознание</option>
      <option value="Информатика и ИКТ">Информатика и ИКТ</option>
      <option value="Иностранный язык">Иностранный язык</option>
    </select>

    <button>Отправить</button>
</form>

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="script.js"></script>

script.js:

  $(document).ready(function() {
      //E-mail Ajax Send
      $("form").submit(function() {

        //получаем данные формы
        var formData = new FormData(this)
        //получаем все выделенные элементы списка
        var exams = $('[name="Экзамены[]"]').val();
        //объединяем полученное в один объект
        var object = {
            ...Object.fromEntries(formData), "Экзамены[]":exams
        };
        //конвертируем в json
        var json = JSON.stringify(object);

          $.ajax({
              type: "POST",
              url: "mail.php",
              contentType: 'application/json',
              data: json
          }).done(function(e) {
              console.log(e);
              alert("Ваша заявка была отправлена!\nОжидайте ответа в ближайшее время.");
              setTimeout(function() {
                  // Done Functions
                  th.trigger("reset");
              }, 1000);
          });
          return false;
      });

  });

php:

<?php

$rest_json = file_get_contents("php://input");
$_POST = json_decode($rest_json, true);

$method = $_SERVER['REQUEST_METHOD'];

//Script Foreach
$c = true;
if ( $method === 'POST' ) {

    $project_name = trim($_POST["project_name"]);
    $admin_email  = trim($_POST["admin_email"]);
    $form_subject = trim($_POST["form_subject"]);

    function get_exams($item){
      return "<td style='padding: 10px; border: #e9e9e9 1px solid;'>$item</td>\n                ";
    }
    $exams = array_map( get_exams , $_POST["Экзамены[]"] );
    $exams_html = "";
    foreach ( $exams as $line ) {
      $exams_html .= "$line";
    }  

    foreach ( $_POST as $key => $value ) {
        if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
            $message .= "
            " . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
                <td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
                <!--<td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>-->
                $exams_html
            </tr>
            ";
        }
    }
} 

$message = "<table style='width: 100%;'>$message</table>";


function adopt($text) {
    return '=?UTF-8?B?'.Base64_encode($text).'?=';
}

$headers = "MIME-Version: 1.0" . PHP_EOL .
"Content-Type: text/html; charset=utf-8" . PHP_EOL .
'From: '.adopt($project_name).' <'.$admin_email.'>' . PHP_EOL .
'Reply-To: '.$admin_email.'' . PHP_EOL;

mail($admin_email, adopt($form_subject), $message, $headers );
→ Ссылка
Автор решения: Iulian 

$(document).ready(function() {
  //E-mail Ajax Send
  $("form").submit(function() {
      var th = $(this);
      $.ajax({
          type: "POST",
          url: "mail.php",
          data: th.serialize()
      }).done(function() {
          alert("Ваша заявка была отправлена!\nОжидайте ответа в ближайшее время.");
          setTimeout(function() {
              // Done Functions
              th.trigger("reset");
          }, 1000);
      });
      return false;
  });

  $("form .select .show").click(function() {
    $("form .select .hide, form .select ul").show();
    $("form .select .show").hide();
    $("form .select").css("border-radius", "30px 30px 0 0");
    return false;
  });
  $("form .select .hide").click(function() {
    $("form .select .hide, form .select ul").hide();
    $("form .select .show").show().html("Готово");
    $("form .select").css("border-radius", "30px");
    return false;
  });
});
form input[type="text"],
form input[type="email"],
form input[type="number"],
form .select {
  width: 50%;
  background: #F3F3F3;
  border-radius: 30px;
  box-sizing: border-box;
  border: 1px solid #DDDDDD;
  height: 50px;
  margin-bottom: 15px;
}

form .select::placeholder {
  font: 18px Roboto-Regular;
  color: #4c5461;
}

form .select:::focus,
form .select:::active {
  border: 1px solid #FF9900;
  outline: none;
}

.select {
  position: relative;
  z-index: 9;
  padding: 0;
}

.select a {
  color: #000;
  text-decoration: none;
  display: block;
  padding: 13px 20px;
}

.select ul {
  display: none;
  background: #F3F3F3;
  height: 150px;
  width: 100%;
  padding: 0;
  position: absolute;
  left: -1px;
  overflow: auto;
  border: 1px solid #DDDDDD;
  border-radius: 0 0 30px 30px;
}

.select ul li {
  display: flex;
  align-items: center;
  padding: 13px 20px;
  border-bottom: 1px solid #DDDDDD;
}

.select ul li label {
  margin-left: 15px;
}

.select ul li label:hover {
  cursor: pointer;
}

.select ul li:last-child {
  border: none;
}
<form>
  <!-- Скрытие поля отправки -->
  <input type="hidden" name="project_name" value="Student Stage">
  <input type="hidden" name="admin_email" value="[email protected]">
  <input type="hidden" name="form_subject" value="Заявка с формы поступления">
  <!-- -->

  <div class="select">
    <a href="" class="show">Выберите язык</a>
    <a href="" class="hide" style="display: none;">Готово</a>
    <ul>
      <li><input type="checkbox" name="exams[]" value="Русский язык" id="Русский язык"><label for="Русский язык">Русский язык</label></li>
      <li><input type="checkbox" name="exams[]" value="Математика" id="Математика"><label for="Математика">Математика</label></li>
      <li><input type="checkbox" name="exams[]" value="Физика" id="Физика"><label for="Физика">Физика</label></li>
    </ul>
  </div>

  <button>Отправить</button>
</form>

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="script.js"></script>

<?php

$method = $_SERVER['REQUEST_METHOD'];

foreach($_POST as $key => $value) {
        if(is_array($value)){
        foreach($value as $v) {
           @$value_arr .= $v.",";
        }
        $_POST[$key] = substr($value_arr, 0, -1);
     }
  }

//Script Foreach
$c = true;
if ( $method === 'POST' ) {

    $project_name = trim($_POST["project_name"]);
    $admin_email  = trim($_POST["admin_email"]);
    $form_subject = trim($_POST["form_subject"]);

    foreach ( $_POST as $key => $value ) {
        if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
            $message .= "
            " . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
                <td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
                <td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
            </tr>
            ";
        }
    }
} else if ( $method === 'GET' ) {

    $project_name = trim($_GET["project_name"]);
    $admin_email  = trim($_GET["admin_email"]);
    $form_subject = trim($_GET["form_subject"]);

    foreach ( $_GET as $key => $value ) {
        if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
            $message .= "
            " . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
                <td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
                <td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
            </tr>
            ";
        }
    }
}

$message = "<table style='width: 100%;'>$message</table>";

function adopt($text) {
    return '=?UTF-8?B?'.Base64_encode($text).'?=';
}

$headers = "MIME-Version: 1.0" . PHP_EOL .
"Content-Type: text/html; charset=utf-8" . PHP_EOL .
'From: '.adopt($project_name).' <'.$admin_email.'>' . PHP_EOL .
'Reply-To: '.$admin_email.'' . PHP_EOL;

mail($admin_email, adopt($form_subject), $message, $headers );
→ Ссылка

licensed under cc by-sa 3.0 with attribution.