Как отправить 2 формы на одной странице с помощью одной кнопки отправки

Question

Я создал страницу php с двумя формами, но я хотел бы иметь только одну кнопку отправки для обеих форм. формы имеют id с firstform & secondform. Я пробовал другие скрипты, но они действительно не работают.

Вот мой код ниже:

<script language="javascript"> 
submitForms = function(){ 
    document.getElementById("firstform").submit(); 
    document.getElementById("secondform").submit(); 
} 

</script> 

<input type="image" src="images/order-button.png" name="button" value="Submit" onclick="submitForms()"/> 

Answer 1

У вас есть несколько вопросов

1. входной тип = изображение является кнопка отправки, так что вы пытаетесь представить что-то из не существующей формы, вероятно, та же самая страница, на которой вы находитесь на

2. при отправке формы1, она заменяет текущую страницу, если вам удастся также отправить форму2, она ОЧЕНЬ может помешать su bmission из form1

Вот что вы можете TRY (обычный JavaScript):

<script language="javascript"> 
function() submitForms{ 
    document.getElementById("firstform").submit(); 
    document.getElementById("secondform").submit(); 
} 
</script> 

<form id="firstform" target="iframe1"> 
</form><iframe name="iframe1" style="display:none"></iframe> 
<form id="secondform" target="iframe2"> 
</form><iframe name="iframe1" style="display:none"></iframe> 
<button onclick="submitForms()"><img src="images/order-button.png" "/></button> 

В качестве альтернативы AJAX форм, поштучно (предполагается, что Jquery загружается)

DEMO HERE

$(document).ready(function() { 
    $("#subbut").click(function() { 
     $.post($("#firstform").attr("action"), $("#firstform").serialize(), 
      function() { 
      $.post($("#secondform").attr("action"), $("#secondform").serialize(), 
       function() { 
       alert('Both forms submitted'); 
       }); 
      }); 
     }); 
    }); 

---

UPDATE: Если вы хотите содержание двух форм-который будет представлен на одно действие, просто добавьте serialises:

$(document).ready(function() { 
    $("#subbut").click(function() { 
     $.post($("#firstform").attr("action"), $("#firstform").serialize()+$("#secondform").serialize(), 
       function() { 
       alert('Both forms submitted'); 
       }); 
     }); 
    }); 

PS: PHP в демке только вторя назад, что Вы отправляете. На сервере не требуется никаких специальных действий.

Answer 2

• Установите атрибут «целевой» на первой форме «_blank»
• Установите «действие» атрибут первой формы для «# Закрыть» (заменить «закрыть» с тем, что вы хотите.
• есть скрипт на странице, которая проверяет, если document.location.hash «близка», если она window.close()

Вот jsfiddle продемонстрировать.

http://jsfiddle.net/TqhPr/18/

HTML

<form id="f1" name="f1" target="_blank" method="POST" action="#close"> 
    <input type="hidden" value="1" /> 
    <input type="submit" id="s1" value="11" /> 
</form> 
<hr/> 
<form id="f2" name="f2" method="POST" action="#second_form"> 
    <input type="hidden" value="2" /> 
    <input type="submit" id="s2" value="22" /> 
</form> 
<hr/> 
<input type="button" id="both" value="Submit Both Forms" /> 

JavaScript

$(document).ready(function() { 
    $("#both").click(function() { 
     document.getElementById("f1").submit(); 
     document.getElementById("f2").submit(); 
    }); 
    if(document.location.hash == "#close") { 
     alert("closing the window caused by posting the first form"); 
     window.close(); 
    } 
    if(document.location.hash) { 
     alert(document.location.hash); 
    } 
}); 

Answer 3

Этот код успешно отправил 2 формы данных с помощью одной кнопки отправки.

