Submit a form inside another form

Question

I have a form with a POST method and the action of another page.

Within the form, I have another form that I need to do with another action, but with submit with the action of the main form.

this is my second form:

<script>
    function formSubmit()
    {
    document.getElementById("invoices_form").submit();
    }
    </script>

<form action="resend_multiple_invoices.php" name="invoices_form" method="post">

<input type="button" onclick="formSubmit()" value="Send Invoices" />

</form>

how can i get him to submit the second form, not the main one?

Answer 1

You cannot (universally) submit a sub form separately from its parent form. Nested forms are invalid HTML as specified in the W3C prohibitions .

To solve your problem, I suggest you use two separate forms:

<script>
    function invoicesFormSubmit()
    {
       document.getElementById("invoices_form").submit();
    }

    function otherFormSubmit()
    {
       document.getElementById("other_form").submit();
    }
</script>

<form action="resend_multiple_invoices.php" name="invoices_form" method="post">

    //
    // Input fields go here
    //

    <input type="button" onclick="invoicesFormSubmit()" value="Send Invoices" />
</form>

<form action="other_method.php" name="other_form" method="post">

    //
    // Input fields go here
    //

    <input type="button" onclick="otherFormSubmit()" value="Other Method" />
</form>

Answer 2

JQuery.ajax html " " ajax, . ajax , controller.php . , , JQuery.

<form>
    <input />
    <textarea />
    <select /> <!-- etc. -->
    <section id="verify">
        <input />
        <textarea />
        <select /> <!-- etc -->
        <button type="button">submit</button>
        <!-- eg. sub-submission verifies data in section -->
    </section>
    <select />
    <input />
    <input type="submit" value="submit" />
</form>
<script>
$(document).ready(function() {

   $("#verify button").on ('click', verify);
   $('form').submit (formSend);

   function verify (){
       // get input data within section only (ie. within inner form)
       var postData = $('#verify').filter(':input' ).serializeArray();
       postData.push ({name:"submitId", value:'verify'});
       var request = $.ajax ({
          type: "POST",
          url: "controller.php",
          data: postData,
          error: function (xhr, status, message){
             alert (status);
          }
       });
   }
   function formSend (){
       // get input data within entire form
       var postData = $(this).serializeArray();
       postData.push ({name:"submitId", value:'send'});
       var request = $.ajax ({
          type: "POST",
          url: "controller.php",
          data: postData,
          error: function (xhr, status, message){
             alert (status);
          }
       });
   }
});
</script>