Get jQuery value from undefined input field
I have a type number input field. It requires a number equal to 21.5 or 0.1, but it doesn't match 21.5 or 0.1 I don't care when I process it in php, but I can't send it using Ajax as it doesn't valid. But I like to hold type = "number" to make mobiledevices display the num-pad. So I thought it would be quite easy to replace the comma with a dot before sending it. But for this I need to get the value of the input field.
Is there a way to get the value even if it is not validated?
<input type="number" pattern="[0-9]+([\.|,][0-9]+)?" min=0 step=0.1 id="numberinput" title="test"/>
document.getElementById('numberinput').value
and $('#numberinput').val()
do not work, see the example in the script.
source to share
First, put your event handlers in the document.ready block. Then, instead of changing for the event on the textbox, use keypress. Finally, it looks like the pattern is preventing it from getting the correct value. One solution that will certainly work is to write your own event handler to check for keystrokes:
$("document").ready(function(){
var regExPattern = "[0-9]+([\.|,][0-9]+)?"; //You will have to troubleshoot this
$("#numberinput").keypress(function(e){
if (!regExPattern.test($("#numberinput").val() + e.val()){
e.preventDefault();
return false;
}
else
$("#out").text($("#numberinput").val() + e.val());
});
});
This code is untested but should work. Hope someone has a better way, but I think this model is your problem. I've never seen a control prevent you from reestablishing it before.
UPDATE:
Here is an example of the MaskDecimal function:
function MaskDecimal(e) {
var CurrentValue = $(this).val();
var dotkey = [190, 46]; // try to catch inconsistent key mapping
var commakey = [188, 44]; // see: http://unixpapa.com/js/key.html
if (dotkey.indexOf(e.which ) > -1 || commakey.indexOf(e.which ) > -1) {
if (CurrentValue.indexOf(".") > -1) {
e.preventDefault();
return false;
}
else if (CurrentValue == "") {
$(this).val("0.");
e.preventDefault();
return false;
}
else if( commakey.indexOf(e.which ) > -1 ){
$(this).val(CurrentValue +'.');
e.preventDefault();
return false;
}
}
// allow only digits, backspace and enter:
else if ((e.which < 48 || e.which > 57) && !(e.keyCode == 8 || e.keyCode == 13)) {
e.preventDefault();
return false;
}
}
http://jsfiddle.net/p0rdhnew/4/
You have to assign this MaskDecimal to your text fields like this:
$("#numberinput").on("keypress", MaskDecimal);
Don't forget to link to your JS file on your page if you've posted your MaskDecimal function!
source to share
You can listen to the event keydown
and not set a value from the set when non-numeric characters are entered, and also replace the comma with a dot:
myInput.addEventListener('keydown', function(event) {
// not 0-9
if ( event.which < 48 || event.which > 57 ) {
// comma:
if ( event.which == 188 ) {
this.value += '.';
}
event.preventDefault();
}
});
The above code does not support numpad and decimal key, nor comma in the middle of the value:
123 | 456 → (cursor | |) user pressed, → 123456.
source to share