2011-12-19 11 views
11

Ho il seguente codice, in pratica sta eseguendo due operazioni. Il primo è l'invio dei dati del mio modulo al foglio di calcolo di google e l'altra operazione consiste nell'inviare i miei dati del valore della casella di testo del secondo modulo a un valore di casella di testo di un'altra pagina. Come fare questo?Invia moduli multipli con un pulsante di invio

<script type="text/javascript"> 

<!-- 
    function copy_data(val){ 
var a = document.getElementById(val.id).value 
document.getElementById("copy_to").value=a 
} 
//--> 
</SCRIPT> 
<style type="text/css"> 
<!-- 
--> 
</style> 

</head> 
<body > 
<script type="text/javascript">var submitted=false;</script>   
<iframe name="response_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){window.location='Thanks.asp';}"></iframe>   <form action="https://docs.google.com/spreadsheet/formResponse?formkey=dGtzZnBaYTh4Q1JfanlOUVZhZkVVUVE6MQ&ifq" method="post" target="response_iframe" id="commentForm" onSubmit="submitted=true;"> 

<!-- #include virtual="/sts/include/header.asp" --> 
<!-- ABove this Header YJC --> 
<table style="background-color: #FFC ;" width="950" align="center" border="0" summary="VanaBhojnaluBooking_Table"> 
<tr><td colspan="7"><p class="MsoNormal" align="center" style="text-align:center;"><strong><span style="line-height:115%; font-family:'Arial Rounded MT Bold','sans-serif'; font-size:16.0pt; color:#76923C; ">Karthika Masa Vanabhojanalu &ndash; Participation Booking</span></strong></p> 
<p class="MsoNormal" align="center" style="text-align:center;"><strong><em><span style="line-height:115%; font-size:20.0pt; color:#7030A0; ">13<sup>th</sup> Nov 2011 - @ West Coast Park - Singapore</span></em></strong></p> 
    <p class="MsoNormal" align="center" style="text-align:center;"><strong><span style="color:#7030A0; ">Reserve your participation and avail </span><span style="color:red; "> <a target="_blank" href="/STS/programs/VB_2011_info.asp"> DISCOUNT </a></span><span style="color:#7030A0; "> on the ticket</span></strong></p></td> </tr> 
    <tr> 
    <th width="37" scope="col">&nbsp;</th> 
    <th width="109" rowspan="5" valign="top" class="YJCRED" scope="col"><div align="left"><font size="2"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;* Required</font></div></th> 
    <td width="68" scope="col"><div align="right"><font size="2.5px">Name</font><span class="yj"><span class="yjcred">*</span></span></div></td> 
    <th colspan="3" scope="col"><label for="Name"></label> 
     <div align="left"> 
     <input name="entry.0.single" class="required" style="width:487px; height:25px; vertical-align:middle;" type="text" id="entry_0" title="Enter your name" > 
     </div></th> 
    <th width="223" scope="col">&nbsp;</th> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td><div align="right"><font size="2.5px">Phone</font><span class="yj"><span class="yjcred">*</span></span></div></td> 
    <td width="107"><input name="entry.1.single" class="required" title="Handphone Number with out +65" maxlength="8" style="width:100px;height:25px;" type="text" onkeyup="copy_data(this)" onKeyPress="return numbersonly(this, event)" id="entry_1" ></td> 
    <td width="170"><div align="right"><font size="2.5px">Email</font><span class="yj"><span class="yjcred1">*</span></span></div></td> 
    <td width="206"><input name="entry.2.single" type="text" style="width:190px;height:25px;" id="required" title="Enter your email address" class="required email" ></td> 
    </tr> 


    <tr> 
    <td>&nbsp;</td> 
    <td><div align="right"><font size="2.5px">Home Phone</font></div></td> 
    <td width="107"><input name="entry.1.single" title="Handphone Number with out +65" maxlength="8" style="width:100px;height:25px;" type="text" onKeyPress="return numbersonly(this, event)" id="entry_100" ></td> 

    </tr> 


    <tr> 
    <td align="center" colspan="7"><p>&nbsp; 
     </p> 
     <p> 
     <input type="submit" name="submit" onMouseOver="Window.status='You can not see anything';return true" onMouseOut="window.status='Press SUBMIT only after proper inforatmion entering then you are Done'" onClick="jQuery.Watermark.HideAll();" value="Submit"> 
    </p> 
    <p>&nbsp;</p></td> 
    </tr> 
    <p>&nbsp;</p> 
    <tr> 
    <td colspan="25"></td> 
    </tr> 
</table> 

</form> 
<form method="Link" Action="Sankranthi_Reserv2.asp"> 
<input disabled name="copy of hp" maxlength="8" style="width:100px;height:25px;" type="text" id="copy_to" > 

</form> 


<p><!-- #include virtual="/sts/include/footer.asp" --> 

    <input type="hidden" name="pageNumber" value="0"> 
    <input type="hidden" name="backupCache" value=""> 
