将提交表单值从模态发送到另一个模态 php

Question

我在一个 php 项目中工作，我有两个模态。第一个模态包含一个表单，在提交表单后，模态必须使用 $_POST 将表单值发送到另一个模态（将在提交后出现）。除了 $_POST 数组在第二个模式中显示为空之外，所有这些步骤都有效。我想知道是否有遗漏的东西我必须包括或者我应该使用其他东西我 jQuery.

这是我的代码

<button type="button" class="btn btn-red pull-right" data-toggle="modal" data-target="#newvisitor1" data-whatever="@mdo">New Visitor</button>

<!-- First Modal -->

<div class="modal fade" id="newvisitor1" tabindex="-1" role="dialog" aria-labelledby="modelLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modelLabel">New Visitor</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="visitorForm1" action="" method="post" role="form">
                <div class="modal-body">
                    <div class="form-group mb-4">
                        <input type="text" class="form-control" id="cpr" name="cpr" pattern="\d*" title="only numbers allowed" minlength="9" size="9" maxlength="9" placeholder="Visitor CPR" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="cancel1" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" id="checkVisitor" name="checkVisitor" class="btn btn-red pull-right">Check Visitor</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Second Modal -->

<div class="modal fade" id="newvisitor2" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="modelLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="visitorForm2" action="index.php" method="post">
                <div class="modal-header">
                    <h5 class="modal-title" id="modelLabel">New Visitor</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-visitor" role="tabpanel" aria-labelledby="pills-visitor-tab">
                            <div id="visitorForm">
                                <h6>Visitor's Details</h6>
                                <div class="form-group mb-4">
                                    <div class="form-row">
                                        <div class="col-6">
                                            <input type="text" id="firstName" name="firstName" class="form-control" placeholder="First Name" autofocus>
                                        </div>
                                        <div class="col-6">
                                            <input type="text" id="lastName" name="lastName" class="form-control" placeholder="Last Name">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group mb-4 mt-4">
                                    <input type="text" class="form-control" id="cpr" name="cpr" pattern="\d*" title="only number allowed" minlength="9" size="9" maxlength="9" placeholder="CPR" required>
                                </div>
                                <div class="form-group mb-4">
                                    <div class="form-row">
                                        <div class="col-4">
                                            <input type="text" id="house" name="house" class="form-control" placeholder="House">
                                        </div>
                                        <div class="col-4">
                                            <input type="text" id="road" name="road" class="form-control" placeholder="Road">
                                        </div>
                                        <div class="col-4">
                                            <input type="text" id="block" name="block" class="form-control" placeholder="Block">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group mb-4 mt-4">
                                    <input type="text" class="form-control" id="phoneNumber" name="phoneNumber" placeholder="Phone Number" required>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" id="type" name="type" value="visitor">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-red">Register</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        $("#visitorForm1").submit(function() {
            $('#newvisitor1').modal('hide');
            $('#cancel1').click();
            $('#newvisitor2').modal('show');


            return false;
        });
    });
</script>

Answer 1

无需发送第一种形式的数据。当您提交第一个表单时，您可以从第一个表单中提取值并在第二个表单中设置它。

虽然因为两个模式都在同一页面上，您需要修改第二个 cpr 字段的 ID。否则你会有重叠的 ID，这会使它们毫无用处。

在下面的示例中，我将第二个模态中的 cpr 字段命名为 cpr2。请随意命名。

$(document).ready(function () {
  $("#visitorForm1").submit(function(event) {
    event.preventDefault();

    // Get CPR value of first modal.
    const cprValue = $('#cpr').val();

    // Set the CPR value in the second modal.
    $('#cpr2').val(cprValue);

    $('#newvisitor1').modal('hide');
    $('#cancel1').click();
    $('#newvisitor2').modal('show');
    return false;
  });
});

将提交表单值从模态发送到另一个模态 php

Sending submit form values from modal to another modal php

javascript

php

forms

post

bootstrap-modal