HTML form onsubmit error / method="post" not working - javascript

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

Related

Autologin or autoclick on button

I have HTML code which displays a pre-compiled login form. Is it possible to improve this code in order to make the login automatic, so it autofills the user information (name, password)?
<html><body>
<form
id="myForm"
action="http://***.***.***.***/***/****/*******="
method="post">
Account name:<br>
<input name="****" value="****" />
<br>
Password:<br>
<input type="password" name="pwd" value="****" />
<br><br>
<input type="submit" value="Login">
</form>
</body></html>
What you can do is use JavaScript:
function login() {
document.getElementById("username").value = "username";
document.getElementById("password").value = "password";
}
<html><body>
<form id="myForm" action="http://***.***.***.***/***/****/*******=" method="post">
Account name:<br>
<input name="****" value="****" id="username" />
<br>
Password:<br>
<input type="password" name="pwd" value="****" id="password"/>
<br><br>
<input type="submit" value="Login" onclick="login()" />
</form>
</body></html>
you can also use the jQuery submit event for your form. In your javascript use:
$(document).ready(function(){
$("#myForm").submit();
});
Of course, just click on the button on load:
<html><body onload="document.getElementById('login').click();">
<form
id="myForm"
action="http://***.***.***.***/***/****/*******="
method="post">
Account name:<br>
<input name="****" value="****" />
<br>
Password:<br>
<input type="password" name="pwd" value="****" />
<br><br>
<input type="submit" value="Login" id="login">
</form>
</body></html>

Form does not shows on clicking using JS

I have made form and it is hidden using CSS display property. I have button. I want to show the form when I click that button. I have done everything from my end but still form does not show up.
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Below is my JS function which is not trigerring.
$("button").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
The function showLoginForm() is not defined. Your jquery was listening for a button click, when your button is of type input.
$("input[type=button]").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" />
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Or with the function defined:
function showLoginForm(){
$("#loginForm").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Your issue is that your input is type button, not a button element itself.
so either changing your input to a button or changing your jquery binding to $('input[type=button]') ought to work
http://jsfiddle.net/4Lz5rsq3/

jquery on submit form search for its corresponding div and hide form

I have multiple forms in same page with submit , i want to hide the form after form submit and display a link for the respective forms
Below is the html i have the same class name for all the forms
and for the submit class also.
<div id="wpcf7-f63-p1-o1">
<form name="" class="wpcf7-form" action="" method = "post">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</form>
</div>
<div id="wpcf7-f63-p1-o2">
<form name="" class="" action="" method = "post">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</form>
</div>
i tried the below code
<script>
jQuery(".wpcf7-form").submit(function()
{
jQuery("^wpcf7-f63-p1-").hide();
});
</script>';
In your example typed:
jQuery("^wpcf7-f63-p1-").hide();
i think should be:
jQuery("#wpcf7-f63-p1-o1").hide();
Use this on form submit
$('input[type="submit"]').click(function() {
$form = $(this).parent();
$('<p>link to form</p>').insertBefore($form);
$form.hide();
});
Are you looking for jquery .find() ?
you could do something like this:
$('form').submit(function(){
$(this).find('.myForm').hide();
$(this).find('.link').show();
}
.link {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="" class="" action="" method = "post">
<div class="myForm">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</div>
<a class="link" href="#">Link</a>
</form>
ah error on your jquery selector, change your js to:
jQuery(".wpcf7-form").submit(function()
{
jQuery("[id^='wpcf7-f63-p1-']").hide()
return false;
});
working jsfiddle code
NB. you may need to delete the return false, I added it to see the elements getting disappeared after submit.

Add Value To URL On Form Submit With Jquery

I have this form below when i submit it i want it to append a value to the 6 urls generated from a php query.
<form id="emailform" action="" method="post">
<input type="text" value="" size="30" name="email" id="email">
<input type="submit" name="submit" value="Submit" class="continue-button">
</form>
This is an example of my link, sitename.com/demo.php?1=demo&2=haha How can i use the form and jquery to append &email=formvalue to the url so sitename.com/demo.php?1=demo&2=haha = sitename.com/demo.php?1=demo&2=haha&email=formvalue ?
Please keep in mind that these urls are generated dynamically with a query.
I tried using attr on a but it doesnt work. I know you have to check for the submit then use attr.
$('#emailForm').submit(function(){ //listen for submit event
}
You can use hidden field like this
<form action="" method="post">
<input type="hidden" name="new_value" value="value"/>
<input type="text" value="" size="30" name="email" id="email">
<input type="submit" name="submit" value="Submit" class="continue-button">
</form>
or you can add to action of form like this
<form action="http://action_url?new_value=value" method="post">
<input type="text" value="" size="30" name="email" id="email">
<input type="submit" name="submit" value="Submit" class="continue-button">
</form>
You'd better to use markup input type="hidden" to submit the value
Your Form :
<form action = "sitename.com/demo.php" method="post" >
<input type="hidden" name="1" value="demo" />
<input type="hidden" name="2" value="haha" />
<input type="text" value="" size="30" name="email" />
<input type="submit" name="submit" value="Submit" class="containue-button" />
</form>
Then you just need to submit this form in javascript or jquery.
: )
use serilaize method
$('#emailForm').submit(function(){
//listen for submit event
var all_submit_data = $( '#emailForm' ).serialize() ;
//this will have all input fields values in serilized
}
ref : https://api.jquery.com/serialize/

form getting submitted even if validation fails

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();">

Categories

Resources