Jak przesłać 2 formularze na jednej stronie za pomocą jednego przycisku przesyłania

Question

Stworzyłem stronę php z dwoma formularzami, ale chciałbym mieć tylko jeden przycisk przesyłania dla obu formularzy. formularze mają . Próbowałem innych skryptów, ale tak naprawdę nie działają.

Oto mój kod poniżej:

<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

masz problemy KILKA

1. input type = image jest przycisk submit więc staramy się przedstawić coś z nieistniejącego formie prawdopodobnie ta sama strona, na której jesteś

2. po przesłaniu formularza 1, zastępuje bieżącą stronę, jeśli uda Ci się przesłać formularz 2, jest bardzo prawdopodobne, że przeszkadza bmission z form1

Oto co można spróbować (zwykły 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> 

Alternatywnie AJAX formach jeden naraz (zakłada jQuery załadowany)

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: Jeśli chcesz zawartość two formularza należy złożyć do jednej akcji, po prostu dodaj serialises:

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

PS: PHP w demie jest tylko echem z powrotem to, co piszesz. Na serwerze nie trzeba wykonywać żadnych specjalnych czynności.

Answer 2

• Ustaw atrybut „target” na pierwszym formularzu „_blank”
• Ustaw atrybut „działanie” na pierwszej formie do „#Zamknij” (zamiast „zamknij” z tym, co chcesz.
• mieć skrypt na stronie, która sprawdza czy document.location.hash jest „blisko”, jeśli jest window.close()

Oto jsfiddle wykazać.

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

Ten kod wysłano 2 formach danych z pojedynczego przycisku prześlij.

<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

Użyłem tego dla podobnego problemu. Chciałem utworzyć pojedynczą stronę, aby wysyłać zapytania do wielu witryn i przeglądać ich wyniki obok siebie:

WordLookup.html (główny/Home/ramce punkt dostępu)

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

i to dla frame.html (JavaScript metoda):

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

Niestety, jeżeli jest to trochę rozwlekły, ale jest to działający przykład (w wersji 56ish).