press enter to submit form - html

<HTML>
<HEAD>
<TITLE>Login</TITLE>
<script language="JavaScript" type="text/javascript">
<!--- PASSWORD PROTECTION SCRIPT
function TheLogin() {
var password = '123';
if (this.document.login.pass.value == password) {
top.location.href="correct.php";
}
else {
location.href="incorrect.html";
}
}
// End hiding --->
</script>
<style type="text/css">
BODY { COLOR: #0000FF; FONT: 16px verdana, arial, sans-serif; font-weight: normal }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</HEAD>
<BODY bgColor="#FFFFFF">
<br><br><br><br>
<center>
<p>please insert your password</p>
<form name="login" id="formid" style="margin: 0px">
<INPUT TYPE="text" NAME="pass" id="passid" size="17" onKeyDown="if(event.keyCode==13) event.keyCode=9;" style="width: 152px; margin: 5px;"><br>
<input type="button" value="Click to Login" style="width : 150px; margin: 3px; left: 183px; top: 175px;" onClick="TheLogin(this.form)" >
</form>
</center>
<br><br><br>
</BODY>
</HTML>
How can I submit a form with just the Enter key on a text input field, with having submit button?
that i want protect some page that no one can access without password
it's working with button but with "enter button" not working
so please any hep with change my code

using jquery you can do it:
$('#textbox').bind('keypress', function(e) {
if (e.which == 13) {
$('#button').click();
}
});

Related

html page not showing (only in debuging tho)

I need to display a specific html output following a condition on a variable ("tvs" a boolean).
I created the 2 html files in another spreadsheet and tested them OK.
Then I copy&pasted the samples in my much bigger spreadsheet and it doesn't work. Well, it works when i debug each 'show' functions but not in the execution of the spreadsheet.
My script goal is to detect change in a column (process info near the change occurred), then launch modal dialogs from html files (2 possible files).
GS code:
function onEdit(e) {
var celluleRef = e.range.getA1Notation()
GLOBALVAR.setProperty('CELLREF', celluleRef);
var cas = DetectCas(celluleRef) // do stuff, return cas = 0 or 1 or 2.
if (cas == 0) {
return
}
var tvs = SiTvs(celluleRef) // do stuff, return tvs as boolean.
tvs ? showPageTvs() : showPageVide();
}
function showPageTvs() {
//SpreadsheetApp.getUi().alert("cas : page tvs") //THIS SHOWS when called
var ui = SpreadsheetApp.getUi();
var htmlTvs = HtmlService.createTemplateFromFile('PageTvs')
.evaluate()
.setHeight(600);
ui.showModalDialog(htmlTvs, 'Confirmation');
}
function showPageVide() {
// SpreadsheetApp.getUi().alert("cas : page vide") //THIS SHOWS when called
var htmlVide = HtmlService.createHtmlOutputFromFile('PageVide')
.setWidth(400);
SpreadsheetApp.getUi()
.showModalDialog(htmlVide, 'Confirmation');
}
Then the html files :
PageVide.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body{
font-size:25px;
}
input.largerCheckbox {
width: 20px;
height: 20px;
}
</style>
</head>
<body>
Gamme vide, quelle est votre action ?<br><br>
<form id="myForm" onsubmit="google.script.run.processForm(this)">
<div>
<input class="largerCheckbox" type="checkbox" id="ConfP" name="ConfP">
<label for="ConfP">Confirmation totale Prod</label>
</div>
<div>
<input class="largerCheckbox" type="checkbox" id="ConfQ" name="ConfQ">
<label for="ConfQ">Confirmation totale Qls</label>
</div>
<div>
<br>
<input class="largerCheckbox" type="checkbox" id="Tvs" name="Tvs">
<label for="Tvs">TVS :</label>
</div>
<input style="font-size:25px" type="text" name="TvsText"><br><br>
<input style="font-size:25px; float: left" type="submit" value="Submit">
</form>
<input style="font-size:25px; float: right" type="button" value="Annuler" onclick="google.script.host.close()" />
</body>
</html>
PageTvs.html :
I add that function "decoupe" just add some checkboxes.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body{
font-size:25px;
}
input.largerCheckbox {
width: 20px;
height: 20px;
}
p {
text-indent: 10%;
}
fieldset {
input[type=checkbox] {
text-indent: 20%;
}
}
</style>
</head>
<body>
Gamme en TVS, quelle est votre action ?<br><br>
<form id="myForm" onsubmit="google.script.run.processForm(this)">
<div>
<input type="checkbox" class="largerCheckbox" id="ConfP" name="ConfP">
<label for="ConfP">Confirmation totale Prod</label>
</div>
<div>
<input type="checkbox" class="largerCheckbox" id="ConfQ" name="ConfQ">
<label for="ConfQ">Confirmation totale QLS</label>
</div>
<p>Confirmation partielle :
<fieldset>
<?!= decoupe() ?>
</p>
</fieldset>
<br>
<input style="font-size:25px; float: left" type="submit" value="Valider">
</form>
<input style="font-size:25px; float: right" type="button" value="Annuler" onclick="google.script.host.close()" />
</body>
</html>
I need to understand why html doesn't show (except in debug) and if anything hurt your eyes, tell me !
I think the problem is that you do not have permission to call Ui.showModalDialog() because onedit is a simple trigger.
The following works on an installable trigger but not on a simple trigger:
function showMyTestDialog1() {
SpreadsheetApp.getUi().showModalDialog(HtmlService.createHtmlOutputFromFile('ah1'), 'Test1');
}
function showMyTestDialog2() {
SpreadsheetApp.getUi().showModalDialog(HtmlService.createHtmlOutputFromFile('ah1'), 'Test2');
}
function onMyEdit(e) {
e.source.toast('entry');
const a1 = e.range.getA1Notation();
const sh = e.range.getSheet();
if (sh.getName() == 'Sheet2' && e.range.columnStart == 1 && e.range.rowStart > 1) {
e.source.toast('cond')
let v = e.range.rowStart % 3 == 0;
v ? showMyTestDialog1() : showMyTestDialog2();
}
}
If you had checked your execution log you would have seen an error like this:
Exception: You do not have permission to call Ui.showModalDialog. Required permissions: https://www.googleapis.com/auth/script.container.ui
at showMyTestDialog2(ag1:5:26)
at onEdit(ag1:16:31)
I found something wrong with your style in PageTvs.html
<style>
body{
font-size:25px;
}
input.largerCheckbox {
width: 20px;
height: 20px;
}
p {
text-indent: 10%;
}
fieldset {
input[type=checkbox] {
text-indent: 20%;
}
}
</style>
You should put fieldset input[type=checkbox] next to each other.
Like this:
fieldset input[type=checkbox] {
text-indent: 20%;
}
w3schools: css selectors

Changing button background color when a certain condition has been met

I want the button to change its background color only when the input text length is 10, when I hover over it.
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cafteria details</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Cafeteria registration</h2>
<form class="details">
Organization:<div id="org"><input type="checkbox" id="cb1" >ID no: <input type="number" id="org_number" style="visibility: hidden"><br><br>
<input type="checkbox" id="cb2" >Mobile No: <input type="tel" id="ph_number" style="visibility: hidden" required></div><br><br>
</form>
<button id="button" onmouseover="hovar()">Register</button>
<script src="back_end.js" async></script>
</body>
</html>
css:
#button{
font-size:20px;
margin-left: 600px;
border-radius: 8px;
}
#button:hover{
background-color: lightsalmon;
color: aquamarine;
}
javascript:
function hovar(){
var phone=document.getElementById("ph_number").value;
var btn=document.getElementById("button");
if (phone.length!=10){
btn.onmouseover.style.backgroundColor="lightsalmon"
}
else{
btn.onmouseover.style.backgroundColor="chartreuse"
btn.onmouseover.style.color="black"
}
}
But I keep getting this error in the javascript:
**Uncaught TypeError: Cannot set property 'backgroundColor' of undefined**
What am I doing wrong here?
you want to apply a "style" property to an event (onmouseover)
function hovar()
{
var phone = document.getElementById("ph_number").value;
var btn = document.getElementById("button");
if (phone.length!=10)
{
btn.style.backgroundColor="lightsalmon" // remove onmouseover
}
else
{
btn.style.backgroundColor="chartreuse"
btn.style.color="black"
}
}
I think this is what you are looking for (?):
const phone = document.getElementById("ph_number")
, btn = document.getElementById("button")
;
phone.oninput = () =>
{
if (phone.value.length != 10)
{
btn.style.setProperty('--hoverBG', 'lightsalmon')
btn.style.setProperty('--hoberColor', 'aquamarine')
}
else
{
btn.style.setProperty('--hoverBG', 'chartreuse')
btn.style.setProperty('--hoberColor', 'black')
}
}
#button {
--hoverBG : lightsalmon;
--hoberColor : aquamarine;
font-size : 20px;
margin-left : 50px;
border-radius : 8px;
}
#button:hover{
background-color : var(--hoverBG);
color : var(--hoberColor);
}
input[type="checkbox"] + label + input {
visibility: hidden;
}
input[type="checkbox"]:checked + label + input {
visibility: visible;
}
<h2>Cafeteria registration</h2>
<form class="details">
Organization:
<div id="org">
<input type="checkbox" id="cb1">
<label for="cb1">ID no : </label>
<input type="number" id="org_number" >
<br><br>
<input type="checkbox" id="cb2">
<label for="cb2">Mobile No: </label>
<input type="tel" id="ph_number" placeholder="phone 10c">
</div>
<br><br>
</form>
<button id="button">Register</button>

