locked
Modal Popup and Redirect Main Window After RRS feed

  • Question

  • User-1540820643 posted

    Any suggestion on how-to below?

    After submission of a form in WINDOW-A, a pop up (WINDOW-B) comes up to inform user. There is an "OK" button on WINDOW B and when user clicks on it, WINDOW B closes and WINDOW A gets redirected to another website.

    TIA

    Tuesday, May 14, 2019 8:02 PM

Answers

  • User839733648 posted

    Hi TarugoKing,

    According to your description, I've made a simple demo on my side and hope this will be helpful to you.

    The key point is that you could use window.location.href to set the another website's link and make window-A to redirect to.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#submitBtn').click(function () {
                    /* when the button in the form, display the entered values in the modal */
                    $('#lname').text($('#lastname').val());
                    $('#fname').text($('#firstname').val());
                });
                $('#submit').click(function () {
                    /* when the submit button in the modal is clicked, submit the form */
                    //alert('submitting');
                    //$('#formfield').submit();
                    window.location.href = "https://www.google.com/";
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <input type="hidden" name="action" value="add_form" />
            <div class="form-group">
                <label>Last Name</label><span class="label label-danger">*required</span>
                <input class="form-control" placeholder="Enter Last Name" name="lastname" id="lastname" />
            </div>
            <div class="form-group">
                <label>First Name</label><span class="label label-danger">*required</span>
                <input class="form-control" placeholder="Enter First Name" name="firstname" id="firstname" />
            </div>
            <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">
                        Are you sure you want to submit the following details?
                    <!-- We display the details entered by the user here -->
                        <table class="table">
                            <tr>
                                <th>Last Name</th>
                                <td id="lname"></td>
                            </tr>
                            <tr>
                                <th>First Name</th>
                                <td id="fname"></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">OK</a>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>
    

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 15, 2019 3:15 AM

All replies

  • User839733648 posted

    Hi TarugoKing,

    According to your description, I've made a simple demo on my side and hope this will be helpful to you.

    The key point is that you could use window.location.href to set the another website's link and make window-A to redirect to.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#submitBtn').click(function () {
                    /* when the button in the form, display the entered values in the modal */
                    $('#lname').text($('#lastname').val());
                    $('#fname').text($('#firstname').val());
                });
                $('#submit').click(function () {
                    /* when the submit button in the modal is clicked, submit the form */
                    //alert('submitting');
                    //$('#formfield').submit();
                    window.location.href = "https://www.google.com/";
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <input type="hidden" name="action" value="add_form" />
            <div class="form-group">
                <label>Last Name</label><span class="label label-danger">*required</span>
                <input class="form-control" placeholder="Enter Last Name" name="lastname" id="lastname" />
            </div>
            <div class="form-group">
                <label>First Name</label><span class="label label-danger">*required</span>
                <input class="form-control" placeholder="Enter First Name" name="firstname" id="firstname" />
            </div>
            <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">
                        Are you sure you want to submit the following details?
                    <!-- We display the details entered by the user here -->
                        <table class="table">
                            <tr>
                                <th>Last Name</th>
                                <td id="lname"></td>
                            </tr>
                            <tr>
                                <th>First Name</th>
                                <td id="fname"></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">OK</a>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>
    

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 15, 2019 3:15 AM
  • User-1540820643 posted

    Looks exactly what I need so I'd play around with the script. Thank you!  

    Wednesday, May 15, 2019 4:41 PM