How To Submit Form Data Using Modal?

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.

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

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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formaction="login.php"method="POST"id="form1"><inputclass="form-control"placeholder="Enter username"name="username"id="username"><inputclass="form-control"placeholder="Enter password"name="password"id="password"><inputtype="button"name="btn"value="Submit"id="submitBtn"data-toggle="modal"data-target="#confirm-submit"class="btn btn-default" /><divclass="modal fade"id="confirm-submit"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header">
                Confirm Submit
            </div><divclass="modal-body">
                is your username and password correct?
                <tableclass="table"><tr><th>username</th><tdid="uname"></td></tr><tr><th>password</th><tdid="psw"></td></tr></table></div><divclass="modal-footer"><buttontype="button"class="btn btn-default"data-dismiss="modal">Cancel</button><ahref="#"id="submit"class="btn btn-success success">Submit</a></div></div></div></div></form>

Share