Submit multiple forms with one submit button - javascript

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.

Related

Change text in table cell when link in another cell on the same row is clicked

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.

Showing/Hiding Fields on checkbox event using jQuery

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>

displaying ajax response in html page without submit buttons

I have two questions
First Question:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="" />
<title>List Companies</title>
<script language="JavaScript" type="text/javascript">
function ajax_post(){
var databox =document.getElementById("status");
var hr = new XMLHttpRequest();
var url = "yourdomain/List_ajax.php";
var f = document.getElementById("format").value;
var vars = "format="+f;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = JSON.parse(hr.responseText);
var x="<table border='1'><tr><td style='width:80px'><center><b>Company ID</center></b></td><td style='width:80px'><center><b>Company Name</center></b></td><td style='width:80px'><center><b>Manager Name</center></b></td><td style='width:80px'><center><b>Manager Phone</center></b></td></tr>";
for(var o in return_data){
if(return_data[o].company_id){
x +="<tr><td style='width:80px'>"+return_data[o].company_id+"</td><td style='width:80px'>"+return_data[o].company_name+"</td><td style='width:80px'>"+return_data[o].manager_name+"</td><td style='width:80px'>"+return_data[o].manager_phone+"</td></tr>";
}//end if
}//end for
x += "</table>";
databox.innerHTML=x;
}//end if
}//end function
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = '<center> <img src="http://www.slimspresents.com/wp-content/themes/simplicity/images/indicator.gif" alt="wait"> </center>';
}
</script>
</head>
<body>
<table width="380px">
<tr>
<td colspan="2" style="text-align:center">
<h3>List of Companies</h3>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input id="format" name="format" type="hidden" value="json"/>
<input name="myBtn" type="submit" value="List Companies" onClick="javascript:ajax_post();">
</td>
</tr>
</table>
<br /><br />
<div id="status"></div>
</body>
</html>
Now when the user open the page has to click on the button to display "List of Companies" in a Table >>> I try to display the ajax without buttons directly when the user open the page displaying the "List of Companies" in a Table directly by this code
<script type="text/javascript">
ajax_post();
</script>
but does not work I want solution if it possible
Second Question:
I have a form has input fields with submit button like This Login page :
<table width="350px">
<tr>
<td colspan="2" style="text-align:center">
<h3>Login </h3>
<input id="format" name="format" type="hidden" value="json"/>
</td>
</tr>
<tr>
<td valign="top">
<label for="username">Username *</label>
</td>
<td valign="top">
<input id="username" name="username" type="text" maxlength="50" size="25"/>
</td>
</tr>
<tr>
<td valign="top">
<label for="password">Password *</label>
</td>
<td valign="top">
<input id="password" name="password" type="password" maxlength="50" size="25" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input name="myBtn" type="submit" value="Login" onClick="javascript:ajax_post();">
</td>
</tr>
</table>
Now when the user fill the fields has to click on Login button to submit the data.
The problem is when the user fill username filed and password filed and after that pressing on Enter in the Keyboard that does not submit the data >>>> I want when the user press on Enter on the Keyboard directly submit the data that means the user does not has to click on Login button that is better for usability.
For your first question, I think what you are looking for is:
<body onload="myFunction()">
This will execute your function, once your element has been loaded.
The enter key is usually bound to a object, but in your instance you don't have one - and even if you did, you don't want a POST or GET to happen. To get around this, simply bind a method to your function that will execute your Ajax call.
<input id="password" name="password" type="password" maxlength="50" size="25" onkeydown="if (event.keyCode == 13) document.getElementById('btnSearch').click()"/>

Get the text box value and display it into the h3 element

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

Submit a login form with out clicking the login button

So I have a login.jsp where I have hard coded the username and password values. My issue is I want the login to automatically submit the username and password values withhout a user having to physically click login. So the login in screen will pretty much only be visible for a split second before the user is redirected to the next page.
<div class="center-me">
<form:form name="login" id="login">
<div class="login_header_logo">
<img border="0" src="<c:url value='img/pidslogo.gif' />" />
</div>
<div id="login_header">
<h1>Login</h1>
</div><!-- #login_header -->
<div id="login_content">
<form:errors path="*" cssClass="validationErrors" />
<table id="form_fields">
<tr>
<td class="label">
Username:
</td>
<td class="field">
<form:input path="username" cssClass="inputField" />
</td>
</tr>
<tr>
<td class="label">
Password:
</td>
<td class="field">
<form:password path="password"cssClass="inputField" />
</td>
</tr>
<tr <c:if test="${repoListSize <= 1}">class="repository" style="display:none" </c:if>>
<td class="label">
Repository:
</td>
<td class="field">
<form:select id="repository" path="repository" multiple="false">
<c:forEach items="${repoList}" var="item">
<form:option value="${item.valueField}">${item.labelField} </form:option>
</c:forEach>
</form:select>
</td>
</tr>
</table>
<div id="submit1">
<input type="submit" value="Login" />
</div>
</div><!-- #login_content -->
</form:form><!-- #login -->
</div>
<script language="javascript">
TSG.util.onPageReady(function() {
if (parent.frames.length > 0)
{
parent.location = this.location;
}
if (window.opener)
{
window.opener.document.location=this.location;
window.close();
}
document.login.username.focus();
Nifty("div#login_header","top, big");
});
document.getElementById("username").value = "111111111";
document.getElementById("password").value = "111111111";
</script>
Simply add the following line at the end of the script section, to submit the login form automatically:
document.forms["login"].submit();

Categories