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

JavaScript
1

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.

Plunker. Running this code

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…

PARENT/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>
2

Hi @rudyten, you can’t access the iframe DOM as if it was on the same page, but via its contentDocument property (provided it has the same origin as the parent page):

$(window.frames.myiframe2.contentDocument).find('form').submit()

Or all jQuery:

var iFrameDOM = $('#myiframe2').prop('contentDocument')
$(iFrameDOM).find('form').submit()
5

Thanks for the reply, but I am still getting the same behavior, the form is not getting submitted.
I modified the plnkr code.
http://plnkr.co/edit/cx5MFjVhyEjVMfkz

//var iFrameDOM = $("iframe#myiframe2").contents();
  var iFrameDOM = $("iframe#myiframe2").prop('contentDocument')
                                
//iFrameDOM.contents().find('form').submit();
$(iFrameDOM).find('form').submit();
6

Ah, you have given your submit button a name="submit", which causes form.submit refer to that element rather than to the method of the same name. It appears that jQuery will silently swallow this issue, but with vanilla JS you’ll get a just error message:

var iFrameDOM = document.getElementById('myiframe2').contentDocument
var commentForm = iFrameDOM.getElementById('commentForm')

commentForm.submit() 
// Uncaught TypeError: commentForm.submit is not a function

Also note that calling submit() will not dispatch a submit event, so you won’t get your “Yayy” alert. To fix this, either use requestSubmit() or trigger a click event on the submit button:

var iFrameDOM = document.getElementById('myiframe2').contentDocument

// V1
var commentForm = iFrameDOM.getElementById('commentForm')
commentForm.requestSubmit()

// V2
var submitButton = iFrameDOM.getElementById('mybutton')
submitButton.click()

For details see here:

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.