<script type="text/javascript"> 

     (function() { 
var divs = document.getElementById('ss-form'). 
getElementsByTagName('div'); 
var numDivs = divs.length; 
for (var j = 0; j < numDivs; j++) { 
if (divs[j].className == 'errorbox-bad') { 
divs[j].lastChild.firstChild.lastChild.focus(); 
return; 
} 
} 
for (var i = 0; i < numDivs; i++) { 
var div = divs[i]; 
if (div.className == 'ss-form-entry' && 
div.firstChild && 
div.firstChild.className == 'ss-q-title') { 
div.lastChild.focus(); 
return; 
} 
} 

Come si può vedere dall'alto, questa è la prima pagina e nella seconda pagina in cui mi riferivo Sankranthi_Reserv2.asp nel secondo modulo. Voglio passare il valore della casella di testo lì, quindi il problema è che il primo modulo è l'invio ai documenti di google e l'archiviazione dei dati, ma il secondo modulo deve passare il valore della casella di testo numero handphone al valore della casella di testo nextpage, ma c'è solo un pulsante SUBMIT.

+2

Potresti semplificare il codice di esempio rimuovendo i dettagli non pertinenti? È difficile capirlo. –

+0

scusami amico, eccoti il ​​codice più breve, ma a mio avviso tutto funziona perfettamente, tranne il problema che ho menzionato riguardo a un pulsante di invio per due moduli e il secondo modulo che invia valori a un'altra pagina mentre il primo modulo invia i valori delle caselle di testo a Google spreadsheets..tks – JackyBoi

+1

Vedo ancora molte informazioni irrilevanti. Potresti renderlo corto di 10-15 linee? –

risposta

7

Per l'invio di due moduli è necessario utilizzare Ajax. Come dopo aver usato la pagina form.submit(), verrà caricato l'URL dell'azione per quel modulo. quindi dovrai farlo in modo asincrono.

Quindi è possibile inviare entrambe le richieste in modo asincrono o inviare una richiesta in modo asincrono e dopo il suo successo inviare il secondo modulo.

function submitTwoForms() { 
var dataObject = {"form1 Data with name as key and value "}; 
    $.ajax({ 
     url: "test.html", 
     data : dataObject, 
     type : "GET", 
     success: function(){ 
     $("#form2").submit(); //assuming id of second form is form2 
     } 
    }); 
    return false; //to prevent submit 
} 

È possibile associare questa funzione submitTwoForms() sul tuo che uno pulsante di invio. Utilizzando

$('#form1').submit(function() { 
    submitTwoForms(); 
    return false; 
}); 

Ma, se non si vuole fare tutto questo, è possibile utilizzare Jquery form plugin per presentare il modulo con Ajax.

+0

Suggerisco di utilizzare "event.preventDefault();" su "return false;". Ma nessuna discussione su come funziona correttamente :-) – Flater

+0

Pradeep Mi chiedevo questa riga per cambiare "{" form1 Dati con nome come chiave e valore "};" a questo diritto "document.getobjectbyname (" form1 ") ...? Ma come non sono sicuro se hai visto il mio codice nel primo post perché i miei due moduli usano metodi diversi uno è POST l'altro è LINK. quindi il secondo forma come sta usando il metodo LINK quindi invierà i dati nel link html (so che è esposto è ok) quindi non sono sicuro di cosa sostituire la tua linea di codice con ... per favore guarda il mio codice sopra e consigli ulteriori.Tks – JackyBoi

+1

@JackyBoi Ho usato quella linea come segnaposto. Come, dovrai scrivere il codice per creare quella variabile (se ci sono due input allora ogni nome di ciascun input sarà 'key' e il loro valore valore per la chiave corrispondente) .Per molte variabili sarà noioso usare così tanti plugin, ma nel tuo caso puoi creare direttamente quell'oggetto come '{inputname:" value "}' inserendo quel nome di input e il suo valore con ' documento.getELementByID' – Pradeep

8

Qualcosa di simile potrebbe funzionare:

$('#form1_submit_button').click(function(){ 
    $('form').each(function(){ 
     $(this).submit(); 
    }); 
}); 

Alternativa:

$('#form1_submit_button').click(function(){ 
    $('#form1 #form2 #form3').submit(); 
}); 
+0

si prega di vedere il seguente ultimo commento dovrebbe corrispondere intorno allo stesso tempo come questo commento. Sto usando due metodi diversi per entrambe le forme – JackyBoi

-2

il modo più semplice che ho trovato è qualcosa di simile

<form method='post' action='whatever?whatever1=blah&whatever2=blah'> 
<?php 
header ("Location: http://example.com/whatever.html"); 
?> 

Questo farà l'azione del modulo (senza mostrarlo nel browser), quindi reindirizzare alla pagina dell'intestazione.

Problemi correlati