एक ही सबमिट बटन के साथ एक पृष्ठ में 2 फॉर्म कैसे सबमिट करें

Question

मैंने दो रूपों के साथ एक PHP पृष्ठ बनाया है, लेकिन मैं दोनों रूपों के लिए केवल एक सबमिट बटन रखना चाहता हूं। रूपों में id s 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 के साथ हस्तक्षेप करने की संभावना है Form1

यहाँ की bmission क्या आप (सादा जावास्क्रिप्ट) की कोशिश कर सकते हैं: एक समय में

<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'); 
       }); 
      }); 
     }); 
    }); 

---

अद्यतन: आप दो प्रपत्र की सामग्री एक कार्रवाई करने के लिए प्रस्तुत किया जाना चाहते हैं, तो बस serialises जोड़ें:

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

पुनश्च: डेमो में पीएचपी सिर्फ आप अपनी पोस्ट वापस गूंज रहा है। सर्वर पर कोई विशेष कार्रवाई की आवश्यकता नहीं है।

Answer 2

• पहले फार्म पर 'लक्ष्य' विशेषता सेट को "_blank"
• "कार्रवाई" पहला रूप में यह विशेषता सेट करने के लिए "# बंद करें" ("बंद" की जगह जो कुछ के साथ आप चाहते हैं।
• पेज है कि अगर document.location.hash "बंद" है अगर यह window.close()

यहाँ jsfiddle प्रदर्शित करने के लिए है की जाँच करता है पर एक स्क्रिप्ट है।

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

एचटीएमएल

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

जावास्क्रिप्ट

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

मैंने इसे इसी तरह की समस्या के लिए उपयोग किया। मैं एकाधिक साइटों को क्वेरी करने के लिए एक पृष्ठ बनाना चाहता था और उनके परिणामों की समीक्षा साइड-बाय-साइड:

वर्ड लुकअप।एचटीएमएल (मुख्य/घर/फ्रेम प्रवेश बिंदु):

<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 के लिए (जावास्क्रिप्ट विधि):

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

क्षमा करता है, तो यह है थोड़ा सा शब्द लेकिन यह एक कामकाजी उदाहरण है (क्रोम 56ish में)।