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脚本

$('#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

您没有通过使用e.preventDefault();发布请求，这就是$ _POST为空的原因。您应该像这样在JS中收集提交的值。

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

然后您可以打开将此值插入模态元素中，例如

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

Answer 2

这是一个解决方案，可在提交时直接以您的模式获取表单数据：

$('#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>

如何在不刷新页面的情况下获取表单数据

2 个答案: