This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
disable textbox using jquery?
How to prevent changing a textbox value using jquery in document.getElementsByName().
There is an option like this.
document.getElementById("Quantity").defaultValue;
Is there any option to stop my textbox's value from changing in document.getElementsByName().
After my alert, I want to make the value of textbox stay the same when the condition is not matched.
My code:
$(function () {
$('input[name=Quantity]').blur(allownumbers);
});
function allownumbers() {
var elements = document.getElementsByName('Quantity');
for (var i = 0; i < elements.length; i++) {
if (elements[i].value == '' || elements[i].value < 1) {
alert('Please enter a valid value');
return false;
}
else if (elements[i].value > 100) {
alert('There is no enough inventory for this product to fulfill your order');
return false;
}
}
return true;
}
<input id="Quantity" type="text" name="Quantity"/>
Any suggestions.
EDIT :
I tried using this code.
$("#textbox1").removeAttr("disabled");
If I enter 200. The alert appears and the textbox becomes disabled and so I cant even re-enter the correct value in textbox. How to bring back the defaultvalue of my textbox. ?
you would store the original value in a variable or hidden field then replace the value if the update failed. If the range is known when the page loads, you can use a range validation.
An alert is generally too obtrusive for a validation on blur.
Like adamb posted, you can just disable the input. The alternative is to set an attribute on the input (maybe defaultval='the default') and replace the value of the input with the defaultval attribute.
In your example, it may be best for your customers to have the input actually be set to the limit. For instance, you have a condition of 100 being the max, so if someone puts in a bigger number, say 200, it will change the box to the max possible, 100.
Related
I want to validate user input so he only provides numbers from a certain range with 0,5 steps. But I want my website to do it every time user swaps to another input form, not after he sends the data to my view. Can you give a hint of how should it be done? I don't know Javascript but I know there is onfocusout DOM event. Is it correct approach to use it, check whether or not value is valid and display an alarm based on that?
In general, there's no problem using onfocusevent.
Here's a hint on how to do this:
Create the input field
Add the onfocusout event handler and assign it a JavaScript function
Define the JavaScript function responsible for the validation process (which is, the same function we talked about in step 2)
This function takes the value inside the field and compares it, if it's not inside the range you desire then you can show an alarm or something like this.
I made a demo that doesn't involve alarming the user but instead it colors the border with either green or red, when you get desperate pay it a visit:
<input type="number" id="field1" onfocusout="validateField(0, 100, 'field1')"/><br/><br/>
<input type="number" id="field2" onfocusout="validateField(200, 300, 'field2')"/><br/><br/>
<input type="number" id="field3" onfocusout="validateField(400, 500, 'field3')"/><br/><br/>
<script>
function validateField(min, max, id) {
const value = document.getElementById(id).value;
if (value < min || value > max) {
document.getElementById(id).style.borderColor = "red";
}
else {
document.getElementById(id).style.borderColor = "lime";
}
}
</script>
Please imagine this part of a web form. Two checkboxes (with the same name="myCheckbox") and two text inputs. If the first checkbox is checked, the first text input must not be empty. If the second checkbox is checked, the second text input must not be empty. To validate this I use the script below:
// huge validation code above
}else if (!document.myForm.myCheckbox[0].checked && !document.myForm.myCheckbox[1].checked){
jAlert ('Please select one of the two checkboxes!',function(){$(myForm.myCheckbox).focus();});
return false;
}else if (myForm.myCheckbox[0].checked && myForm.myFirstTextInput.value=="") {
jAlert ('You have selected the first checkbox. Please make sure that the first text input is not empty!',function(){$(myForm.myFirstTextInput).focus();});
return false;
}else if (myForm.myCheckbox[1].checked && myForm.mySecondTextInput.value=="") {
jAlert ('You have selected the second checkbox. Please make sure that the second text input is not empty!',function(){$(myForm.mySecondTextInput).focus();});
return false;
// huge validation code below
Everything works just fine. But now, I also want to check if in the first text input the user has entered at least 10 digits. I update my validation code, please see below:
// huge validation code above
}else if (!document.myForm.myCheckbox[0].checked && !document.myForm.myCheckbox[1].checked){
jAlert ('Please select one of the two checkboxes!',function(){$(myForm.myCheckbox).focus();});
return false;
}else if (myForm.myCheckbox[0].checked && myForm.myFirstTextInput.value=="") {
jAlert ('You have selected the first checkbox. Please make sure that the first text input is not empty!',function(){$(myForm.myFirstTextInput).focus();});
return false;
}else if (myForm.myCheckbox[0].checked && myForm.myFirstTextInput.value!=="")
var x = document.getElementById("myFirstTextInput");
var y = x.value;
var totalNrOfDigits = 0;
for(var i = 0; i < y.length; i++){
if(/\d/.test(y[i])){
totalNrOfDigits++;
}
}
if(totalNrOfDigits < 10) {
jAlert ('Please make sure that the first text input contains at least 10 digits!',function(){$(myForm.myFirstTextInput).focus();});
return false;
}else if (myForm.myCheckbox[1].checked && myForm.mySecondTextInput.value=="") {
jAlert ('You have selected the second checkbox. Please make sure that the second text input is not empty!',function(){$(myForm.mySecondTextInput).focus();});
return false;
// huge validation code below
My problem: after I add the check for at least 10 digits, if the users clicks the SECOND check box, then "mySecondTextInput" is no longer validated and the form is submitted. I really don't get it why and already wasted most of may day...
Sorry because I have not added the whole code: It's really huge, it's a pretty complex web form.
In the second code example, you forgot the opening curly bracket on line 11, so only the first statement following the else if condition will be evaluated.
}else if (myForm.myCheckbox[0].checked && myForm.myFirstTextInput.value!=="")
^
|
I am creating a form for a mobile web app with input boxes asking for number input, so I'm using input type="number" for the validation and it's working well. I am also changing behavior based on the input in the box. I need to hide a div until the user enters text in the box. When they delete all text from the box, then hide the div again. This is easy to do - detect keyup on the input and if its value is an empty string or not. The problem comes when the user enters text that's not a valid number (possible, at least with iOS keyboard). The value of the input box is an empty string when the entered text is not a valid number, unfortunately. So my code is hiding the div when I do still need it to be visible, because it thinks the input box has no value in it.
How can I get the actual value stored in a number input type so I can test against it? (I need to keep it a number input type so the proper keyboard appears.) Thanks!
Here's my snippet of code:
$('input.deletable').keyup(function() {
console.log($(document.activeElement).val()); //returns empty string if input is "?)&" for example
if ($(document.activeElement).val() != '')
$('#myDiv').css('display', 'block');
else
$('#myDiv').css('display', 'none');
});
I think that "document.activeElement" isnt the best way to get the current input value. You can verify the input validity as well.
$('input.deletable').keyup(function() {
var $this = $(this);
if ($this.val() != '' && this.checkValidity())
$('#myDiv').css('display', 'block');
else
$('#myDiv').css('display', 'none');
});
I have several field that just get number, I want if user typed be identical value in two or more field empty value the last field that is identical by jQuery.keyup?
For Example:
<input name="num[]" value="11111">
<input name="num[]" value="33333">
<input name="num[]" value="11111"> // in this input should empty value it.
How can fix it?
$(function(){
$("input").blur(function(){
var _val = $(this).val();
var change = false;
$("input").each(function(){
if($(this).val() == _val){
if(change) $(this).val("");
else change = true;
}
})
})
})
What happens if I had 12345 in a box, then I went back to an earlier box and typed 123456? The 12345 would be cleared. I suggest:
Bind the check to onchange, NOT onkeyup.
Instead of clearing the value, change the background colour to red and disable the submit button.
Adjust Yorgo's code to achieve this end, because it seems to do what you asked.
totally a newbie...
I just want to know how to dynamically disable an input field when the second input field is filled
eg:
<td><input type="text" name="num-input1" id="dis_rm" value=""></input></td>
<td><input type="text" name="num-input2" id="dis_per" value="" ></input></td>
pls... any links and hints will do...
You simply need to give it a disabled property:
document.getElementById("dis_rm").disabled = true;
document.getElementById("dis_per").disabled = true;
you can use the on change event to see if one of them is filled:
var dis1 = document.getElementById("dis_rm");
dis1.onchange = function () {
if (this.value != "" || this.value.length > 0) {
document.getElementById("dis_per").disabled = true;
}
}
so if the first one is filled, the second one will be disabled
$('#dis_per').blur(function(){
if($(this).val().length != 0){
$('#dis_rm').attr('disabled', 'disabled');
}
});
http://jsfiddle.net/jasongennaro/D7p6U/
Explanation:
when the second input loses focus... .blur()
check to see if it has something inside it. Do this by making sure its length is not zero !=0
if it has something in it, add the attribute disabled and set it to disabled
$('#secondinput').live('blur',function(){
$('#firstinput').attr('disabled', true);
});
tihs works when you filled the second input field and click else where ..........
Just ad this to your 2nd text box:
onblur="document.getElementById('dis_rm').disabled = (''!=this.value);"
http://jsfiddle.net/vbKjx/
Set the disabled flag on the field you want to disable when the OnBlur event fires (for exiting the field) or when the OnChanged event fires (with, of course, validation on the change).
We can ommit some steps, refering to the form as object.
document.form1.num-input2.onchange = function() {
if ( this.value != "" || this.value.length > 0 ) {
document.form1.num-input1.disabled = true;
}
}
I like this answer, using Jquery:
$('#seconddiv').live('focus',function(){
$('#firstdiv').attr('disabled', true);
});
I have a search bar that gives search results with every key press, if it returns no results then the user is presented with a form to ask for help. But if they fill out the "ask form" then type in the search bar again it will erase everything they entered in the ask form. So to solve this, I gave all the inputs in the ask form an id of "second div" and the search field id="firstdiv". Now, if they click or tab to one of the input fields of the ask form it will disable to search bar so their data will never be over written.
I will also add a button that will re-enable the search form if they change their mind.
And for the newbies - I put the code in the head of the document like this:
<html>
<head>
<script type="text/javascript">
$('#seconddiv').live('focus',function(){
$('#firstdiv').attr('disabled', true);
});
</script>
</head>
<body>
....