Sending submit form values from modal to another modal php

user_14653377 0
Viewed 365

I am working in a php project and I have two modal. The first modal contains a form, after form submission the modal must send form values using $_POST to another modal (that will appear after submission). All these steps worked except that the $_POST array appears empty in the second modal. I wonder if there is something missing I must include or should I use something else I jQuery.

Here's my code

<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>
bootstrap-modal post forms php javascript
1 Answers

There is no need to send the data in the first form. You could extract the value from the first form and set it in the second when you submit the first form.

Though since both modals are on the same page you'd need to modify the id of the second cpr field. Otherwise you'd have overlapping ids and that would make them useless.

In the example below i've named the cpr field in the second modal cpr2. Feel free to name it otherwise.

$(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;
  });
});
user_116196470
Related