I want to disable the submit button for 5 seconds before it becomes clickable. The script works and make the button unclickable for 5 second, but the problem is it doesn't submit the form.
Please help.
<form id="frm_wanted_search">
<input type="submit" onclick="lockoutSubmit(this)" name="school_name" id="btn_book_search" value="Search">
</form>
<script>
function lockoutSubmit(button) {
var oldValue = button.value;
button.setAttribute('disabled', true);
button.value = '...processing...';
setTimeout(function(){
button.value = oldValue;
button.removeAttribute('disabled');
}, 5000) }
</script>
try below code
<form name ="form1" id="frm_wanted_search">
<input type="submit" onclick="lockoutSubmit(this)" name="school_name" id="btn_book_search" value="Search">
</form>
<script>
function lockoutSubmit(button) {
event.preventDefault();
var oldValue = button.value;
button.value = '...processing...';
setTimeout(function(){
button.value = oldValue;
document.form1.submit();
}, 5000)
}
</script>
Try this, the idea is you bind the page load event, do some stuff on the button, and trigger a timer on it.
window.onload = disableButton;
var button = document.getElementById("btn_book_search");
var oldValue = button.value;
function disableButton() {
button.value = '...processing...';
button.disabled = true;
setTimeout(function(){
button.value = oldValue;
button.removeAttribute('disabled');
}, 5000);
}
<form id="frm_wanted_search">
<input type="submit" name="school_name" id="btn_book_search" value="Search">
</form>
Related
I want to disable textarea when button is pressed and enable it back again when another button is pressed. Right now I can disable it but I can't get it to be enabled again.
HTML:
<textarea rows='14' id="value"> </textarea>
<button class="continue" onclick="return cont()">CONTINUE</button>
<button class="clear" onclick="return clear()">CLEAR</button>
JS:
function cont(){
document.getElementById("value").value = 'hello';
document.getElementById("value").readOnly = true;
setTimeout('cont()',1000);
}
function clear(){
document.getElementById("value").readOnly = false;
document.getElementById("value").value = 'empty';
setTimeout('clear()',1000);
}
Why is my clear button not working?
you can do that functionality like this:
HTML:
<textarea rows='14' id="value"> </textarea>
<button class="continue">CONTINUE</button>
<button class="clear">CLEAR</button>
JS:
const continueButton = document.querySelector('.continue');
const clearButton = document.querySelector('.clear');
const textArea = document.querySelector('#value');
continueButton.addEventListener('click', function(e) {
textArea.value = 'hello'
textArea.disabled = true
});
clearButton.addEventListener('click', function(e) {
textArea.value = ''
textArea.disabled = false
});
change setTimeout('clear()',1000) to setTimeout('clear',1000)
A validation() function needs to be called whenever a form is submitted which validates the input and based on that returns true or false. But based on two submit buttons there are two validation() functions. Here is an example
<form name="abc" id="abc" method="post" onsubmit="return validate()">
<button type="submit" id="save">Save</button>
<button type="submit" id="edit">Edit</button>
</form>
<script type = "text/javascript">
document.getElementById("save").onclick = function() {
validateSave();
}
document.getElementById("edit").onclick = function() {
validateEdit();
}
function validateSave(){
//do validation
}
function validateEdit(){
//do validation
}
function validate(){
//return true or false based on the validation
}
</script>
So basically I want to use onsubmit="return validate() weather to navigate to next page or remain in the same page. So how to use the onsubmit="return validate() alongwith the respective validation on basis of the button clicked.
Any leads/hint would be appreciated.
Thanks
Do something like this :
HTML :
<form name="abc" id="abc" method="post">
<button type="submit" id="save" onclick="validate(event)">Save</button>
<button type="submit" id="edit" onclick="validate(event)">Edit</button>
</form>
JS :
function validateSave(){
console.log("save");
return false;
}
function validateEdit(){
console.log("edit");
return false;
}
function validate(event){
event.preventDefault();
event.stopPropagation();
var callerId = event.target.id;
var formElement = document.getElementById("abc");
if (callerId === "Save") {
formElement.onsubmit = validateSave(); // Or other value/function
}
else {
formElement.onsubmit = validateEdit(); // Or other value/function
}
formElement.submit();
}
I found a way by declaring a flag variable inside the javascript section
<form name="abc" id="abc" method="post" onsubmit="return validate()">
<button type="submit" id="save">Save</button>
<button type="submit" id="edit">Edit</button>
</form>
<script type = "text/javascript">
var flag="";
document.getElementById("save").onclick = function() {
flag="Save";
}
document.getElementById("edit").onclick = function() {
flag="Edit";
}
function validateSave(){
//do validation
}
function validateEdit(){
//do validation
}
function validate(){
if(flag == "Save"){
if(validateSave()){
return true;
}
else{
return false;
}
}
if(flag == "Edit"){
if(validateEdit()){
return true;
}
else{
return false;
}
}
}
</script>
Hello I want to disable two buttons when the checkbox is checked but for it result I must click two times in the checkbox hope someone can help me.
Thanks.
var checker = document.getElementById('checkme');
var button = document.getElementById('button');
var button2 = document.getElementById('button2');
document.getElementById("button").disabled = true;
document.getElementById("button2").disabled = true;
checker.onchange = function() {
button.disabled !! this.checked;
button2.disabled !! this.checked;
};
Your code is wrong. You have to assign the checkbox status to button:
var checker = document.getElementById('checkme');
var button = document.getElementById('button');
var button2 = document.getElementById('button2');
document.getElementById("button").disabled = true;
document.getElementById("button2").disabled = true;
checker.onchange = function() {
button.disabled = !this.checked;
button2.disabled = !this.checked;
};
<input type='checkbox' id='checkme' />
<button id='button'>Button 1</button>
<button id='button2'>Button 2</button>
simply use this code
<input type="checkbox" id="checkme" onChange="state_change(this.checked)">
<input type="button" id="button" value="button1">
<input type="button" id="button2" value="button2">
<script type="text/javascript">
function state_change(check){
document.getElementById('button').disabled = check;
document.getElementById('button2').disabled = check;
}
</script>
I suggest defining 'button' and 'button2' inside the function, otherwise it could be overwritten if you define 'button' somewhere else.
Instead of manually initializing the disabled state you can simply call the onchange function directly, which will make possible modifications to the code easier, you generally want to avoid having the same code in multiple places.
var checker = document.getElementById('checkme');
checker.onchange = function() {
var button = document.getElementById('button');
var button2 = document.getElementById('button2');
button.disabled = !this.checked;
button2.disabled = !this.checked;
};
checker.onchange();
<input type="checkbox" id="checkme">
<button id = "button">button</button>
<button id = "button2">button2</button>
Ha ha ha who say thissendbtn2.disabled = !!this.checked; Hope this help you. .
Why a = !! b because !!= not not and = true, then write a=b.
I've tried working with some code from JSFiddle, and it is working fine.
Although when I try and implement it in HTML, it doesn't work the same way.
Here's what I have so far:
Javascript:
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
HTML:
<h1>Button should be enabled if at least one checkbox is checked</h1>
<input type="checkbox" id="checkme"/><input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " disabled/>
You need to wrap the script inside window.onload event to make sure that the dom elements are available.
window.onload = function() {
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function(){
if(this.checked) sendbtn.disabled = true;
else sendbtn.disabled = false;
}
}
<input type="checkbox" id="checkme"/>
<input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " />
Your javascript needs to be in <script> tags. It's not clear if they are or not by your question, so I'll assume they're not:
<html>
<head><title>Still learning</title></head>
<body>
<script type="text/javascript">
window.onload = function() {
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
};
</script>
<h1>Button should be enabled if at least one checkbox is checked</h1>
<input type="checkbox" id="checkme"/><input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " disabled/>
</body>
</html>
Read up on html basics
This one: Uncaught TypeError: Cannot set property 'onchange' of null
Your javascript is executing before the html finishes completely loading.
This is why document.getElementById('checkme') is returning null. Put the function into a window.onload and insert the script into the <head> like this.
<html>
<head><title>Still learning</title>
<script>
window.onload = function() {
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
};
</script>
</head>
<body>
<h1>Button should be enabled if at least one checkbox is checked</h1>
<input type="checkbox" id="checkme"/><input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " disabled/>
</body>
</html>
It should work now. See this fiddle: http://jsfiddle.net/brbcoding/n9z5D/
I have a user registration form.I need to check if user form filled in less than xx seconds(5 seconds). If less than 5 seconds disable the form submit. Some thing like that disable the submit button click or return false or like that.
I wrote some jquery scripts.But not correctly working.
Here is the sample form.
<form id="registerform" class="registerform" method="post"/>
<input type="text" name="username" id="username" />
<input type="text" name="email" id="email" />
<input type="submit" name="submit" id="submitBtn" value="Submit" />
</form>
Here is the jquery scripts.
<script type=javascript>
jQuery.noConflict();
jQuery(document).ready(function ($) {
var typingTimer; //timer identifier
var doneTypingInterval = 5000; //time in ms, 5 second for example
var checktime = 0;
jQuery('form#registerform').find(':input').each(function(){
jQuery(this).keyup(function(){
typingTimer = setTimeout(doneTyping, doneTypingInterval);
});
jQuery(this).keydown(function(){
clearTimeout(typingTimer);
});
});
function doneTyping () {
checktime = typingTimer;
return checktime;
}
jQuery('form#registerform').submit(function() {
checktime = doneTyping ();
var timerInsec = (doneTypingInterval/1000);
if(checktime < timerInsec) {
return false; // disable form submit
} else {
// if user take to fill the form more than 5 seconds, submit the form
return true;
}
});
});
</script>
I need to integrate to the wordpress registration form.That's why I tried.
If anyone have a solution/solutions to this please help me. Really appreciate that.
Thank you
This will disable your submit button for 5 seconds:
var submitButton = $('#submitBtn');
submitButton.prop("disabled", true);
setTimeout(function() {
submitButton.prop("disabled", false);
}, 5000);
Online example
You would also want to make sure, that the malicious user doesn't submit the form by other means! Make sure to run server-side validation:
if ( isset($_SESSION['last_submit_time']) ) {
$delay = intval($_SESSION['last_submit_time']) + 5;
if ( time() < $delay ) {
$_SESSION['last_submit_time'] = time();
echo "You must wait for 5 more seconds before submitting. Timer reset.";
exit;
}
}
typing timer does not contain the time , instead it contains an id for the timer thats currently ticking...and since key up will always set it to some value, it will never be false.
Also, you add add and reset timer for each input. If you want the user to spend at least 5 seconds to fill in your form, dont enable the submit button until 5 sec has passed.
function doneTyping () {
checktime = typingTimer;//will always have a value that evaluates to true
return checktime;
}
Try that... HTML:
<form id="registerform" class="registerform" method="post">
<input type="text" name="username" id="username">
<input type="text" name="email" id="email">
<input type="submit" name="submit" id="submit" value="Submit">
</form>
jQuery:
jQuery(document).ready(function ($) {
var intervalTime = 5000,
inputID = "#submit";
function initialize(interval, input) {
intervalTime = interval;
inputID = input;
jQuery(inputID).prop("disabled", true);
startCouting();
}
function startCouting() {
setTimeout(function() {
enableInput();
}, intervalTime);
}
function enableInput() {
jQuery(inputID).prop("disabled", false);
};
initialize(5000, "#submit");
});