Отправить несколько форм с помощью одной кнопки Отправить

У меня есть следующий код, в основном он выполняет две операции. Первая отправке данных формы в таблицу Google и другие операции представляет свою вторую форму данных текстовое поле Значение с другим значением текстового поля страницы. Как это сделать?



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

}

}


Как вы можете видеть выше, это первая страница и на второй странице, где я имел в виду Sankranthi_Reserv2.жерех во второй форме. Я хочу передать значение textbox туда, поэтому проблема заключается в первом форма отправляется в Google docs и сохраняет данные,но вторая форма должна передать значение текстового поля handphone number в значение текстового поля nextpage, но есть только одна кнопка SUBMIT.
470   3  

3 ответов:

Для отправки двух форм вам придется использовать Ajax. Как и после использования формы.страница submit() загрузит URL действия для этой формы. поэтому вам придется делать это асинхронно.

Таким образом, вы можете отправить оба запроса асинхронно или отправить один запрос асинхронно и после его успешного завершения отправить вторую форму. 
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
}

Вы можете привязать эту функцию submitTwoForms() к вашей кнопке отправки. Использование 

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

Но, если вы не хотите делать все это, вы можете использовать jQuery form plugin , чтобы отправить форму с помощью Ajax.

7  
2011-12-19 17:46:01

Что-то вроде этого будет работать: 

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

Альтернатива: 

$('#form1_submit_button').click(function(){
    $('#form1 #form2 #form3').submit();
});
8  
2011-12-19 17:57:46

Самый простой способ, который я нашел, это что-то вроде этого 

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

Это сделает действие формы (не показывая его в вашем браузере), а затем перенаправит на страницу заголовка.

-2  
2014-06-16 20:43:50

Comments

    Ничего не найдено.
Click here to cancel reply.