I have the following problem, I made a form using HTML with some input fields.
I also made the submit button disabled using the following JS code:
if(document.forms['form'].inputfield1.value == "")
{
document.forms[0].submit.disabled=true;
}
else {
document.forms[0].submit.disabled=false;
}
This works fine, whenever I load the page the button is disabled, but when I fill in something it doesn't get enabled.
But whenever I place a value in my input field like so:
<input type="text" name="inputfield1" size="3" maxlength="3" value="12345">
And I load the page the button is enabled, proving the JS code works just fine.
I don't know if there is anyway to make the button refresh after someone used an input field or anything like that.
I'm completely new to JS and PHP, any help is greatly appreciated!
You need to use a javascript event to detect when the value changes and to run the validation. I would suggest onkeyup for this as you will likely want it as the user is typing.
This can be done with javascript as follows...
Create an onload event to trigger when the page loads, this will register the events handlers for your input and call the initial check to set the default state:
window.onload = function(){
document.getElementsByName("inputfield1")[0].onkeyup = validateForm;
validateForm();
};
Then your function to do the validation:
function validateForm(){
if(document.forms['form'].inputfield1.value == "")
{
document.forms[0].submit.disabled=true;
}
else {
document.forms[0].submit.disabled=false;
}
}
You can use onkeyup function to do this simply
<input type="text" name="inputfield1" size="3" maxlength="3" value="12345" onkeyup='check()'>
function check() {
if(document.forms['form'].inputfield1.value == ""){
document.forms[0].submit.disabled=true;
}
else {
document.forms[0].submit.disabled=false;
}
}
Related
I'm learning Javascript, and this basic redirect isn't doing anything.
The alert fires, but no version of 'page redirect' code I've tried seems to be working.
I've tried every version of location.href, document.location.href, window.location, etc etc....
I just want to switch urls when user input == '85.5'. But despite hours of trying, it just won't work.
What am I missing here?
Thanks!
I'm calling this function in a form element like so:
<form onsubmit="showInput()">
<input type="text" id="question" name="inputz">
</form>
function showInput(){
var InputNumber = document.getElementById("question").value;
if(InputNumber == '85.5'){
alert("You escaped"); //this works
alert(InputNumber); //this works
window.location.href ='/Survive_The_Swamp3.html'; //this does NOT work
return false;
}
else {
alert(InputNumber);
document.location.href ="https://i.redd.it/twrza9clfsh21.jpg"; //also doesn't work
return false;
}
}
This has nothing to do with window.location.href.
You don't have anything that submits the form. So the onsubmit handler is never called.
Forms are submitted when there's an <input type="submit"> which will be rendered as a button. Forms can also be submitted if there's a <button> inside the form. If neither of these exist then the form is never submitted unless you manually submit the form by calling the form's .submit() method in javascript.
For your code to trigger you need to wait for the <input> change event:
<input type="text" id="question" name="inputz" onchange="showInput()">
However there is a subtle issue with how onchange events work. They are triggered BEFORE the input gets the new value. As such when your user type "85.5" your event handler will see "85.". To get the current value you need to read it from the event object:
function showInput(event){
var InputNumber = event.target.value;
//...
The reason onchange works this way is to allow you to cancel the event thus preventing the <input> from getting the value. For example you can use this feature to prevent the user from entering something that is not a number.
I appreciate the feedback and information from everybody; however the only thing I was able to finally get to work was using the following configuration:
<form onsubmit="showInput(); return false"> //maybe return false here made the difference?
<input type="text" id="question" name="inputz" >
</form>
function showInput(){
var InputNumber = document.getElementById("question").value;
if(InputNumber == '85.5'){
alert("You escaped");
window.location.href='/Survive_The_Swamp3.html';
}
I have an onblur='validate(this)' on a text field but I do not want the validate code to run when a cancel button is clicked.
function validate(oField) {
if (document.getElementById('Cancel').clicked != true) {
console.log("Cancel clicked");
}
}
<input id='reviewername'
name='reviewername'
type='text'
class='$class'
value='$reviewername'
tabindex=1
size=$size
onkeydown='setKeyCode(event)'
onblur='validate(this)'/>;
<input type='submit'
name='Button'
id='Cancel'
value='Cancel'>;
The document.getElementById('Cancel').clicked is always 'undefined'.
I have tried addListener(), probably incorrectly, as well as other newbie tricks with no success!
What I am trying to do is check whether the Cancel button is clicked while the text field has the focus. Immediately I click the button, the text field event 'onblur' runs. I want to check for the button click as the first part of the javascript validate() function.
Is what I am attempting even possible?
Please help before I lose the rest of my hair.
You can use àddListener() if you name it correctly as addEventListener().
Then, you can set some variable when the cancel button is clicked and use that variable in replacement to your document.getElementById(...).clicked.
cancel_clicked = false;
function validate(oField) {
if (cancel_clicked != true) {
console.log("Cancel not clicked");
} else {
console.log("Cancel clicked");
}
}
<input id='reviewername'
name='reviewername'
type='text'
class='$class'
value='$reviewername'
tabindex=1
size=$size
onkeydown='setKeyCode(event);'
onblur='validate(this);'/>
<input type='submit'
name='Button'
id='Cancel'
value='Cancel'
onclick='cancel_clicked = true;'/>
Browsers are removing direct event listener attachment to DOM elements, it's better to use javascript to add the event listeners, instead of the onlick or onblur attributes on DOM elements, this is what I've noticed lately.. So you are more safe with using addEventListener, also do watch out for your spelling too incases where you get undefined,or you are loading your script before your DOM tree.. As a thumb rule, load your javascript file last.
I have a number of fields that are either filled (inputs) or selected (dropdowns) that working together to create a new page.
I'm attempting to validate the entries and prevent the page creation if anything is wrong with the inputs. No form is being used.
The problem is the $("#netsubmit").submit(function( event )) never gets run when the submit is clicked. No errors are thrown, no indication why its not processing.
My html for the input is:
<input id="netsubmit" type="submit" value="Submit" onClick="newNet()"
title="Submit The New Net">
My JQuery javascript is:
$(document).ready(function () {
$("#netsubmit").submit(function( event ) {
alert("in it");
var callentered = $("#callsign").val();
if (callentered == "") {
event.preventDefault();
alert("Please enter a call sign first.");
$("#callsign").focus();
}
});
});
It is likely not working because as you said you aren't using a form element. From the jquery docs:
The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to form elements
You could use the function specified by your onclick event onClick="newNet()" to validate the data.
.submit() can only be used with <form> elements, as stated in the documentation:
It can only be attached to <form>elements.
If you do not want to use the form tag, you can switch to using .click() instead, like so:
$("#netsubmit").click(function(event) {
alert("in it");
});
If you read the documentation for submit on MDN it explicitly says
The submit event is fired when a form is submitted.
Note that submit is fired only on the form element, not the button or
submit input. (Forms are submitted, not buttons.)
if you do
<form id="myform">
<input id="netsubmit" type="submit" value="Submit" onClick="newNet()" title="Submit The New Net">
</form>
and then change the code
$(document).ready(function () {
$("#myform").submit(function( event ) {
alert("in it");
var callentered = $("#callsign").val();
if (callentered == "") {
event.preventDefault();
alert("Please enter a call sign first.");
$("#callsign").focus();
}
});
});
it works fine
<input type="submit" name="btnADD" id="btnADD" value="ADD"/>
when user click add button twice, from get submitted twice with same data into table.
So Please help me to restrict user to submit from twice.
Once the form is submitted, attach a handler with jQuery that hijacks and "disables" the submit handler:
var $myForm = $("#my_form");
$myForm.submit(function(){
$myForm.submit(function(){
return false;
});
});
Returning "false" from the submit handler will prevent the form from submitting. Disabling buttons can have weird effects on how the form is handled. This approach seems to basically lack side effects and works even on forms that have multiple submit buttons.
try out this code..
<input type="submit" name="btnADD" id="btnADD" value="ADD" onclick="this.disabled=true;this.value='Sending, please wait...';this.form.submit();" />
You can disable the button after clicking or hide it.
<input type="submit" name="btnADD" id="btnADD" value="ADD" onclick="disableButton(this)"/>
js :
function disableButton(button) {
button.disabled = true;
button.value = "submitting...."
button.form.submit();
}
If you are working with java server side scripting and also using struts 2 then you refer this link which talks about on using token.
http://www.xinotes.org/notes/note/369/
A token should be generated and kept in session for the initial page render, when the request is submitted along with the token for the first time , in struts action run a thread with thread name as the token id and run the logic whatever the client has requested for , when client submit again the same request, check whether the thread is still running(thread.getcurrentthread().interrupted) if still running then send a client redirect 503.
And if you are not using any framework and looking for simple workout.
You can take help of the
java.util.UUID.randomUUID();
Just put the random uuid in session and also in hidden form field and at other side(the jsp page where you are handling other work like storing data into database etc.) take out the uuid from session and hidden form field, If form field matches than proceed further, remove uuid from session and if not than it might be possible that the form has been resubmitted.
For your help i am writing some code snippet to give idea about how to achieve the thing.
<%
String formId=(java.util.UUID.randomUUID()).toString();
session.setAttribute(formId,formId);
%>
<input type='hidden' id='formId' name='formId' value='<%=formId%>'>
You could notify the user that he drinks too much coffee but the best is to disabled the button with javascript, for example like so:
$("#btnADD").on('click', function(btn) {
btn.disabled = true;
});
I made a solution based on rogueleaderr's answer:
jQuery('form').submit(function(){
jQuery(this).unbind('submit'); // unbind this submit handler first and ...
jQuery(this).submit(function(){ // added the new submit handler (that does nothing)
return false;
});
console.log('submitting form'); // only for testing purposes
});
My solution for a similar issue was to create a separate, hidden, submit button. It works like so:
You click the first, visible button.
The first button is disabled.
The onclick causes the second submit button to be pressed.
The form is submitted.
<input type="submit" value="Email" onclick="this.disabled=true; this.value='Emailing...'; document.getElementById('submit-button').click();">
<input type="submit" id='submit-button' value="Email" name="btnSubmitSendCertificate" style='display:none;'>
I went this route just for clarity for others working on the code. There are other solutions that may be subjectively better.
You can use JavaScript.
Attach form.submit.disabled = true; to the onsubmit event of the form.
A savvy user can circumvent it, but it should prevent 99% of users from submitting twice.
You can display successful message using a pop up with OK button when click OK redirect to somewhere else
Disable the Submit Button
$('#btnADD').attr('disabled','disabled');
or
$('#btnADD').attr('disabled','true');
When user click on submit button disable that button.
<form onSubmit="disable()"></form>
function disable()
{
document.getElementById('submitBtn').disabled = true;
//SUBMIT HERE
}
Create a class for the form, in my case I used: _submitlock
$(document).ready(function () {
$(document).on('submit', '._submitlock', function (event) {
// Check if the form has already been submitted
if (!$(this).hasClass('_submitted')) {
// Mark the form as submitted
$(this).addClass('_submitted');
// Update the attributes of the submit buttons
$(this).find('[type="submit"]').attr('disabled', 'disabled');
// Add classes required to visually change the state of the button
$(this).find('[type="submit"]').addClass("buttoninactive");
$(this).find('[type="submit"]').removeClass("buttonactive");
} else {
// Prevent the submit from occurring.
event.preventDefault();
}
});});
Put a class on all your buttons type="submit" like for example "button-disable-onsubmit" and use jQuery script like the following:
$(function(){
$(".button-disable-onsubmit").click(function(){
$(this).attr("disabled", "disabled");
$(this).closest("form").submit();
});
});
Remember to keep this code on a generic javascript file so you can use it in many pages. Like this, it becomes an elegant and easy-to-reuse solution.
Additionally you can even add another line to change the text value as well:
$(this).val("Sending, please wait.");
Add a class to the form when submitted, stopping a user double clicking/submitting
$('form[method=post]').each(function(){
$(this).submit(function(form_submission) {
if($(form_submission.target).attr('data-submitted')){
form_submission.preventDefault();
}else{
$(form_submission.target).attr('data-submitted', true);
}
});
});
You can add a class to your form and your submit button and use jquery:
$(function() {
// prevent the submit button to be pressed twice
$(".createForm").submit(function() {
$(this).find('.submit').attr('disabled', true);
$(this).find('.submit').text('Sending, please wait...');
});
})
None of these solutions worked for me as my form is a chat and repeated submits are also required. However I'm surprised this simple solution wasn't offered here which will work in all cases.
var sending = 0;
$('#myForm').submit(function(){
if (sending == 0){
sending++;
// SUBMIT FORM
}else{
return false;
}
setTimeout(function(){sending = 0;},1000); //RESET SENDING TO 0 AFTER ONE SECOND
}
This only allows one submit in any one second interval.
I'm using forms basic validation to check if email is correct format, then the data is sent by Ajax where it checks if email address is already in use and did the user select country/state or left default values in select boxes.
But for HTML5 form validation to be done submit event is needed, upon clicking submit if it passes that basic form validation Ajax operation is performed, but then when results come in I would like to use the same browser tooltips for interface consistency (and well I like how they look).
So is there a way to make them show up, I was unable to find if there is some special event for them or something like firing submit event but stopping it right away. Right now the field only gets a red edge and error message appears on hovering mouse over it, while the tooltip shows on again clicking submit button.
Also for browsers that don't have native tooltips(in my case Safari) I'm using Webshims Lib and it acts exactly the same as in Chrome and Firefox.
I thought .checkValidity() would do the trick, but it doesn't trigger the UI. (caniuse)
It sounds like .reportValidity() does what you want. (caniuse)
You can find an answer at this link: How to force a html5 form validation without submitting it via jQuery
Basically, you find a submit button and call click on it:
// force form validation
document.getElementById("submitbutton").click()
You can also change validation message after checking if email address is in use or not and then force form validation as above:
document.getElementById("email").setCustomValidity("This email is already registered!");
document.getElementById("submitbutton").click()
A polyfill for HTMLFormElement.reportValidity().
Tested with IE11 and Edge. But when running in the StackOverflow sandbox below with IE11, the validation messages are not displayed.
function reportValidityPolyfill() {
const button = createInvisibleSubmitButton();
this.appendChild(button);
this.addEventListener("submit", submitEventHandler);
var isValid = false;
button.click();
this.removeEventListener("submit", submitEventHandler);
this.removeChild(button);
return isValid;
function createInvisibleSubmitButton() {
const button = document.createElement("button");
button.type = "submit";
button.style.display = "none";
return button;
}
function submitEventHandler(event) {
event.preventDefault();
isValid = true;
}
}
if (!HTMLFormElement.prototype.reportValidity) {
HTMLFormElement.prototype.reportValidity = reportValidityPolyfill;
console.log("ReportValidity polyfill installed.");
} else {
console.log("ReportValidity polyfill skipped.");
}
input {
outline: 1px solid #0f0;
}
input:invalid {
outline: 1px solid #f00;
}
<form id="form1">
Enter a number from 1 to 5: <input type="number" min="1" max="5" required>
</form>
<br>
<div onclick="console.log('Validity: ' + document.getElementById('form1').reportValidity())">
Click here to call reportValidity()
</div>
It's actually very simple - add a hidden input element to your form:
<input type="hidden" id="myFormCheck" required="true" value=""/>
Call myInputField.setCustomValidity(message) on the input element you want to create a custom tooltip on then call your form.click();
The form validity process runs and displays the message popup over that element, but the form won't submit because of the hidden element, so you won't need to catch and cancel the submit event.
When you're done and really ready to go, set a value on the hidden element and the form will submit normally.
This way you can use the form tooltip for something like checking for usernames that are available, or matching any value over an HTTP Request etc.
As most people say you have to use input.setCustomValidity("message").
The problem here is that you can't check that validation within the submit event, since you need to do an ajax call and then set setCustomValidity asynchronously.
So basically you have to use the change event of the input field and make the ajax call on every change. Or remove the submit button and use the click event of a normal button, check the unique email in the ajax call and then call submit through javascript.
See an example of the last option using jQuery:
<form action="/sign-in" id="form">
<input type="email" id="email" required/>
<button id="submit">Submit</button>
</form>
// we capture the click instead the submit
$("#submit").on("click",function(){
var $elem = $("#email");
var email = $elem.val();
//the ajax call returns true if the email exists
$.get( "ajax/checkUniqueEmail", function(data) {
if(data === "true"){
$elem.setCustomValidity("This email already exists.");
}else{
$elem.setCustomValidity("")
}
//then we submit the form
$("#form").submit();
});
});
Checkout this link ( Provide custom validation messages using setCustomValidity in HTML 5 pages ).
In the above link, he used "input" type is number and oninput he called the validation function. Let me know is this what you are looking for.
<input type="number" required="true" value="50" min="18" max="60" step="1" oninput="validate(this)">
Here's a nice live example that custom validates/gives feedback on a form input.
The basic javascript looks like:
function checkPasscode() {
var passcode_input = document.querySelector("#passcode");
if (passcode_input.value != "Ivy") {
passcode_input.setCustomValidity("Wrong. It's 'Ivy'.");
} else {
passcode_input.setCustomValidity(""); // be sure to leave this empty!
alert("Correct!");
}
}
HTML:
<form>
<label for="passcode">Enter Passcode:</label>
<input id="passcode"
type="password"
placeholder="Your passcode"
oninput="checkPasscode();"
required/>
<button type="submit">Submit</button>
</form>
You can use setCustomValidity with for the element if the condition is false ( you can do it inside any event handler such as keypress or click ). If the input is NOT valid, SUBMIT. This will trigger the browser's message tooltip.
setCustomValidity() does the trick on my change password from, confirm password input.
But the problem is when we set setCustomValidity('Passwords do not match) it doesn't clear as attached to the form submit event.
I just added setCustomValidity('') to blank in password confirmation input key up event.
It works for me.
$(document).ready(function() {
const confirm = document.querySelector('input[name=password2]');
$('#pass2').on('keyup', function(){
confirm.setCustomValidity('');
})
$("#reset-pw-form").on('submit', function(e) {
e.preventDefault();
if($('#pass1').val() != $('#pass2').val()) {
confirm.setCustomValidity('Passwords do not match');
confirm.reportValidity();
return false;
}
}
As you already have divs to display feedback, you can manually manipulate these.
$('#cc').on('input', function () {
var input = document.getElementById("cc");
var validity = document.getElementById("validity");
validity.style.display = "block";
if (checkLuhn(input.value)) {
validity.innerHTML = "Valid Credit Card Number";
} else {
validity.innerHTML = "Invalid Credit Card Number";
}
});
You should also check the length of the credit card number is either 13 or 16 all numeric digits.