12

I have the following code, basically it is performing two operations. First one being submitting my form data to the google spreadsheet and the other operation is submitting my second form textbox value data to another page textbox value. How to do this?

<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';}"/>
    
    <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"/>
                    <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 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"/>
                    
            </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"/>
                    
            </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"/>
            </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; 
                    } 
                }

As you can see from above, this is the first page and in the second page where I was referring to Sankranthi_Reserv2.asp in the second form. I want to pass the textbox value over there, so the problem is the first form is submitting to the google docs and storing the data, but the second form need to pass the handphone number textbox value to the nextpage textbox value, but there is only one SUBMIT button.

biberman
  • 5,606
  • 4
  • 11
  • 35
JackyBoi
  • 2,695
  • 12
  • 42
  • 74
  • 2
    Could you simplify your sample code by removing irrelevant details? It's hard to understand this one. – Sergio Tulentsev Dec 19 '11 at 15:13
  • sorry man there you go shorter code, but FYI everything is working fine except the problem that i mentioned about one submit button for two forms and the second form sending values to another page while the first form sending the values of the textboxes to the google spreadsheets..tks – JackyBoi Dec 19 '11 at 15:41
  • 1
    I still see lots of irrelevant information. Could you make it 10-15 lines short? – Sergio Tulentsev Dec 19 '11 at 15:43

3 Answers3

10

Something like this would work:

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

Alternative:

$('#form1_submit_button').click(function(){
    $('#form1 #form2 #form3').submit();
});
Gustav
  • 2,902
  • 1
  • 25
  • 31
  • please see the below latest comment should correspond around the same time as this comment. I am using two different methods for the both forms – JackyBoi Dec 20 '11 at 05:29
9

For submitting two forms you will have to use Ajax. As after using form.submit() page will load action URL for that form. so you will have to do that asynchronously.

So you can send both request asynchronously or send one request asynchronously and after its success submit second form.

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
}

You can bind this submitTwoForms() function on your that one submit button. Using 

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

But, if you do not want to do all this, you can use Jquery form plugin to submit form using Ajax.

Pradeep
  • 1,254
  • 1
  • 22
  • 41
  • I would suggest using "event.preventDefault();" over "return false;". But no argument about it working correctly :-) – Flater Dec 19 '11 at 15:56
  • Pradeep I was wondering this line to change " {"form1 Data with name as key and value "};" to this right "document.getobjectbyname("form1")...? But as I am not sure if you have viewed my code in the first post because my two forms use different methods one is POST the other is LINK. so the second form as it is using the LINK method so it will be sending the data in the html link (I know it is exposed it is ok) so I am unsure what to replace your line of code with..please take a look at my code above and advice further.Tks – JackyBoi Dec 20 '11 at 05:27
  • 1
    @JackyBoi I have used that line as a placeholder. As, you will have to write code for creating that variable (if there are two input then each name of each input will be `key` and their value will be value for corresponding key). For many variable it will be tedious so many use plugin. but in your case you can directly create that object as `{ inputname : "value"}` by putting that inputs name and its value by `document.getELementByID` – Pradeep Dec 20 '11 at 08:24
  • Ok pradeep i am at work now i will update you once i reach home but i still have doubt on how to activate this function? as in the submit buttons onclick event handler i can just put this function and it works? – JackyBoi Dec 20 '11 at 09:48
  • Yes you can bind that function using jquery's `.submit()` function [see doc](http://api.jquery.com/submit/) – Pradeep Dec 20 '11 at 10:01
  • function submitTwoForms() { var dataObject = document.getELementByID(commentForm); $.ajax({ url: "test.html", data : dataObject, type : "GET", success: function(){ $("#form2").submit(); } }); return false; } this is the code that i used and the commentForm is the form1 id the second form is form2 and itscode is like this
    NOT WORKING it is not submitting the second form     – JackyBoi Dec 20 '11 at 13:00
  • Ok pradeep i think u have answered the question but not what i was looking for anyways tks, i got to open up another question now with clearer motive – JackyBoi Dec 20 '11 at 14:57
  • @JackyBoi your `type` should be `POST` as your method is post and also I said you have to write key : value pair. So dataObject will be `var dataObject = { "commentForm" = document.getELementByID(commentForm);}` where commentForm is also name of that input element. – Pradeep Dec 20 '11 at 17:06
  • Hi pradeep can help with this question over here same problem different approach http://stackoverflow.com/questions/8577859/form-to-perform-action-and-passover-the-values/8578102#8578102 – JackyBoi Dec 22 '11 at 13:09
  • aww shucks! tks man no problem but this problem is really getting on my nerves and only u know what to do..tks – JackyBoi Dec 23 '11 at 13:28
  • hi pradeep u r still up for chat? – JackyBoi Dec 24 '11 at 01:15
  • @JackyBoi I will be online for next few hours – Pradeep Dec 24 '11 at 15:22
  • actually i got it solved using the local storage so its ok ..but really appreciate the offer to chat..tks man – JackyBoi Dec 25 '11 at 17:14
-4

the simplest way I have found is something like this

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

This will do the action of the form (without showing it in your browser), then redirect to the page of the header.

Degar007
  • 107
  • 1
  • 5