如何使document.forms [0] .submit（）工作？

Question

After i implemented my dialog box as a alert measure for user to confirm submission instead of a direct submission upon clicking, my document.forms[0].submit() does not work anymore. The page refreshes and the page stays the same. Before that dialog box was created, everything works perfectly. what is the problem here?

After:

  <script>
   //trigger dialog
 $('#submitIter').click(function(){
    $("#dialog-submit").dialog("open");
                return false
});

$("#dialog-submit").dialog({            
    autoOpen: false,
    resizable: false,
    height: 200,
    width: 200,
    modal: true,
    buttons: {
        "Proceed": function(){
            //submit after user clicks proceed cannot seem to work
            document.forms[0].submit();
            $(this).dialog("close");

        }
    }
});
   </script>

    <form action="{{ request.path }}" method="post" enctype="multipart/form-data">

      <input type="image" src="images/submit.png" id="submitIter">

    </form>

Before:

<script> document.forms[0].submit() </script>

Answer 1

I think you add some form before this one, try to write document.forms[1].submit(); Anyway as I can see you using jQuery, so you can write it this way:

<script>
   //trigger dialog
 $('#submitIter').click(function(){
    $("#dialog-submit").dialog("open");
                return false
});

$("#dialog-submit").dialog({            
    autoOpen: false,
    resizable: false,
    height: 200,
    width: 200,
    modal: true,
    buttons: {
        "Proceed": function(){
            //submit after user clicks proceed cannot seem to work
            $('#form_for_submit').submit();
            $(this).dialog("close");

        }
    }
});
   </script>

    <form id="form_for_submit" action="{{ request.path }}" method="post" enctype="multipart/form-data">

      <input type="image" src="images/submit.png" id="submitIter">

    </form>

Answer 2

It may have something to do with scoping or potentially another form being added by the dialog. My first debugging step would be to wrapp document.forms[0] into an alert and see if it returns an object. Secondly I would give the form tag an id to explicity reference it eg id="mainForm" then you can do document.getElementById("mainForm").submit();

Or you could write it as the other answer suggests

$("#mainForm").submit();

Also try calling the dialog close command first.