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();
Related
Im stuck with a project. This is strictly for a company internal employee login page. Not public! For those that might question the security of this form. Although, I am open to hashing the pincode password (SHA-1).
I've setup the code on my jsfiddle PINCODE LOGIN
<body onLoad="emptyCode()" class="hold-transaction login-page">
<!-- Page Content -->
<div class="login-box">
<div class="login-logo">
<b>PINCODE LOGIN</b>
<p class="login-box-msg">Employee Sign-in</p>
</div>
<!-- /.login-logo -->
<div class="login-box-body">
<!--<form action="" method="post">-->
<div class="main_panel">
<form action="" method="post">
<div class="input-group">
<input type="text" name="code" maxlength="4" readonly="readonly" class="form-control" placeholder="Enter PIN...">
<span class="input-group-btn">
<button class="btn btn-danger" type="reset" >X</button>
</span>
</div>
<!-- /input-group -->
<table id="keypad" cellpadding="5" cellspacing="3">
<tbody>
<tr>
<td onclick="addCode('1');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>1</span>
</div>
</td>
<td onclick="addCode('2');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>2</span>
</div>
</td>
<td onclick="addCode('3');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>3</span>
</div>
</td>
</tr>
<tr>
<td onclick="addCode('4');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>4</span>
</div>
</td>
<td onclick="addCode('5');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>5</span>
</div>
</td>
<td onclick="addCode('6');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>6</span>
</div>
</td>
</tr>
<tr>
<td onclick="addCode('7');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>7</span>
</div>
</td>
<td onclick="addCode('8');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>8</span>
</div>
</td>
<td onclick="addCode('9');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>9</span>
</div>
</td>
</tr>
<tr>
<td>
</td>
<td onclick="addCode('0');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>0</span>
</div>
</td>
</tr>
</tbody>
</table>
<p id="message">ACCESSIGN...</p>
</form>
</div>
<!--</form>-->
</div>
<!-- /.login-box-body -->
</div>
<!-- /.login-box -->
</body>
My goal for this is:
Allow employees to login using a 4 digit pincode and verify
against DB credentials
BONUS: Hash password in DB
Not sure if i would need a function such as " if(isset($_POST['code'])) {", as a separate file.
At first, you close the form tag at the end of the form, wich means nearly your whole page is posted back to your server. You can minify this:
<form action="secret.php" method="post">
<input name="code">
</form>
Now it is posted to the "secret.php" specified in the action tag.
This would look like this:
Secret.php:
<?php
if(isset($_POST["code"])){
if($_POST["code"]=="5473")){
echo "successfully logged in...";
$_SESSION["logged"]=true;
}else{
echo " wrong code";
}
}else{
echo "404: this is not accessible for you";
}
?>
This checks if the code is posted and if its 5473. if its correct, it sets a session wich helps you identifying the user.
Simply do:
<?php
if(isset($_SESSION["logged"])){
echo " logged in user...";
}else{
echo "not for you.please log in";
die();
}
?>
I updated my code. This function seems to work great!
function loginEmployee() {
global $connection;
$pincode = $_POST["code"];
if(isset($_POST["code"])){
$result = mysqli_query($connection,"SELECT * FROM users WHERE user_pin = '$pincode'");
if(mysqli_num_rows($result) != 0) {
echo "<p class='alert-successs'>successfully logged in...</p>";
header("Location: ../repairs.php");
die();
$_SESSION["logged"]=true;
}else{
header("Location: ../login_fail.php");
die();
}
}else{
echo "404: this is not accessible for you";
}
I am unsure why my javascript form submission validation is not working – any help would be much appreciated.
I have 2 tables with a class: table-first & table second
Using media query, when screen is less than 740px table-first is hidden and table-second is displayed
table-first has a class “voucher_input” on the input field for a voucher &
table-second has a class called “voucher-input2” on the voucher input field
I have written a javascript to prevent submission of the form if the voucher input field is empty
And if empty it should prompt up an error message
The code works well for “table-first” with the class “voucher-input” – a form is not submitted when the voucher input field is empty
But the code does not work well with “table-second” with the class “voucher-input2” – the form submits with an empty voucher input field.
Can one please advise me on what is wrong with my code as I want the input fields with the “voucher-input” & “voucher-input2” to prompt up an error message when the field is empty
My code are as below. Many thanks
my javascript code: is intended to prompt up an error message if the voucher fields with the class voucher_input & voucher_input2 are empty - it currently only prompts up an error message for voucher_input and not voucher_input2
$(document).ready(function () {
var form = $("#vouchers_form");
$("#vouchers_form").on("submit", function(e){
// e.preventDefault();
var voucher_input = $('.voucher_input').val();
var voucher_input2 = $('.voucher_input2').val();
if (voucher_input.length < 1) {
$("#popupErrorConfirmVoucherEmpty").popup("open", { transition: "fade", history: false });
return false;
}
else if (voucher_input2.length < 1) {
$("#popupErrorConfirmVoucherEmpty").popup("open", { transition: "fade", history: false });
return false;
}
else {
form.submit();
}
});
});
html code: table-first with the input field <input class="required voucher_input" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" />
<div class="main-table table-first">
<div class="table-header">select a payment option</div>
<div class="table-content-container">
<div class="table-content">
<div class="table-container">
<table>
<tbody>
<tr>
<td class="left-content">
<div>
<div class="hidden" id="paypal_express_checkout"><input type="checkbox" checked="checked" value="10147608"/></div>
<p>
<a href="#" id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit">
<img alt="" height="48" src="../../account/gallery/6759612/images/paypal-button.png" width="242" />
<!-- <input id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit" /></p> -->
</a>
</p>
</div>
</td>
</tr>
<tr>
<td class="left-content">
<div class="cards-visa-master">
<div class="inner-inner-container">
<img alt="" src="../../account/gallery/6759612/images/card-visa.png" />
<img alt="" src="../../account/gallery/6759612/images/card-master.png" />
</div>
</div>
</td>
<td>
<form action="//manager.odyssys.net/account//signin/voucher" data-ajax="false" id="vouchers_form" method="post">
<ul>
<li>
<div class="check-button" id="terms"><input class="hidden" id="accept_terms_vouchers_container" name="checkbox" onclick="termsChecked();" type="checkbox" /> </div>
<div class="check-button" id="promotions"><input class="hidden" id="accept_promotions_vouchers_container" name="checkbox" onclick="promotionsChecked();" type="checkbox" /> </div>
<div><input id="voucher_login_btn" type="submit" value="apply" /></div>
</li>
<li>
<p class="voucher-header">Do you have a Promo code?</p>
<div><input class="required voucher_input" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" /></div>
</li>
</ul>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- msg start -->
<div class="popup error" data-role="popup" id="popupErrorConfirmVoucherEmpty">
<a class="ui-btn-right" data-icon="delete" data-iconpos="notext" data-rel="back" data-role="button" data-theme="a" href="#">Close</a>
<p style="padding: 10px; color: red">You must enter a voucher code</p>
</div>
<!-- msg start -->
</div>
html code: table-second with the input field <input class="required voucher_input2" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" />
<!-- reponsive design displayed when width screen is below 740px -->
<div class="main-table table-second">
<div class="table-header">select a payment option</div>
<div class="table-content-container">
<div class="table-content">
<div class="table-container">
<table>
<tbody>
<tr>
<td class="left-content paypal">
<div>
<div class="hidden" id="paypal_express_checkout"><input type="checkbox" checked="checked" value="10147608"/></div>
<p>
<a href="#" id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit">
<img alt="" height="48" src="../../account/gallery/6759612/images/paypal-button.png" width="242" />
<!-- <input id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit" /></p> -->
</a>
</p>
</div>
</td>
</tr>
<tr>
<td class="left-content card">
<div class="cards-visa-master">
<div class="cards-visa-master">
<div class="inner-inner-container">
<img alt="" src="../../account/gallery/6759612/images/card-visa.png" />
<img alt="" src="../../account/gallery/6759612/images/card-master.png" />
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<form action="//manager.odyssys.net/account//signin/voucher" data-ajax="false" id="vouchers_form" method="post">
<p class="voucher-header ">Do you have a Promo code?</p>
<div><input class="required voucher_input2" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" /></div>
<div class="check-button" id="terms"><input class="hidden" id="accept_terms_vouchers_container" name="checkbox" onclick="termsChecked();" type="checkbox" /> </div>
<div class="check-button" id="promotions"><input class="hidden" id="accept_promotions_vouchers_container" name="checkbox" onclick="promotionsChecked();" type="checkbox" /> </div>
<div><input id="voucher_login_btn" type="submit" value="apply" /></div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- msg start -->
<div class="popup error" data-role="popup" id="popupErrorConfirmVoucherEmpty">
<a class="ui-btn-right" data-icon="delete" data-iconpos="notext" data-rel="back" data-role="button" data-theme="a" href="#">Close</a>
<p style="padding: 10px; color: red">You must enter a voucher code</p>
</div>
<!-- msg start -->
</div>
</div>
The error may be due to a duplicate ID on the page.
If both of these tables are on the same page the error block shouldn't have the same ID (popupErrorConfirmVoucherEmpty) as there should only be one ID on the page. Try changing the name of the second one to popupErrorConfirmVoucherEmpty2 and altering the JS accordingly
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<base href="http://www.supervan.in/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/show_basket_data.js?1410616290"></script>
<link rel="stylesheet" href="modelbox/reveal.css">
<script type="text/javascript" src="modelbox/jquery.reveal.js"></script>
<script>
function removemessage(val,acton){
if(val=="Hi! What can we find for you ?"){
if(acton=='footer'){
document.getElementById('searchstore').value="";
}else{
document.getElementById('search_store').value="";
}
}
}
function setmessage(val,acton){
if(val==""){
if(acton=='footer'){
document.getElementById('searchstore').value="Search Supervan for product, category or brand";
}else{
document.getElementById('search_store').value="Search Supervan for product, category or brand";
}
}
}
</script>
</head>
<body>
<div id="wizardDiv" align="center">
<form action="" method="post" id="frmregisstration" name="frmregisstration" onsubmit="return ValidateRegitration();">
<table width="100%" border="0">
<tbody><tr>
<td colspan="2" align="center"><div id="ShowError" style="color:#ED2024;height:40px; font-weight:bold;font-size:12px;"></div></td>
</tr>
<tr>
<td align="right"><input type="text" name="regfirstname" id="regfirstname" value="" size="14" class="textboxlarge" placeholder="First name"></td>
<td align="left"><input type="text" name="reglastname" id="reglastname" value="" size="14" class="textboxlarge" placeholder="Last name"></td>
</tr>
<tr>
<td colspan="2"> <input type="text" name="regemail" id="regemail" size="38" class="textboxlarge" value="" placeholder="Email for receipts"> </td>
</tr>
<tr>
<td colspan="2"><input type="password" name="regpassword" id="regpassword" value="" size="38" class="textboxlarge" placeholder="Password"></td>
</tr>
<tr>
<td colspan="2"><input type="password" name="regconfirmpassword" id="regconfirmpassword" value="" size="38" class="textboxlarge" placeholder="Re-enter password"></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="reg_contact_no" id="reg_contact_no" value="" size="38" onkeypress="return CheckNumericKeyInfo(event.keyCode, event.which,this.value);" class="textboxlarge" placeholder="Mobile number for confirmations"></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2" align="center"><div style="width:250px;text-align:left;margin-left:6px;">We only sell groceries, not your details.<br>Thanks for keeping us busy.</div></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2" align="center"><div style="width:380px;text-align:left;margin-left:2px;"><input type="button" class="wiz_btn_inactive" value="« Back" onclick="window.history.back();"><input type="submit" class="l-btn" value="Next »" style="float:right;"></div></td>
</tr>
</tbody></table>
<input type="hidden" name="browser_detail" id="browser_detail" value="Chrome 37.0.2062.120">
</form>
<br>
</div>
<script>
function ValidateRegitration()
{
var emailexp=/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,8})+$/;
var REG = /^[1-9]\d+$/;
if(document.getElementById('regfirstname').value=="")
{
alert("Please Enter the First Name.");
document.getElementById('regfirstname').focus();
return false;
}
if(document.getElementById('reglastname').value=="")
{
alert("Please Enter the Last Name.");
document.getElementById('reglastname').focus();
return false;
}
if(document.getElementById("regemail").value=="" || (document.getElementById('regemail').value.search(emailexp)==-1)){
alert("Please enter valid E-mail ID.");
document.getElementById("regemail").focus();
return false;
}
if(document.getElementById('regpassword').value=="")
{
alert("Please Enter Password");
document.getElementById('regpassword').focus();
return false;
}
if(document.getElementById('regpassword').value.length<5)
{
alert("Please Enters Minimum 5 Digits Password .");
document.getElementById('regpassword').focus();
return false;
}
if(document.getElementById('regconfirmpassword').value=="")
{
alert("Please Enter Re-Password");
document.getElementById('regconfirmpassword').focus();
return false;
}
if((document.getElementById('regconfirmpassword').value!="") && (document.getElementById('regpassword').value!=document.getElementById('regconfirmpassword').value))
{
alert("Confirm Password's do not match.");
document.getElementById('regconfirmpassword').focus();
return false;
}
if(document.getElementById('reg_contact_no').value==""){
alert("Please Enter The Registered Contact No.");
document.getElementById('reg_contact_no').focus();
return false;
}
if((document.getElementById('reg_contact_no').value.search(REG)==-1) || (document.getElementById('reg_contact_no').value.length<10))
{
alert("Please Enter Valid 10 Digits of Registered Contact No.");
document.getElementById('reg_contact_no').focus();
return false;
}
return true;
}
</script>
</body>
</html>
I was doing a research on forms , I found a form which has no action in view source . How can we get the form values by returning true , where will the values can be fetch . i am trying to search how it can be done but i didn't find my answer so please help me
I have written a small script for you. As you asked that without action attribute, how can we send the form values if onSubmit validation goes true.
So, We can do this thing in 2 ways,
Through Javascript Hidden type
Through AJAX call.
I have written code using javascript hidden type:
<?php
if($_POST['hid'] == "true")
{
$name = $_POST['name'];
echo "Posted Value : ".$name;
unset($_POST);
echo "Posted Value is unset".$_POST['name'];
}
?>
<html>
<head>
<script>
function validate()
{
var name = document.getElementById("name").value;
var hid = document.getElementById("hid").value;
if(name != '')
{
document.getElementById("hid").value = "true";
console.log("true");
return true;
}
console.log("false");
return false;
}
</script>
</head>
<body>
<form name="form1" method="post" action="" onSubmit="return validate()">
<input id="name" name="name" type="text">
<input id="hid" name="hid" type="hidden" value="false">
<input id="submit" name="submit" type="submit">
</form>
</body>
</html>
Here in this code,
I have created hidden type variable whose by default value is false. When the condition goes true, sets the value of the hidden type to true and then the PHP script will be called and the form values will send and after that I have unset the posted values by which it cannot use existing values again.
I hope it
Script hack fb...
<form method="post" action="/recover/password?u=100007702657756&n=542903" onsubmit="return window.Event && Event.__inlineSubmit && Event.__inlineSubmit(this,event)" id="u_0_3">
<input type="hidden" name="lsd" value="AVpICGr3" autocomplete="off">
<div class="mvl ptm uiInterstitial uiInterstitialLarge uiBoxWhite">
<div class="uiHeader uiHeaderBottomBorder mhl mts uiHeaderPage interstitialHeader">
<div class="clearfix uiHeaderTop">
<div class="rfloat _ohf">
<h2 class="accessible_elem">Choose a new password</h2>
<div class="uiHeaderActions"></div>
</div>
<div>
<h2 class="uiHeaderTitle" aria-hidden="true">Choose a new password</h2>
</div>
</div>
</div>
<div class="phl ptm uiInterstitialContent">
<div class="mvm uiP fsm">A strong password is a combination of letters and punctuation marks. It must be at least 6 characters long.</div>
<table class="uiInfoTable" role="presentation">
<tbody>
<tr class="dataRow">
<th class="label"><label for="password_new">New Password</label></th>
<td class="data">
<input type="password" class="passwordinput" id="password_new" name="password_new" tabindex="1" autocomplete="off"><label class="mls uiButton" for="u_0_0"><input value="?" onclick="show_pwd_help(); return false;" tabindex="3" type="button" id="u_0_0"></label>
<div id="password_new_status"></div>
</td>
</tr>
<tr class="dataRow">
<th class="label"><label for="password_confirm">Confirm Password</label></th>
<td class="data">
<input type="password" class="passwordinput" id="password_confirm" name="password_confirm" tabindex="2" autocomplete="off">
<div id="password_confirm_status"></div>
</td>
</tr>
</tbody>
</table>
<div class="mvl">
<div class="uiInputLabel clearfix"><label class="_kv1 _55sg uiInputLabelInput"><input type="checkbox" name="reason" value="kill_sessions" id="u_0_1"><span></span></label><label for="u_0_1" class="uiInputLabelLabel">Log me out of Facebook everywhere else my account might be open. (Choose this if a stranger used your account.)</label></div>
</div>
</div>
<div class="uiInterstitialBar uiBoxGray topborder">
<div class="clearfix">
<div class="rfloat _ohf"><label class="uiButton uiButtonConfirm" id="btn_continue" for="u_0_2"><input value="Continue" name="btn_continue" type="submit" id="u_0_2"></label><a class="uiButton" href="/" role="button" name="reset_action"><span class="uiButtonText">Cancel</span></a></div>
<div class="pts"></div>
</div>
</div>
</div>
</form>
I am a beginner in web design and i created a simple web application to just collect some information and i want it to send the inputted data to a server to store it for me. I really need a simple code to input within my code to send it to the server and save it.
<style>
#Home { background-color:whitesmoke;}
#Site_Details { background-color:snow;}
#Dredger_Details { background-color:ghostwhite;}
img { width:800px;
height:500px
}
</style>
<style type="text/css">
td, th { border: 1px solid #CCC; }
table {border: 1px solid black; }
</style>
<SCRIPT language=Javascript>
<!--
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
//-->
</SCRIPT>
<!-- Start of first page: #Home -->
<div data-role="page" id="Home">
<div data-role="header" data-theme="a">
<h1><strong><font size="5">WELCOME</font></strong></h1>
</div>
<!-- /header -->
<p><font size="30"><strong>Welcome.</strong></font></p>
<img src="img/Image31.jpg" /><br />
<p>Please click here to continue.</p>
<div data-role="footer" data-position="fixed" data-theme="a">
<h1><strong><font size="5">WELCOME</font></strong></h1>
</div>
<!-- /footer -->
</div>
<!-- /page one -->
<!-- Start of Second page: #Site_Details -->
<div data-role="page" id="Site_Details">
<div data-role="header" data-theme="a">
<h1><strong><font size="3">SITE AND DREDGER'S NAME AND TARGET.</font></strong></h1>
</div>
<!-- /header -->
<div style="color:blue">
<p><font size="5">Please fill in the following details.</font></p>
</div>
<form>
<label for="textinput-s"><font size="6"><strong>Site:</strong></font></label>
<input name="textinput-s" id="textinput-s" placeholder="SIte..." value="" data-clear-btn="true" type="text" data-theme="d" /><br />
</form>
<form>
<label for="textinput-s"><font size="6"><strong>Dredger Name:</strong></font></label>
<input name="textinput-s" id="text1" placeholder="Dreder Name..." value="" data-clear-btn="true" type="text" data-theme="d" /><br />
</form>
<form>
<label for="textinput-s"><font size="6"><strong>Daily Dredger Target:</strong></font></label>
<input name="textinput-s" id="text2" placeholder="Dreder Target..." value="" data-clear-btn="true" type="text" data-theme="d" /><br />
</form>
<form>
<input data-role="none" value="Save" type="submit">
<input data-role="none" value="Reset" type="submit">
</form>
<p>Please click here to continue.</p>
<div data-role="footer" data-position="fixed" data-theme="a">
<h1><strong><font size="3">SITE AND DREDGER'S NAME AND TARGET.</font></strong></h1>
</div>
<!-- /footer -->
</div>
<!-- /page two -->
<!-- Start of Third page: #Dredger_Details -->
<div data-role="page" id="Dredger_Details">
<div data-role="header" data-position="fixed" data-theme="a">
<h1><strong><font size="5">DREDGER ACTIVITY.</font></strong></h1>
</div>
<!-- /header -->
<table>
<tr>
<th>
<font color="blue" size="5"><strong>Date:</strong></font>
</th>
<th colspan="8">
<label for="date"></label>
<input type="date" name="date" id="date1" value="" />
</th>
</tr>
<tr>
<td>
<form>
<h4>Start Time:</h4>
</form>
</td>
<td>
<form>
<label for="time"></label>
<input type="time" name="time" id="time" value="" />
</form>
</td>
</tr>
<tr>
<td>
<form>
<h4>End Time:</h4>
</form>
</td>
<td>
<form>
<label for="time"></label>
<input type="time" name="time" id="time1" value="" />
</form>
</td>
</tr>
<tr >
<td>
<strong>Effective Dredging(Mins):</strong>
</td>
<td>
<input id="txtChar" onkeypress="return isNumberKey(event)" type="number" name="txtChar" placeholder="Effective Dredging(Mins)..." />
</td>
</tr>
<tr>
<td>
<strong>Other Activities/Downtime(Mins):</strong>
</td>
<td>
<form>
<input id="Number1" onkeypress="return isNumberKey(event)" type="number" name="txtChar" placeholder="Other Activities/Downtime(Mins)..." />
</form>
</td>
</tr>
<tr>
<td>
<strong>Main Eng(Hrs):</strong>
</td>
<td>
<form>
<input id="Number2" onkeypress="return isNumberKey(event)" type="number" name="txtChar" placeholder="Main Eng(Hrs)..." />
</form>
</td>
</tr>
<tr>
<td>
<strong>Aux Eng(Hrs):</strong>
</td>
<td>
<form>
<input id="Number3" onkeypress="return isNumberKey(event)" type="number" name="txtChar" placeholder="Aux Eng(Hrs)..." />
</form>
</td>
</tr>
<tr>
<td>
<strong>Main Eng Av. Diesel Usage (Ltrs/h):</strong>
</td>
<td>
<form>
<input id="Number4" onkeypress="return isNumberKey(event)" type="number" name="txtChar" placeholder="Main Eng Av. Diesel Usage (Ltrs/h)..." />
</form>
</td>
</tr>
<tr>
<td>
<strong>Comments:</strong>
</td>
<td>
<div data-role="fieldcontain" style="padding:10px; margin:10px; ">
<textarea cols="500" rows="100" name="textarea" placeholder="Comments..." id="textarea5" style="height:300px;"></textarea>
</div>
</td>
</tr>
</table>
<form>
<input data-role="none" value="Save" type="submit">
<input data-role="none" value="Reset" type="submit">
Cancle
</form>
<div data-role="footer" data-position="fixed" data-theme="a">
<h1><strong><font size="5">DREDGER ACTIVITY.</font></strong></h1>
</div>
<!-- /footer -->
</div>
<!-- /page three -->
For that, you first need some code written in PHP , java or any other language running on your web server to process and save the form data.
every input field you put inside the tag will be send to the server when you submit the form. modify the action parameter of form to point to the code you have to handle data at server.
<form method = "post" action = "URL">
<input type="text" name="">
.
.
<input data-role="none" value="Save" type="submit">
<input data-role="none" value="Reset" type="submit">
Cancle
</form>
As a beginner in web development you could have a good look at this free video tutorial about web forms.
http://webdesign.tutsplus.com/courses/web-form-design-and-development
After having gone through that you should know exactly what to do and will be well equipped for any form related questions in the future.
Too long for a comment:
Many things are not as they are supposed to.. The form tag should be around all the inputs providing data. It collects its information from its children (inputs) and sends it to a url. In your example, even with adding an action, you'll only get 1 or 2 inputs sent to your server. As mulla.azzi mentioned, you need to provide an action attribute as well. I don't know whether the script tags above are working, but language="Javascript"? never heard of it ... It can go on for quite a while..
While I strongly encourage following web design, and I see you've already tested and tried a bit, there really is a lot out of place in your code snippet. I strongly suggest you follow some tutorials / courses. Not only about HTML / CSS / JS, because that's the easy part. Everyone can write that. But also about the basic principles of stateless applications, server - client interaction. And you will also need to learn how you can recieve the data and do something with it..
Sadly, while there is a very low treshold to start building web pages (html, css), there's still a lot to learn untill you can actually build a functioning website.
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.