<SCRIPT LANGUAGE="JavaScript" type="text/javascript"> 
/* Collect all forms in document to one and post it */ 
function submitAllDocumentForms() { 
    var arrDocForms = document.getElementsByTagName('form'); 
    var formCollector = document.createElement("form"); 
    with(formCollector) 
    { 
     method = "post"; 
     action = "test.php"; 
     name = "formCollector"; 
     id = "formCollector"; 
    } 
    for(var ix = 0 ; ix < arrDocForms.length ; ix++) { 
     appendFormVals2Form(arrDocForms[ix], formCollector); 
    } 
    document.body.appendChild(formCollector); 
    formCollector.submit(); 
} 

/* Function: add all elements from frmCollectFrom and append them to 
      frmCollector before returning frmCollector*/ 
function appendFormVals2Form(frmCollectFrom, frmCollector) { 
    var frm = frmCollectFrom.elements; 
    for(var ix = 0 ; ix < frm.length ; ix++) 
     frmCollector.appendChild(frm[ix]); 
    return frmCollector; 
} 
</SCRIPT> 

<FORM METHOD=POST ACTION="test.php" NAME="form1" id="form1"> 
    <INPUT TYPE="text" NAME="box1" size="20" > 
</FORM> 
FORM2: 
<FORM METHOD=POST ACTION="test.php" NAME="form2" id="form2"> 
    <INPUT TYPE="text" NAME="box2" size="20" > 
</FORM> 

<INPUT TYPE="button" value="Submit Form 1 & 2" onClick="submitAllDocumentForms()"> 

Answer 4

Я использовал это для аналогичной проблемы. Я хотел создать одну страницу для запроса нескольких сайтов и просматривать их результаты бок о бок:

WordLookup.HTML (главный/главная/точка входа кадра):

<html> 
 
    <head> 
 
    <title>Word Lookup</title> 
 
    </head> 
 
    <frameset cols="33%,34%,33%"> 
 
    <frame src="" name="DIC"> 
 
    <frameset rows="21,*"> 
 
     <frame src="frame.html" name="PRF"> 
 
     <frame src="" name="MW"> 
 
    </frameset> 
 
    <frame src="" name="TFD"> 
 
    </frameset> 
 
</html>

, а затем это для frame.html (JavaScript метод):

<html> 
 
<head> 
 
<style> 
 
    body { margin: 0; background-color: #AAAAAA; } 
 
    table, td { padding: 0; border-collapse: collapse; margin-left: auto; margin-right: auto; } 
 
    form { padding: 0; margin: 0; } 
 
</style> 
 
<script> 
 
    function submitForms(){ 
 
    var x = document.getElementById("search3").value; 
 
    document.getElementById("fr1").setAttribute("value", x); 
 
    document.getElementById("DIC").submit(); 
 
    document.getElementById("fr2").setAttribute("value", x); 
 
    document.getElementById("MW").submit(); 
 
    document.getElementById("fr3").setAttribute("value", x); 
 
    document.getElementById("TFD").submit(); 
 
    document.getElementById("search3").value = ""; 
 
    } 
 
</script> 
 
</head> 
 

 
<body> 
 

 
    <table> 
 
    <tr> 
 
     <td> 
 
     <input id="search3" type="text" placeholder="3x Search" onclick="value=''" onkeydown="if (event.keyCode == 13) 
 
{submitForms()}" autofocus="1"> 
 
     </td> 
 
     <td> 
 
     <form action="http://www.dictionary.com/dic" target="DIC" id="DIC"> 
 
      <input id="fr1" name="q" type="hidden" placeholder="Dictionary" onclick="value=''"> 
 
     </form> 
 
     </td> 
 
     <td> 
 
     <form action="https://www.merriam-webster.com/dictionary" target="MW" id="MW"> 
 
      <input id="fr2" name="s" type="hidden" placeholder="Merriam-Webster" onclick="value=''"> 
 
     </form> 
 
     </td> 
 
     <td> 
 
     <form action="//www.thefreedictionary.com/_/search.aspx" target="TFD" id="TFD"> 
 
      <input id="fr3" name="word" type="hidden" placeholder="TheFreeDictionary" onclick="value=''"> 
 
     </form> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body> 
 
</html>

К сожалению, если это немного многословный, но это рабочий пример (в chrome 56ish).