I tried to use this issue as a guide, but I'm not sure what I'm doing wrong with my below code. I'd appreciate it if someone could help out.
A little background: I have limited ability to change the HTML as it's in Confluence using an add-on called Confiforms. I can hide/show fields using Confiforms, but I generally find that it takes a performance hit when I configure it that way.
HTML:
<tr>
<td class="label editLabel">Customer Impact?</td>
<td>
<p class="auto-cursor-target">
<span class="i_holdingrow_impact">
<span id="i_holdingrow_impact">
<input cf-field="impact" class="radio" type="checkbox" name="impact" id="i_impact">
</span>
</span>
</p>
</td>
</tr>
<tr>
<td/>
<td>
<p>
<span class="i_holdingrow_impactDesc">
<span id="i_holdingrow_impactDesc">
<textarea cf-field="impactDesc" id="i_impactDesc" name="impactDesc" rows="4" class="textarea large-field cf_textarea"/>
</span>
</span>
</p>
</td>
</tr>
Relevant jQuery:
$('input[type="checkbox"]').change(() => {
if ($(this).is(':checked')) {
$(this).closest('tr').next('tr').show();
}
else {
$(this).closest('tr').next('tr').hide();
}
});
Thanks!
You should be very careful when using jquery with arrow functions:
$('input[type="checkbox"]').change(function() {
if ($(this).is(':checked')) {
$(this).closest('tr').next('tr').show();
} else {
$(this).closest('tr').next('tr').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="label editLabel">Customer Impact?</td>
<td>
<p class="auto-cursor-target">
<span class="i_holdingrow_impact">
<span id="i_holdingrow_impact">
<input cf-field="impact" class="radio" type="checkbox" name="impact" id="i_impact">
</span>
</span>
</p>
</td>
</tr>
<tr>
<td/>
<td>
<p>
<span class="i_holdingrow_impactDesc">
<span id="i_holdingrow_impactDesc">
<textarea cf-field="impactDesc" id="i_impactDesc" name="impactDesc" rows="4" class="textarea large-field cf_textarea"></textarea>
</span>
</span>
</p>
</td>
</tr>
</table>
The arrow-function preserve the context of this, thus it's no longer the relevant element you attached the event to.
In case you do want to use arrow function, you can use the following:
$('input[type="checkbox"]').change((evt) => {
el = evt.currentTarget;
if ($(el).is(':checked')) {
$(el).closest('tr').next('tr').show();
} else {
$(el).closest('tr').next('tr').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="label editLabel">Customer Impact?</td>
<td>
<p class="auto-cursor-target">
<span class="i_holdingrow_impact">
<span id="i_holdingrow_impact">
<input cf-field="impact" class="radio" type="checkbox" name="impact" id="i_impact">
</span>
</span>
</p>
</td>
</tr>
<tr>
<td/>
<td>
<p>
<span class="i_holdingrow_impactDesc">
<span id="i_holdingrow_impactDesc">
<textarea cf-field="impactDesc" id="i_impactDesc" name="impactDesc" rows="4" class="textarea large-field cf_textarea"></textarea>
</span>
</span>
</p>
</td>
</tr>
</table>
Related
I have table that is populated with items from a database. There is a column to "tick" each item, which calls to the database to change the status of that item to "Valid" - that part works. To save me having to refresh the page though, I would like to then update the text on the page after the ajax call so that it reads "Valid" instead of submitted. What is the correct code to achieve this? Where am I going wrong? Without success, I have also attempted to get the tick to go green once clicked.
<div class="form-group">
<div class="row">
<div class="table-responsive col-md-6">
<h4><i class="glyphicon glyphicon-check"></i> Summary</h4>
<hr />
<table id="stationCount" class="table table-bordered table-hover">
<tr>
<th>ID</th>
<th>Place</th>
<th>Submission Date</th>
<th>Status</th>
<th>Confirm</th>
</tr>
<tr>
<td>
<p id="lblId" class="form-control-static" contenteditable="false">
159
</p>
</td>
<td>
<p id="lblPlaceName" class="form-control-static" contenteditable="false">
Somewhere
</p>
</td>
<td>
<input type="hidden" data-val="true" data-val-required="The SurveyId field is required." id="Items_0__SurveyId" name="Items[0].SurveyId" value="159" />
<p id="lblSubmittedOn" class="form-control-static" contenteditable="false" title="27/03/2018 11:04:47">
27/03/2018
</p>
</td>
<td class="status" id="159">
<p asp-for="Submitted">
Submitted
</p>
</td>
<td>
<a href='#' class='btn btn-default ConfirmLink' style="color: #808080 " data-url='/Controller/ValidateSurvey' data-id="159">
<i class="fa fa-check"></i>
</a>
</td>
</tr>
<tr>
<td>
<p id="lblId" class="form-control-static" contenteditable="false">
3
</p>
</td>
<td>
<p id="lblPlaceName" class="form-control-static" contenteditable="false">
Somewhere else
</p>
</td>
<td>
<input type="hidden" data-val="true" data-val-required="The SurveyId field is required." id="Items_5__SurveyId" name="Items[5].SurveyId" value="3" />
<p id="lblSubmittedOn" class="form-control-static" contenteditable="false" title="21/01/2018 00:00:00">
21/01/2018
</p>
</td>
<td class="status" id="3">
<p asp-for="Submitted">
Expired
</p>
</td>
<td>
<a href='#' class='btn btn-default ConfirmLink' style="color: #808080" data-url='/Controller/ValidateSurvey' data-id="3">
<i class="fa fa-check"></i>
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
$(function() {
//Document.ready//
//link up event handler
$(".ConfirmLink").click(function() {
// Get the id from the link
var recordToConfirm = $(this).attr("data-id");
var postToUrl = $(this).attr("data-url");
$.ajax(postToUrl, {
type: "post",
data: {
"id": recordToConfirm
},
dataType: "json"
}).done(function(data) {
// Successful requests get here
});
if ($(this).css('color') === '#808080') {
$(this).css('color', '#008000');
} else {
$(this).css('color', '#808080');
}
$("#" + recordToConfirm + " td.status").html('Valid');
});
});
I have set up a jsfiddle:
https://jsfiddle.net/a4zhpt7L/4/
To do everything you want, change some things:
Change if ($(this).css('color') === '#808080') to if ($(this).css('color') == 'rgb(128, 128, 128)'), because jQuery returns a rgb code instead of a hex code.
Change $("#" + recordToConfirm + " td.status").html('Valid'); to $("td.status#" + recordToConfirm).html('Valid');, because the td.status was placed incorrectly.
I hope this also fixes your ajax problem.
I would like to have a table which some of rows include another tables. My html file is as:
HTML: Updated after answers
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Cell that spans two tables:</h2>
<table>
<tr>
<th>Name:</th>
<td>Rows including tables</td>
</tr>
<tr>
<th rowspan="4">Telephone:</th>
<td>row1 of first table</td>
</tr>
<tr class="yellow">
<td>
<div class='yellowTable'>
<input name="yelInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="changeArrow arrow-up">-</span>
<span class="changeArrow arrow-dn">+</span>
row2 of first table
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable">
<tr>
<td>
20:00
</td>
<td>
hello world first table
</td>
</tr>
<tr>
<td>
21:00
</td>
<td>
hello world second table
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td>row3 of first table</td>
</tr>
<tr class="yellow">
<td>
<div class='yellowTable'>
<input name="yelInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="changeArrow arrow-up">-</span>
<span class="changeArrow arrow-dn">+</span>
row2 of first table
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable">
<tr>
<td>
20:00
</td>
<td>
hello world first table
</td>
</tr>
<tr>
<td>
21:00
</td>
<td>
hello world second table
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<tr class="red">
<td>
<div class='redTable'>
<input name="redInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="changeArrow arrow-up">-</span>
<span class="changeArrow arrow-dn">+</span>
row2 of first table
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable">
<tr>
<td>
20:00
</td>
<td>
hello world first table
</td>
</tr>
<tr>
<td>
21:00
</td>
<td>
hello world second table
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
CSS:
#mouse { cursor: pointer; }
.fieldsetContainer { height: 0;overflow: hidden;transition: height 400ms linear; }
#toggle { display: none; }
#toggle:checked~.fieldsetContainer { height: auto; }
label .arrow-dn { display: inline-block; }
label .arrow-up { display: none; }
#toggle:checked~label .arrow-dn { display: none; }
#toggle:checked~label .arrow-up { display: inline-block; }
But the problem is that the second collapsing does not work, it makes collapse the second first row rather than the second one.
I searched through the Internet about the problem, but I failed. How I could handle the problem?
By the way, I have added the complete code here in jsfiddle.
Update:
thanks a lot for your great answers. Well as you mentioned I should change the id's and for attribute of <label> which they should be unique. But not problem for is that I have thousands of such a tables and then I could not do it manually. I wonder if you please let me know if I could do systematically via CSS or JS. I will add them to the XSLT file. I can Thanks a lot again for your comments!
here is some lines from xslt file, related to the main point.
<tr class="yellow">
<td>
<div id="yellowTable">
<input name="yelInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="chnageSymbol expand-Negative">-</span>
<span class="chnageSymbol collapse-Positive">+</span>
<div> row2 of first table </div>
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable" id="secondtable">
..............................
<tr class="red">
<td>
<div id="redTable">
<input name="redInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="chnageSymbol expand-Negative">-</span>
<span class="chnageSymbol collapse-Positive">+</span>
<div> row2 of first table </div>
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable" id="secondtable">
..............................
(I have deleted end tags because of saving long question.)
Update2:
I am attaching JavaScript code for assigning id's and attribute for as I've mentioned above.
JS:
function assignIdAndForAttribute()
{
var redTable= document.getElementById("redTable");
var redInputTag = redTable.getElementsByTagName("input");
var redLabelTag = redTable.getElementsByTagName("label");
//<![CDATA[
for (var i = 0; i < tableError.length; i++) {
redInputTag [i].setAttribute("id", 'toggleRed' + i);
redLabelTag [i].setAttribute("for", 'toggleRed' + i);
}
//]]>
var yellowTable = document.getElementById("detailedTable");
var yellowInputTag = yellowTable.getElementsByTagName("input");
var yellowLabelTag = yellowTable.getElementsByTagName("label");
//<![CDATA[
for (var i = 0; i < tableWarning.length; i++) {
yellowInputTag [i].setAttribute("id", 'toggleyellow' + i);
yellowLabelTag [i].setAttribute("for", 'toggleyellow' + i);
}
//]]>
}
The error stems from the fact that you are using ids which are supposed to be unique. If you change toggle to a class instead of id, and update your css from #toggle to .toggle you'll almost have it.
If you don't hide the input.toggle elements at that point, you'll see it working fine.
The labels' for attribute will also need to be updated so you can interact with the label when you hine the input. Just use a unique id on each toggle to place in the for attribute of the label and use a class for styling and functionality.
You have set two ids that are "toggle" and both labels for "toggle". Change them to something else:
<input type="checkbox" class="toggle" id="toggle2"/>
DEMO
To achieve expected result, use below option
Use same class instead of same id for toggle (as id has to be unique)
Use Opacity:0 instead of display:none (as it will be not available on DOM for events)
HTML:
<input type="checkbox" class="toggle" />
CSS:
.toggle {
opacity:0
}
.toggle:checked~.fieldsetContainer {
height: auto;
}
.toggle:checked~label .arrow-dn {
display: none;
}
.toggle:checked~label .arrow-up {
display: inline-block;
}
https://jsfiddle.net/Nagasai_Aytha/juoy75rg/84/
I have this form
<tr ng-repeat="quote in quotes">
<form ng-submit="submit()" name="qut">
<td class="text-left">
{[{ quote.business_name }]}
</td>
<td class="text-left">
<span ng-if="quote.quote">
{[{ quote.quote }]}
</span>
<span ng-if="!quote.quote">
<input ng-model="qt" class="form-control" type="text" name="quote" />
</span>
</td>
<td class="text-left">
<span ng-if="quote.status==1">
<input type="submit" class="btn btn-out" value="Quote" />
</span>
</td>
</form>
</tr>
In my controller I have
$scope.submit = function() {
console.log('form');
};
If I change ng-submit="submit()" to ng-click="submit()" in button it works, not sure why I am unable to submit the form
The problem is that you have an illegal html structure by nesting a table > tr element with a form. That causes the inner input[type=submit] not to identify his parent form and trigger the submit.
I could get your example working by replacing tables and tr with div and td with spans.
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.quotes = [{
business_name: "business_name 1",
quote: "quote1",
status: 1
}, {
business_name: "business_name 2",
quote: "quote2",
status: 1
}]
$scope.submit = function() {
console.log('form');
};
});
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-controller="myController">
<div ng-repeat="quote in quotes">
<form ng-submit="submit()" name="qut{{$index}}">
<span class="text-left">
{{ quote.business_name }}
</span>
<span class="text-left">
<span ng-if="quote.quote">
{{ quote.quote }}
</span>
<span ng-if="!quote.quote">
<input ng-model="qt" class="form-control" type="text" name="quote" />
</span>
</span>
<span class="text-left">
<span ng-if="quote.status==1">
<input type="submit" class="btn btn-out" value="Quote" />
</span>
</span>
</form>
</div>
</div>
Because multiple same form names are being created.
What you should do is you can create dynamic form names inside ng-repeat.
<tr ng-repeat="quote in quotes">
<form ng-submit="submit(qut{{$index}}.$valid)" name="qut{{$index}}">
<td class="text-left">
{[{ quote.business_name }]}
</td>
<td class="text-left">
<span ng-if="quote.quote">
{[{ quote.quote }]}
</span>
<span ng-if="!quote.quote">
<input ng-model="quote.quote" class="form-control" type="text" name="quote{{$index}}" />
</span>
</td>
<td class="text-left">
<span ng-if="quote.status==1">
<input type="submit" class="btn btn-out" value="Quote" />
</span>
</td>
</form>
</tr>
$scope.submit = function(value) {
console.log('form',value);
};
Tried to get the text box value and display into the h3 element in above the textbox field
Here is my HTML Code :
<div class="clonedInput" id="add_attribute" style="display: block;">
<div id="add_attributes">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name">**Here Text box value should be displayed**</strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="clonedInput" id="add_attribute_2" style="display: block;">
<div id="add_attributes" class="woocommerce_attribute wc-metabox ">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name"></strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="clonedInput" id="add_attribute_3" style="display: block;">
<div id="add_attributes" class="woocommerce_attribute wc-metabox ">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name"></strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I'm trying to get the input field value <input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]"> and display the value into the "
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name">"**Here the text box value"</strong> </h3>
" on blur function and this was dynamic text box
My Jquery :
$( "input" ).blur(function() {
var string = $(this).val();
$(this).parent().append(string);
});
I added an id attribute to the h3 where you want to display it and use that as reference on the blur event callback: DEMO HERE
HTML
<strong class="attribute_name" id="output">**Here Text box value should be displayed**</strong> </h3>
jQuery
$("input").blur(function () {
var string = $(this).val();
$('#output').html(string);
});
See a working demo here: http://jsfiddle.net/wPCZ5/
You need to do this in your handler:
$(this).closest('div').find('h3 > strong').html(string);
for all text boxes to work. The closest() call looks up the DOM hierarchy and returns the first matching element. In your case, it is the accordion div. The find() call then looks down the DOM hierarchy for the matching element. Finally html() replaces the current HTML within the element with the supplied string. Your original call to append() would add the string to whatever is already present.
There's a working fiddle here: http://jsfiddle.net/u63CU/ but I think you should not reuse class and ID names like you have. It can lead to many undesired results, as jquery selects by id or class name.
<div class="clonedInput" id="add_attribute" style="display: block;">
<div id="add_attributes">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong id="text-value" class="attribute_name">**Here Text box value should be displayed**</strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
$( "#attribute_name" ).blur(function() {
var string = $(this).val();
$('#text-value').text(string);
});
try something like this
$( "input" ).blur(function() {
$(this).closest('strong.attribute_name').text(this.value);
});
If you want to place text box value in place of **Here Text box value should be displayed**, please try this:
$( "input" ).blur(function() {
var string = $(this).val();
$(".attribute_name").text(string);
});
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 – 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"> </th>
<th width="109" rowspan="5" valign="top" class="YJCRED" scope="col">
<div align="left">
<font size="2"> * 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"> </th>
</tr>
<tr>
<td> </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> </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> </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> </p>
</td>
</tr>
<p> </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.
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();
});
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.
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.