How To Submit Form Data Using Modal?

Question

I have a form. Before submitting, it shows modal contain the values. Here is my code:

Solution 1:

Your Modal form is outside the form tag so, it is not part of the HTML form and hence it doesn't Post any Data.The HTML form element defines a form that is used to collect user input and can contain other HTML Elements.

Also, you can use <input type="submit"> or <button type="submit"> to Submit the data directly to the form.

Baca Juga

$('#submitBtn').click(function() {
     $('#uname').text($('#username').val());
     $('#psw').text($('#password').val());
});

$('#submit').click(function(){
    $('#form1').submit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="login.php" method="POST" id="form1">

<input class="form-control" placeholder="Enter username" name="username" id="username">
<input class="form-control" placeholder="Enter password" name="password" id="password">

<input type="button" name="btn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-default" /> 

<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                Confirm Submit
            </div>
            <div class="modal-body">
                is your username and password correct?
                <table class="table">
                    <tr>
                        <th>username</th>
                        <td id="uname"></td>
                    </tr>
                    <tr>
                        <th>password</th>
                        <td id="psw"></td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a href="#" id="submit" class="btn btn-success success">Submit</a>
            </div>
        </div>
    </div>
</div>

</form>

JavaScript Charts

How To Submit Form Data Using Modal?

Solution 1:

Post a Comment for "How To Submit Form Data Using Modal?"