jquery Submit form on Dialog Save. Form contained inside an iframe. "Save" button is not triggering the form Submit

rudyten · March 18, 2021

I am playing with a simple example where I have a 2 pages

One page is a simple Form page. That uses jQuery submit() to fire up an alert ("yayyy for summitted") when the form is submitted.

Page two, places this form in an iframe and loads it into a jQuery Dialog that has a SAVE and CLOSE button

I want to be able to trigger the form Submit using the SAVE BUTTON in the Dialog.
Since the form is in a iframe, I have no idea how to successfully fire up that alert ("yayyy for summitted").

Been stuck on this for a couple of days. So some help would be nice, thanks...

Dialog Page

<!DOCTYPE html>
<html>
<head>
    <title>iframe in Dialog</title>
    <link rel="Stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <script  type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js">    </script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js">    </script>

    <script type="text/javascript">

        $(document).ready(function () {

            $('a#pop').on('click', function (e) {
                e.preventDefault();
                var pagetitle = $(this).attr("title")
                var page = $(this).attr("href")

                var iframe = $('<iframe id="myiframe2" style="background:#EEE9E7; border: 0px; " src="' + page + '" width="100%" ' +
                    'height="100%"></iframe>');

                var dialog1 = $('<div></div>').append(iframe).appendTo('body').dialog({
                        autoOpen: false,
                        modal: false,
                        height: 625,
                        width: 500,
                        title: pagetitle,

                        close: function (e, ui) {
                            alert('pressed');
                            $(this).remove();
                        },
                        buttons: {
                            "Save": function () {
                                alert('Dialog SAVE pressed but for has not yet been subbmitted');
                                var commentForm = '#commentForm';
                                var iFrameDOM = $("iframe#myiframe2").contents();

                                // NOT WORKING
                                iFrameDOM.contents().find('form').submit();
                            },
                            "Close": function () {
                                $(this).dialog("close");
                            }
                        }
                    });
                dialog1.dialog('open');
            });
        });

    </script>
</head>
<body>
	<!-- Form Page must reside in same domain -->
    <br /><br /><a id="pop" href="http://localhost/test/formtest" title="Hello World!!!">click me for the Form</a>

</body>
</html>

Form Page

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
    <script>

        $(document).ready(function(){
            $('#commentForm').submit(function(e){
                e.preventDefault();
                alert("yayyy for summitted");
                console.log("submitted");
            });

            //$("form").submit(function(){
            //    alert("form is submitted.");
            //});
        });
    </script>
</head>
<body>

<h2>A very Simple Forrm</h2>
<p>On Submit we use jQuery submit() Method and pop up an alert</p>
<form id="commentForm" name='commentForm' method="get"  action="/">
    Your Name: <input type="text" name="name" value="Santa Clause"><br>
    Your Age: <input type="text" name="age" value="35"><br><br>
    <input type="submit"  name="submit" id="mybutton"  value="Submit">
</form>
</body>
</html>

Edited March 18, 2021 by rudyten
plunker example link

MobioSolutions · August 23, 2022

After viewing your question, I have noticed that some problems need to be rectified. Here are the issues that I have found.

iframe dom is already declared with .content() so it will not work with .content() again.
Variables are already declared with proper variables, then use it.
Submit() method will get overridden when declared again in saving a click, so instead of redeclaring, call submit button on click.

Sign In

jquery Submit form on Dialog Save. Form contained inside an iframe. "Save" button is not triggering the form Submit

Recommended Posts

rudyten

MobioSolutions

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Store

Support