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

Question

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

Вот мои коды ниже.

<form id="wantedForm" method="POST">
    <div class="wanted-opt">
        <div class="wantoptiontitle">Je veux</div>
        <div class="wanted-options input-field">
            <select id="wanted-1" name="wanted-1">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
            </select>
        </div>
    </div>
    <div class="wanted-opt">
        <div class="wantoptiontitle">comme ça je peux</div>
        <div class="wanted-options input-field">
            <select id="wanted-2" name="wanted-2">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
            </select>
        </div>
    </div>
    <button class="btn-default btn modal-trigger" type="submit">Comment faire ?
    </button>
</form>
<div id="wantedModal" class="modal">
    <div class="modal-content">
        <h4>Modal Header</h4>
        <p>A bunch of text</p>
        <p><?php var_dump($_POST) ?></p>
    </div>
</div>

Le script

$('#wantedForm').on('submit', function(e){
    e.preventDefault();
    $('#wantedModal').modal('open');
});

Когда Я делаю var_dump($_POST) в модальном режиме, он возвращает нулевой результат. Может кто-нибудь сказать, пожалуйста, что мне нужно исправить? Спасибо за вашу помощь.

Пожалуйста, скажите мне, что мне нужно изменить. Спасибо.

РЕДАКТИРОВАТЬ

Я пытался сделать с ajax также с кодом ниже. Это тоже не сработало.

$('#wantedSubmit').click(function(e){
    e.preventDefault();
    var wanted_1 = $('#wanted-1').val();
    var wanted_2 = $('#wanted-2').val();

    $.post(location.href, {wanted_1: wanted_1});
    $.post(location.href, {wanted_2: wanted_2});
    $('#wantedModal').modal('open');
});

Answer 1

Вот решение, которое получает данные вашей формы непосредственно в вашей модальности при отправке:

$('#wantedForm').on('submit', function(e){
    e.preventDefault();
    
    var wanted_1 = $('#wanted-1 option:selected').text();
    var wanted_2 = $('#wanted-2 option:selected').text();
    
    $('#choices')
    .empty()
    .append('<p>wanted 1: '+wanted_1+'</p>')
    .append('<p>wanted 2: '+wanted_2+'</p>');
    
    $('#wantedModal').modal('show');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<form id="wantedForm" method="POST">
  <div class="wanted-opt">
    <div class="wantoptiontitle">Je veux</div>
    <div class="wanted-options input-field">
      <select id="wanted-1" name="wanted-1">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
      </select>
    </div>
  </div>
  <div class="wanted-opt">
    <div class="wantoptiontitle">comme ça je peux</div>
    <div class="wanted-options input-field">
      <select id="wanted-2" name="wanted-2">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
      </select>
    </div>
  </div>
  <button class="btn-default btn modal-trigger" type="submit">Comment faire ?
  </button>
</form>
<div id="wantedModal" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
    <div id="choices"></div>
  </div>
</div>

Answer 2

Вы не публикуете запрос с помощью e.preventDefault();, поэтому $ _POST пусто. Вы должны собрать подчиненные значения в JS, как это.

var x = $('#wanted-1').val();
var y = $('#wanted-2').val();

, а затем вы можете открыть вставить эти значения в модальные элементы, такие как

$("#modal-element1").html(x);