Отправить форму внутри другой формы

Question

У меня есть форма с методом POST и действие другой страницы.

В форме у меня есть другая форма, которую мне нужно сделать, чтобы отправить другое действие, но оно отправляется с действием основной формы.

это моя вторая форма:

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

, как я могу получить его, чтобы представить вторую форму и не является основным?

Answer 1

Вы не можете (универсально) отправить вложенную форму отдельно от ее родительской формы. Вложенные формы недействительны HTML, как указано в W3C prohibitions.

Чтобы решить проблему, я предлагаю вам использовать две отдельные формы следующим образом:

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