How to display the html div so that after form submit the error messgae is displayed automatically

I have a form that validates whether the username and password is correct or not but it does not show the error messages unless i click on the form again.The form is inside a html div tag, I want to know how to style the div with css so that the error messages can be displayed automatically after form submit. Here is my code
<h3 class="registration-header">
Log in. </h3>
<div class="registration-box-info"><span>
Please enter username and password </span></div>
<form action="/" charset="UTF-8" method="post">
<div class="error-message alert-danger">
<span>Sorry, unrecognized username or password.Have you forgotten your password?</span>
</div>
The error message is not displayed automatically after inserting wrong input and so I would be grateful if you can tell me how to style the div using css to make it visible after submitting wrong input
If you want to do it without js, you could use
:valid
:invalid
CSS pseudo class and style the border of the input accordingly.
You could also attach a pattern to the validation.
Check: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation
For checking wheather username and other filed are empty or not, you have to just add required inside the tag like <input type="text" name="full-name" id="full-name" placeholder="Name" required /> An for validation visit https://www.w3schools.com/js/js_validation.asp
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #eee;
font-family: 'helvetica neue', helvetica, arial, sans-serif;
color: #222;
}
#form {
max-width: 700px;
padding: 2rem;
box-sizing: border-box;
}
.form-field {
display: flex;
flex-wrap: wrap;
margin: 0 0 1rem 0;
}
label, input {
width: 70%;
padding: 0.5rem;
box-sizing: border-box;
justify-content: space-between;
font-size: 1.1rem;
}
label {
text-align: right;
width: 30%;
}
input {
border: 2px solid #aaa;
border-radius: 2px;
}
.error-message {
flex: 0 0 100%;
margin-left: 30%;
color: red;
}
<form method="post" action="/" id="form" class="validate">
<div class="form-field">
<label for="full-name">Full Name</label>
<input type="text" name="full-name" id="full-name" placeholder="Name" required />
</div>
<div class="form-field">
<label for="email-input">Email</label>
<input type="email" name="email-input" id="email-input" placeholder="test#gmail.com" required />
</div>
<div class="form-field">
<label for="password-input">Password</label>
<input type="password" name="password-input" id="password-input" required />
</div>
<div class="form-field">
<label for=""></label>
<input type="submit" value="Sign Up" />
</div>
</form>
If you can use jquery, and if you want customise your kind of error,
like, if you enter, 'map', derive' or 'glossary, you have different message.
If you enter '???' or anything else you'll have your message 'Sorry, unrecognized...'
You can use :
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {background-color: red;}
#div2 {background-color: blue;}
#div3 {background-color: black;
color: white;}
#error {background-color: red;}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<h3 class="registration-header">
Log in. </h3>
<div class="registration-box-info"><span>
Please enter username and password </span></div>
<!-- form action="/" charset="UTF-8" method="post" -->
<input type="text" placeholder="ENTER COMMAND" />
<div id="div1">div1 : you entered the log 'map'</div>
<div id="div2">div2 : you entered the log 'derive'</div>
<div id="div3">div1= : you entered the log 'glossary'</div>
<div id="error"><span>Sorry, unrecognized username or password.Have you forgotten your password?</span></div>
<script>
$(document).ready(function() {
// Hide both <div> by default
$('#div1').hide();
$('#div2').hide();
$('#div3').hide();
$('#error').hide();
// Check on keydown
$('input').keyup(function (e) {
if (e.keyCode == 13) {
var value = $(this).val();
$('#div1').hide();
$('#div2').hide();
$('#div3').hide();
$('#error').hide();
if (value == 'map') { // If input value is div1
$('#div1').slideDown();
} else if (value == 'derive') { // If input value is div2
$('#div2').slideDown();
} else if (value == 'glossary') { // If input value is div3
$('#div3').slideDown();
} else if (value != '') { // If input value is wrong
//$('#error').html(value + " is an incorrect input value");
$('#error').slideDown();
}
}
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {background-color: red;}
#div2 {background-color: blue;}
#div3 {background-color: black;
color: white;}
#error {background-color: red;}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<h3 class="registration-header">
Log in. </h3>
<div class="registration-box-info"><span>
Please enter username and password </span></div>
<form action="submit_form.php" method="post" id="form_1" charset="UTF-8" >
<input id="submit_form" type="text" placeholder="ENTER COMMAND" />
</form>
<div id="div1">div1 : you entered the log 'map'</div>
<div id="div2">div2 : you entered the log 'derive'</div>
<div id="div3">div1= : you entered the log 'glossary'</div>
<div id="error"><span>Sorry, unrecognized username or password.Have you forgotten your password?</span></div>
<script>
$(document).ready(function() {
// Hide both <div> by default
$('#div1').hide();
$('#div2').hide();
$('#div3').hide();
$('#error').hide();
// Check on keydown
$('input').keyup(function (e) {
if (e.keyCode == 13) {
var value = $(this).val();
$('#div1').hide();
$('#div2').hide();
$('#div3').hide();
$('#error').hide();
if (value == 'map') { // If input value is div1
$('#div1').slideDown();
} else if (value == 'derive') { // If input value is div2
$('#div2').slideDown();
} else if (value == 'glossary') { // If input value is div3
$('#div3').slideDown();
} else if (value != '') { // If input value is wrong
//$('#error').html(value + " is an incorrect input value");
$('#error').slideDown();
}
}
});
});
$('#submit_form').addEventListener('click', function (event) {
// Prevents form from submitting
event.preventDefault();
$.ajax({
type: "POST",
url: "submit_form.php",
dataType: "json",
data: $('#form_1').serialize(),
success: function (json) {
$('.message_center').html('');
if(json['success']) {
$('.message_center')
.html('<div class="row">'+
' <div class="col-md-12">'+
' <div class="alert alert-success alert-dismissible">'+
' <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'+
' <h4><i class="icon fa fa-check"></i> Success!</h4>'+
' '+json['success']+''+
' </div>'+
' </div>'+
' </div> ');
}
if(json['error']) {
var html='';
$.each( json['error'], function( key, value ) {
html += value+'<br>';
});
$('.message_center')
.html('<div class="row">'+
' <div class="col-md-12">'+
' <div class="alert alert-warning alert-dismissible">'+
' <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'+
' <h4><i class="icon fa fa-warning"></i> Error! There was a problem.</h4>'+
' '+html+''+
' </div>'+
' </div>'+
' </div> ');
}
}
});
});
</script>
</body>
</html>

Styling up hidden input

I'm trying to style up a hidden input field, but I'm not getting it quite right.
It may sound strange trying to style up an input box that's hidden - reason being is that the text in those fields are shown upon clicking the submit button, and I'd like to change the font and colour so it matches the rest of the page.
Code below (I have just removed the company details in URLs)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/base-asbestos.css">
<link rel="stylesheet" href="css/responsive-widths.css">
<link rel="stylesheet" href="css/form.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/responsive-layout-asbestos.css">
<script language="JavaScript">
function updateAuthor(theForm) {
if (theForm.extensionField_Name) {
if (theForm.extensionField_Name.value != "") {
theForm.author.value = theForm.extensionField_Name.value;
theForm.extensionField_Name.name = 'extensionField_h_Name';
return (true);
}
}
if (theForm.extensionField_Email) {
if (theForm.extensionField_Email.value != "") {
theForm.author.value = theForm.extensionField_Email.value;
theForm.extensionField_Email.name = 'extensionField_h_Email';
return (true);
}
}
return (true);
}
</script>
<link href='//fonts.googleapis.com/css?family=Signika:400,300,600,700' rel='stylesheet' type='text/css'>
<style type="text/css">
.chat {
color: #404040;
font-weight: 700;
font-size: 1.2em;
font-family: 'Signika', sans-serif;
}
input[type=submit] {
color: #404040;
font-weight: 700;
font-size: 0.95em;
font-family: 'Signika', sans-serif;
}
chat2 {
color: #25ab9a;
font-weight: 700;
font-size: 0.95em;
font-family: 'Signika', sans-serif;
}
</style>
</head>
<body class="intenal standard_colours" style="position: relative; top: 0;">
<div class="chat">
<form action="https://test.uk/ccp/chat/form/100000" method="post" onsubmit="return updateAuthor(this)">
<style type="text/css">
span {
display: inline-block;
width: 120px;
}
</style>
<span>Name:</span><input type="text" name="extensionField_Name" /><br /><br>
<span>Email:</span><input type="text" name="extensionField_Email" /><br /> <br>
<span>Phone number:</span><input type="text" name="extensionField_PhoneNumber" /><br /><br>
<span>Category:</span>
<select name="extensionField_ccxqueuetag">
<br />
<option value="Chat_Csq7">General</option>
</select><br><br />
<input type="submit" value="Submit" /><input type="hidden" name="author" value="Customer" /><br />
<input type="hidden" name="title" value="ccx chat" /><br />
<input type="hidden" name="extensionField_h_widgetName" value="ChatGeneral" /><br />
<!-- The following optional, hidden fields are available in order to customize the Customer Chat user interface.
Unlike other extension fields, these are not added to the social contact, and therefore do not display in the Agent Chat user interface.-->
<input type="hidden" name="extensionField_chatLogo" value="https://tes.t/blank.jpg"><br />
<input type="hidden" name="extensionField_chatWaiting" value="Welcome. Please wait while we connect you to a customer care representative.">
<input type="hidden" name="extensionField_chatAgentJoinTimeOut" value="All customer care representatives are busy. Please wait or try again later.">
<input type="hidden" name="extensionField_chatError" value="Sorry, the chat service is currently not available. Please try again later.">
</div>
</form>
</body>
</html>
you can use this class:
.Hidden{
display:none;
}
and you can call this class for all objects that you need to hide.
1) Add a class to those hidden inputs (let's call it "hiddenField")
2) Add whatever styles like this
.hiddenField{
font-color:red;
font-size:12px;
}
3) Call something this to make them visible
if(document.getElementById(id).getAttribute('type') == 'hidden') {
document.getElementById(id).setAttribute('type', 'text');
}
Instead use normal text box with class "hidden" having style display: none. This will hide the text box.
You can make it visible by setting display back to initial using JavaScript like
document.getElementsByName('author')[0].style.display = 'initial';
Snippet:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/base-asbestos.css">
<link rel="stylesheet" href="css/responsive-widths.css">
<link rel="stylesheet" href="css/form.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/responsive-layout-asbestos.css">
<script language="JavaScript">
function updateAuthor(theForm) {
/* Use this code to display the element */
document.getElementsByName('author')[0].style.display = 'initial';
if (theForm.extensionField_Name) {
if (theForm.extensionField_Name.value != "") {
theForm.author.value = theForm.extensionField_Name.value;
theForm.extensionField_Name.name = 'extensionField_h_Name';
return (true);
}
}
if (theForm.extensionField_Email) {
if (theForm.extensionField_Email.value != "") {
theForm.author.value = theForm.extensionField_Email.value;
theForm.extensionField_Email.name = 'extensionField_h_Email';
return (true);
}
}
return (true);
}
</script>
<link href='//fonts.googleapis.com/css?family=Signika:400,300,600,700' rel='stylesheet' type='text/css'>
<style type="text/css">
.chat {
color: #404040;
font-weight: 700;
font-size: 1.2em;
font-family: 'Signika', sans-serif;
}
input[type=submit] {
color: #404040;
font-weight: 700;
font-size: 0.95em;
font-family: 'Signika', sans-serif;
}
chat2 {
color: #25ab9a;
font-weight: 700;
font-size: 0.95em;
font-family: 'Signika', sans-serif;
}
/* Use this to hide the input text box */
.hidden {
display: none;
}
</style>
</head>
<body class="intenal standard_colours" style="position: relative; top: 0;">
<div class="chat">
<form action="https://test.uk/ccp/chat/form/100000" method="post" onSubmit="return updateAuthor(this)">
<style type="text/css">
span {
display: inline-block;
width: 120px;
}
</style>
<span>Name:</span>
<input type="text" name="extensionField_Name" />
<br/>
<br>
<span>Email:</span>
<input type="text" name="extensionField_Email" />
<br/>
<br>
<span>Phone number:</span>
<input type="text" name="extensionField_PhoneNumber" />
<br/>
<br>
<span>Category:</span>
<select name="extensionField_ccxqueuetag">
<br/>
<option value="Chat_Csq7">General</option>
</select>
<br>
<br/>
<input type="submit" value="Submit" />
<input type="text" class="hidden" name="author" value="Customer" />
<br/>
<input type="text" class="hidden" name="title" value="ccx chat" />
<br/>
<input type="text" class="hidden" name="extensionField_h_widgetName" value="ChatGeneral" />
<br/>
<!-- The following optional, hidden fields are available in order to customize the Customer Chat user interface.
Unlike other extension fields, these are not added to the social contact, and therefore do not display in the Agent Chat user interface.-->
<input type="text" class="hidden" name="extensionField_chatLogo" value="https://tes.t/blank.jpg">
<br/>
<input type="text" class="hidden" name="extensionField_chatWaiting" value="Welcome. Please wait while we connect you to a customer care representative.">
<input type="text" class="hidden" name="extensionField_chatAgentJoinTimeOut" value="All customer care representatives are busy. Please wait or try again later.">
<input type="text" class="hidden" name="extensionField_chatError" value="Sorry, the chat service is currently not available. Please try again later.">
</div>
</form>
</body>
</html>

How to get auto submiting form after entering 10 characters or numbers in the form field

This is my code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<html>
<script type="text/javascript" src="http://widgets.amung.us/tab.js"></script><script type="text/javascript">WAU_tab('itd362bk84w5', '')</script>
</html><title>EngineersHub Results Portal-It's OU & JNTU Here-Powered by Sparcsis</title>
<head background="hmm.png" id="header">
<center><img src="hmm.png" width="920" height="180"></img></center>
<link rel="stylesheet" href="ress1.css" media="screen" type="text/css" />
<style type="text/css">
.alignCenter{text-align: center;}
.alignLeft{text-align: left;}
.alignRight{text-align: right;}
.alignTopLeft{text-align: left; vertical-align: top;}
.alignBottomLeft{text-align: left; vertical-align: bottom;}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
});//]]>
</script>
</head>
<body>
<body background="hmm.png">
</td></tr></td></br>
<center><table id='mytable' cellspacing='0' border=3 align=center>
<form id="form" action="" method="post" name="result" style="align:center;">
<tr><td><p align="center"><font size="3"><b>JNTUH - B.Tech IV Year II Semester (R07) Advance Supplementary Results - July 2012</b></font></p></td></tr>
<tr><td><p align="center"><b>Last Date for RC/RV : 8th August 2012</b></p></td></tr>
<td><p align="center">Hall Ticket No :</b> <input type="text" name="id" id="id" maxlength="10" autofocus="autofocus" "></p></td>
<tr> <td align="center" colspan="3">
<script type="text/javascript">
(function (d) {
d.getElementById('form').onsubmit = function () {
d.getElementById('submit').style.display = 'block';
d.getElementById('loading2').style.display = 'block';
};
}(document));
</script>
<div id="loading2" style="display:none;"><img src="loading.gif" width="50" height="50" alt="" /></br><font color="black">Processing...All the Best</font> </div>
<input type="submit" id="submit" class='btnExample' value="Click here to get your Result"> </td></tr>
</form></br>
</table></center>
<script>
$("#id").keyup(function(){
if($(this).val().length == 10)
$('#form :submit').click();
})
</script>
</body>
</html>
In this form user will enter 10 numbers or characters then he clicks on submit to get the result,
But i want to make user to get result when he enter the 10th character or number with out clicking on submit
Please help me
AFTER EDITING
This is my Entire code... if i remove table it is working but with this code it is not working please help me
Sounds like a job for jQuery. With it is as simple as this:
$(document).ready(function() {
$("#id").keyup(function() {
if ($(this).val().length >= 10) {
$("#form").submit();
}
});
};
Of course you might want to fire an ajax request instead of submitting,
but that's up to you ...
I think that the use of JavaScript (with jQuery) will solve this one. If you attach a Javascript key press event handler to the tag and use this to count the number of characters entered. When the count reaches 10 then you can submit the form again using JavaScript.
Good luck with this.
write a callback on keyup on input, check if value has length 10, submit the form..
<form id="form" action="#" method="post" name="result" style="align:center;">
<td>
<p align="center">Hall Ticket No :</p>
<input type="text" name="id" id="input_field" maxlength="10" autofocus="autofocus" />
</td>
<td>
<input type="submit" id="submit" class='btnExample' value="Click here to get your Result">
</td>
</form>
<script>
$("#input_field").keyup(function(){
if($(this).val().length == 10)
$('#form :submit').click();
})
</script>​
Working Example