Jump to content
Killersites Forums

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


Recommended Posts

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

Working code in Plunker

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>
    <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) {
                var pagetitle = $(this).attr("title")
                var page = $(this).attr("href")

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

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

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

                                // NOT WORKING
                            "Close": function () {

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


Form Page

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

                alert("yayyy for summitted");

            //    alert("form is submitted.");

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


Edited by rudyten
plunker example link
Link to comment
Share on other sites

  • 1 year later...

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

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

Screenshot 2022-08-23 124230.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...