Not allowing alpha characters when certain dropdown option is selected

Question

I have a dropdown (transfertype) and a textbox (purchaseprice). When the dropdown (transfertype) is selected this decides what the textbox(purchaseprice) is allowed to do.

I am trying to figure out how when sale is selected to not allow alpha characters but if anything else is selected to then allow them again since it prefills based on the dropdown choice.

$(document).on('change', '#transfertype', function() {

    var purchaseprice = $('#purchaseprice');

    if($(this).val()==='' || $(this).val()==='Sale') {
        purchaseprice.val('').prop('readOnly', false);
    } else {
        purchaseprice.val($(this).val()).prop('readOnly', true);
        purchaseprice.valid();
    }
    calculateTotal();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label for="transfertype">Transfer type:</label>
<select name="transfertype" id="transfertype" required>
  <option value="">Select Type</option>
  <option value="Sale">Sale</option>
  <option value="Gift">Gift</option>
  <option value="Trade">Trade</option>
  <option value="Repossession">Repossession</option>
  <option value="Court Order">Court Order</option>
  <option value="Inheritance">Inheritance</option>
  <option value="Add Name">Add Name</option>
  <option value="Remove Name">Remove Name</option>

<label for="purchaseprice" class="labelspace">Purchase price:</label>
 <input type="text" name="purchaseprice" id="purchaseprice" required="yes"/>

Any help with this would be greatly appreciated.

I am confused, didn't you already do that? I'm selecting 'Sale' and I'm allowed to write anything I want, while selecting anything else forbids me from doing so. What is your desired functionality? — George Irimiciuc, Sep 21 '15 at 15:13

score 1 · Accepted Answer · edited May 23 '17 at 12:29

Try this. Simply test for what button was pressed when Sale is selected.

As always, it is recommended that you validate this in your backend, too.

$(document).on('change', '#transfertype', function () {

var purchaseprice = $('#purchaseprice');

if ($(this).val() === '' || $(this).val() === 'Sale') {
    purchaseprice.val('').prop('readOnly', false);


    $("#purchaseprice").keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
        // Allow: Ctrl+A, Command+A
        (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
        // Allow: home, end, left, right, down, up
        (e.keyCode >= 35 && e.keyCode <= 40)) {
            // let it happen, don't do anything
            return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });


} else {
    purchaseprice.val($(this).val()).prop('readOnly', true);
    purchaseprice.valid();
}
calculateTotal();

});

jsfiddle

Original function

Well I have mediocre js&jquery experience, and I just googled 'javascript allow only numbers' to solve this specific problem. I would've done something similar, but probably would've skipped a few key combinations, so it's better to use those that already were written, since they consider every case. And you can also adapt it to your needs, if needed be. — George Irimiciuc, Sep 21 '15 at 17:00

Not allowing alpha characters when certain dropdown option is selected

1 Answers1