I have a form contain two inputs, username and password and a modal to confirm the task. After the modal gets open and try to submit, It does nothing:

    <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" /> 
    
    </form>

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

    <script>
    $('#submitBtn').click(function() {
         $('#uname').text($('#username').val());
         $('#psw').text($('#password').val());
    });
    
    $('#submit').click(function(){
        $('#form1').submit();
    });
    </script>

Form data must be sent to the server using POST method. How to achieve this? Any answer is appreciated.

I have a form contain two inputs, username and password and a modal to confirm the task. After the modal gets open and try to submit, It does nothing:

    <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" /> 
    
    </form>

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

    <script>
    $('#submitBtn').click(function() {
         $('#uname').text($('#username').val());
         $('#psw').text($('#password').val());
    });
    
    $('#submit').click(function(){
        $('#form1').submit();
    });
    </script>

Form data must be sent to the server using POST method. How to achieve this? Any answer is appreciated.

• javascript
• jquery
• forms
• post
• modal-dialog

• 1 Your modal is outside your form, so when you submit it, the form doesn't send your modal information through POST – Lixus Commented Jun 13, 2017 at 14:43
• oh man @Lixus thanks,its work now ! lolz – Aqilhex Commented Jun 13, 2017 at 14:46

1 Answer 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.

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

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

<script src="https://ajax.googleapis./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>