Get jQuery value from unvalidating input field

Question

I have an input field of type number. It requires a number like 21.5 or 0.1 but it fails an 21,5 or 0,1 I don't care actually abouth the seperator since I'm handling it in php, but I can't sent it using Ajax since it's not valide. But I like to keep the type="number" to force mobiledevices to show the num-pad. So I thought it should be pretty easy just to replace the comma by dot before sending it. But therfore I need to get the value of the inputfield.

Is there a method to get the value even it's not validating?

<input type="number" pattern="[0-9]+([\.|,][0-9]+)?" min=0 step=0.1 id="numberinput" title="test"/>

http://jsfiddle.net/p0rdhnew/

document.getElementById('numberinput').value and $('#numberinput').val() are not working, see example in the fiddle.

Answer 1

First, put your event handlers in a document.ready block. Next, use keypress instead of change for the event on a textbox. Lastly, it looks like the pattern is preventing the correct value from being retrieved. One solution that will surely work is to write your own event handler to validate the 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. Hopefully someone else will have a better way, but I think that pattern thing is your problem, here. I've never seen a control prevent you from retrieving its value, before.

UPDATE:

Here is a sample 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 would assign this MaskDecimal to your textboxes like so:

$("#numberinput").on("keypress", MaskDecimal);

Don't forget to reference your JS file on your page if that's where you put your MaskDecimal function!