We Keep Coding

Test against actual value of input type="number"

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

Possible collision/conflict between 2 javascripts?

Here is example http://jsfiddle.net/rigaconnect/gLCjy/14/
One javascript ensures copy-paste value from above input field. User presses and holds ctrl, then click on field below.
$(document).ready(function(){
$("input").on('click', function(e) {
var name1 = $(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input').val();
if(e.ctrlKey) $(this).val(name1);
});
});
Second javascript changes input field value to 1 if in certain input fields value is entered or changed
<input type="text" name="is_row_changed[]" id="is_row_changed1" size="1">
<script>
$(".row_changed1").on("change", function () {
document.getElementById('is_row_changed1').value = 1;
});
</script>
html input fields are like this
<input type="text" name="date_year[]" id="date_year1" class="row_changed1" value="" size="2">
If I enter (or copy-paste) values without ctrl+click then all works as necessary.
However if I hold ctrl and click in field then value is copied and appears in the field, but value here <input type="text" name="is_row_changed[]" id="is_row_changed1" size="1"> does not change.
Enter something in left top field. Right top field value changes to 1. That is ok.
Then press and hold ctrl and click in left bottom field. Left bottom field value becomes the same as left top field's value. This is also ok.
But right bottom field value does not change. This is the problem... Actually no idea. Need advice to which direction to go....

That is because change event doesnot get triggered on programatically assined values. You can manually trigger it when you assign the value to the textbox.
$(document).ready(function () {
$("input").on('click', function (e) {
var name1 = $(this).closest('tr').prev().find('td:eq(' + $(this).closest('td').index() + ')').find('input').val();
if (e.ctrlKey) {
$(this).val(name1).trigger('change'); //Trigger the change event here.
};
});
});
Fiddle

Prevent changing the Textbox value in Jquery [duplicate]

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.

If input value is blank, assign a value of "empty" with Javascript

So I have an input field, if it's blank, I want its value to be the words "empty", but if there is any value inputted, I want the value to be the inputted value. I want to use javascript for this, any idea how this can be done?
UPDATE: Sorry, I don't think I explained it too well. I don't mean placeholder text. I mean the captured value of it. So if it's blank, the captured val() for it should be "empty", if it's filled, the captured val() for it should be that val()

If you're using pure JS you can simply do it like:
var input = document.getElementById('myInput');
if(input.value.length == 0)
input.value = "Empty";
Here's a demo: http://jsfiddle.net/nYtm8/

I'm guessing this is what you want...
When the form is submitted, check if the value is empty and if so, send a value = empty.
If so, you could do the following with jQuery.
$('form').submit(function(){
var input = $('#test').val();
if(input == ''){
$('#test').val('empty');
}
});
HTML
<form>
<input id="test" type="text" />
</form>
http://jsfiddle.net/jasongennaro/NS6Ca/
Click your cursor in the box and then hit enter to see the form submit the value.

This can be done using HTML5's placeHolder or using JavaScript.
Checkout this post.

You can set a callback function for the onSubmit event of the form and check the contents of each field. If it contains nothing you can then fill it with the string "empty":
<form name="my_form" action="validate.php" onsubmit="check()">
<input type="text" name="text1" />
<input type="submit" value="submit" />
</form>
and in your js:
function check() {
if(document.forms["my_form"]["text1"].value == "")
document.forms["my_form"]["text1"].value = "empty";
}

You can do this:
var getValue = function (input, defaultValue) {
return input.value || defaultValue;
};

I think the easiest way to solve this issue, if you only need it on 1 or 2 boxes is by using the HTML input's "onsubmit" function.
Check this out and i will explain what it does:
<input type="text" name="val" onsubmit="if(this == ''){$this.val('empty');}" />
So we have created the HTML text box, assigned it a name ("val" in this case) and then we added the onsubmit code, this code checks to see if the current input box is empty and if it is, then, upon form submit it will fill it with the words empty.
Please note, this code should also function perfectly when using the HTML "Placeholder" tag as the placeholder tag doesn't actually assign a value to the input box.

Disable an input field if second input field is filled

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>
....