I have a page where i am disabling the button after submit for 10 seconds and if validation succeeds form is submitted. However, the form is getting submitted even though validation is returning false.
I tried using
<input type="submit">
instead of image still same issue.
Below is the code:
<html>
<head>
<script>
function enableMe(myBtn) {
myBtn.disabled = false;
}
function doValidation() {
document.getElementById('hidden1').value = 'true';
return false;
}
</script>
</head>
<body>
<form id="loginForm" method="post" action="https://www.mySite.com/authService">
<label for="userid">Username</label><br/>
<input type="text" value="" id="userid" name="userid"/>
<br/>
<label for="password">Password</label>
<br/>
<input type="password" value="" id="password" name="password"/>
<br/>
<br/>
<input type="image" id="submitBtn" src="btn_login.gif"
onsubmit="this.disabled=true; setTimeout(enableMe,10000,this); return doValidation();">
<input type="hidden" id="hidden1" name="hidden1" value="false"/>
</form>
</body>
</html>
Validation should be attached to form, not input element...
<form id="whatever" ... onsubmit="return doValidation();">
Related
I have to make a form that has a username and password but the password must be five or more characters. I have tried a lot of different methods but none have succeded.
Here's my javascript:
funtion validateForm(){
var password = document.getElementById('password').value;
if (password.length < 5)
alert("Password must be longer");
return false;
}
}
and my HTML:
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Login</title>
<script src="js/script.js" charset="utf-8"></script>
</head>
<body>
<div id="error">
</div>
<form name="formname" action="/action_page.php" onsubmit="validateForm()" method="post">
<div>
<label for="name">Username:</label>
<input id="username" name="name" type="text" required>
</div>
<div>
<label for="password">Password:</label>
<input id="password" name="password" type="password">
<input type="submit" value="Submit">
</div>
</form>
</body>
</html>
You need to use Event.preventDefault() to prevent the form submit on validation fail. And to do that you need to pass the event to your handler like onsubmit="validateForm(event)".
See the code snippet to understand how it works.
function validateForm(event) {
var password = document.getElementById('password').value;
if (password.length < 5) {
event.preventDefault(); // <--- ADDED
alert("Password must be longer");
return false;
}
}
<div id="error">
</div>
<form name="formname" action="/action_page.php" onsubmit="validateForm(event)" method="post">
<div>
<label for="name">Username:</label>
<input id="username" name="name" type="text" required>
</div>
<div>
<label for="password">Password:</label>
<input id="password" name="password" type="password">
<input type="submit" value="Submit">
</div>
</form>
Myself I am beginner and at learning stage. I would like to pass input details from one page (test1.html) to next page textarea (test2.html). attaching both html files.
test1.html(first page)
<html>
<body>
<form method="post" action="test2.html">
<label><b>Customer Name</b></label>
<input type="text" placeholder="Enter Customer Name" name="cname" id="cname" required>
<script>
function () {
localStorage.setItem('mySharedData1', document.getElementById('cname').value);
}
</script>
<button type="submit" name='submit' id='submit'>Submit</button>
<input type="checkbox" checked="checked"> Remember me
</body>
</html>
test2.html(second page)
<html>
<body>
<form method="get" action="test1.html">
<fieldset class="fieldset-auto-width">
<legend><b><font color="#0000FF">Your Bookings Are..!</font color></b></legend>
<textarea cols="35" rows="19" id="Requirement1" ></textarea>
<script type="text/javascript">
var mySharedData = localStorage.getItem('mySharedData1');
function(){
Requirement1.value =Requirement1.value+document.getElementById('mySharedData1').innerHTML+this.value+", ";
}
</script>
</fieldset>
</form>
</body>
</html>
function(){
Requirement1.value =Requirement1.value+document.getElementById('mySharedData1').innerHTML+this.value+", ";
}
This should be:
function getValue() {
var value = localStorage.getItem('mySharedData1');
document.getElementById('Requirement1').innerHTML = value;
}
You have to give a name to the function in both html pages, and actually use the onclick attribute of your button Submit. I wrote on one page only
<html>
<body>
<form method="post" action="test2.html">
<label><b>Customer Name</b></label>
<input type="text" placeholder="Enter Customer Name" name="cname" id="cname" required>
<script>
function giveMeOneName() {
localStorage.setItem('mySharedData1', document.getElementById('cname').value);
}
</script>
<button type="submit" name='submit' id='submit' onclick="giveMeOneName()">
Submit
</button>
<input type="checkbox" checked="checked"> Remember me
</body>
</html>
You need to create a function and invoke that function on click submit.
<form>
<label>
<b>Customer Name</b>
</label>
<input type="text" placeholder="Enter Customer Name" name="cname" id="cname" required>
<script>
function setValue() {
localStorage.setItem('mySharedData1', document.getElementById('cname').value);
}
</script>
<button type="submit" name='submit' id='submit' onClick="setValue()">Submit</button>
<input type="checkbox" checked="checked"> Remember me
I have a working php/mysql form submission and I'm trying to disable the submit button once the form is submitted,
HTML
<form action="" onsubmit="document.getElementById('submit-button').disabled = true;" method="post">
<p><label>Username</label>
<input id="username" type="text" name="username" value="" autofocus/></p>
<p><label>Password</label>
<input type="password" name="password" value="" /></p>
<p><label></label>
<input type="submit" id="submit-button" name="submit" value="Login" /></p>
</form>
It works fine without the onsubmit but when I add it i guess the post method isnt firing. I tried adding:
onsubmit="document.getElementById('submit-button').disabled = true; return true;"
but no luck.
Instead of using javascript. You can directly use php
<form action="" method="post">
<p><label>Username</label><input id="username" type="text" name="username" value="" autofocus/></p>
<p><label>Password</label><input type="password" name="password" value="" /></p>
<p><label></label><input type="submit" id="submit-button" name="submit" value="Login" <?php echo ('POST' == $_SERVER['REQUEST_METHOD']) ? 'disabled' : ''?>/></p>
</form>
If you post then submit button will be disabled.
It seems that your form is submitted directly, executing the 'action' tag. If you want to stay on the same form try using an AJAX request instead..
Try:
<form action="" method="post">
<p><label>Username</label>
<input id="username" type="text" name="username" value="" autofocus/></p>
<p><label>Password</label>
<input type="password" name="password" value="" /></p>
<p><label></label>
<input type="submit" id="submit-button" name="submit" value="Login" /></p>
</form>
with following script:
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$("#submit-button").on("click", function(e){
// For demo purpose
e.preventDefault();
document.getElementById("submit-button").disabled = true;
});
</script>
Using jquery,
<form action="" method="post">
<p><label>Username</label><input id="username" type="text" name="username" value="" autofocus/></p>
<p><label>Password</label><input type="password" name="password" value="" /></p>
<p><label></label><input type="submit" id="submit-button" name="submit" value="Login"/></p>
</form>
within script tags,
$(function(){
$("#submit-button").click(function(){
$("#submit-button").prop("disabled", true);
});
});
my html is
<form id="login" class="ui-body ui-body-a ui-corner-all" data-ajax="false" method="post" >
<fieldset>
<div data-role="fieldcontain">
<label for="username">Usuario :</label>
<input type="text" value="" name="username" id="username"/>
</div>
<div data-role="fieldcontain">
<label for="password">Contraseña:</label>
<input type="password" value="" name="password" id="password"/>
</div>
<input type="submit" data-theme="b" name="submit" id="submit" value="Login">
</fieldset>
</form>
and my javascript is
$("#login").submit(function(){
alert("OK");
}
but it isn't working.
i have check in http://jsfiddle.net/w2Sqs and it works, but in my web not!
Any idea?
thanks
You are probably referencing your form too soon. If you try and reference a DOM element before it is loaded, then it's going to fail to attach a listener to it.
Instead, either put the selector below your form:
<body>
<form id="login" method="post">
<input type="text" name="user">
<input type="submit" value="send">
</form>
<script>
$("#login").submit(function() {
alert("ok");
});
</script>
</body>
Or make sure the DOM is loaded completely using the jQuery ready stuff (This code can go in the <head> section):
$(function() {
$("#login").submit(function() {
alert("ok");
});
});
Try adding an event to your submit function
$(#id).submit(function(event){});
I have a simple form to take user input. User must fill very fields in that form. If they don't, javascript gives the alert message but it's not working. I am not getting alert message if I submit the form empty. Here's my form.html:
</style>
<script type="text/javascript">
function Validate(){
if(document.simple_form.session.value == "" ||
document.simple_form.hostname.value == "" ||
document.simple_form.username.value == ""
document.simple_form.password.value == "")
{
alert("Please fill out all fields before clicking Load!");
return false;
}
}
</script>
</head>
<body>
<form action="." method="post" onsubmit="return Validate();" name="simple_form">
{% csrf_token %}
<fieldset>
<legend>Session</legend>
<label for="input-one" class="float"><strong>Session Name:</strong></label><br />
<input class="inp-text" name="session" id="sess" type="text" size="30" /><br />
<label for="input-two" class="float"><strong>RemoteHost:</strong></label><br />
<input class="inp-text" name="hostname" id="host" type="text" size="30" onblur="if(this.value=='') { this.value='ngs.pradhi.com:/upload' }" onfocus="if(this.value=='ngs.pradhi.com:/upload') { this.value='' }" value="ngs.pradhi.com:/upload" />
<label for="input-three" class="float"><strong>Username:</strong></label><br />
<input class="inp-text" name="username" id="user" type="text" size="30" />
<label for="input-four" class="float"><strong>Password:</strong></label><br />
<input class="inp-text" name="password" id="pass" type="password" size="30" />
</fieldset>
<p><input class="submit-button" type="submit" value="Load" /></p>
<p><input class="save-button" type="reset" name="cancel" value="Cancel" /></p>
</form>
Is there something I am missing?
You're missing a final || in your Validate() function.
I've got a working jsfiddle here (I added a couple of </br>'s too).