murday1983 murday1983 - 3 months ago 8
HTML Question

Tabbing out of field causes "undefined" if left blank

I have an amount field which calls a Javascript/JQuery function so if i am in the field and i press tab without entering am amount, i get

Undefined
displayed in my field.

I tried the below to remove it but it doesn't work and i have no idea of anything else i can do

$( "#ApproximateValue_TextBox" ).keydown(function(){
alert("ApproximateValue_TextBox");
document.getElementById("ApproximateValue_TextBox").value = "";
});

$( "#UncryAmount_TextBox" ).keydown(function(){
alert("UncryAmount_TextBox");
document.getElementById("UncryAmount_TextBox").value = "No";
});


<tr id="OrigoUncryAmountField">
<td><label id="AmountUnCryLabel" for="">Approximate amount</label></td>
<td style="padding-top: 6px; padding-right: 0px; padding-left: 0px;">£</td>
<td style="padding-right: 0px; padding-left: 0px;">
<input name="UncryAmount_TextBox" id="UncryAmount_TextBox" onkeyup="SubButtonToDisplay();" onblur="FormatCurrency(this)" type="any" value="UncryAmount_TextBox">
</td>
</tr>

Answer

If you are binding event using jquery then why you not select element using jquery and take other advantages of jquery?

$( "#ApproximateValue_TextBox" ).keydown(function(e){
    e.preventDefault();
    $(this).val("");
});

$( "#UncryAmount_TextBox" ).keydown(function(e){
    e.preventDefault();
    $(this).val("No");
});

function FormatCurrency(obj)
{
  // your some code here
}
function SubButtonToDisplay(obj)
{
// your some code here
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
  <tr id="OrigoUncryAmountField">
     <td><label id="AmountUnCryLabel" for="">Approximate amount</label></td>
     <td style="padding-top: 6px; padding-right: 0px; padding-left: 0px;">£</td>
     <td style="padding-right: 0px; padding-left: 0px;">
          <input name="UncryAmount_TextBox" id="UncryAmount_TextBox" onkeyup="SubButtonToDisplay();" onblur="FormatCurrency(this)" type="any" value="UncryAmount_TextBox">
     </td>
</tr>
  </table>