Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – parseInt is not giving actual value and giving always as 0 in javascript

I have input type which is span. And I want to calculate between two text. So I tried implementing like below. But the alert is always coming 0

function ValidateFormFTTX(ApproveRejectSave) {

  var acceptedUG = parseInt($('#FEUGLEG_txtReadOnlyAccepted').text());
  var TotalUG = parseInt($('#FEUGLEG_txtReadOnly').text());
  var offerUG = parseInt($('#FEUGLEG_txt').val());

  alert(offerUG);

  var calculatedUG = (parseFloat(TotalUG) + parseFloat(offerUG).toFixed(4));

}
<td class="tdWidth disableField">
  <span id="FEUGLEG_txtReadOnly" class="text-center"></span>
</td>

<td class="tdWidth disableField">
  <span id="FEUGLEG_txtReadOnlyAccepted" class="text-center"></span>
</td>


<td class="tdWidth"><input id="FEUGLEG_txt" type="text" class="text-center" value="0" onkeypress="return isNumberKey(event, this);" maxlength="6" /></td>
Tags:

4

Answers


  1. 0

    Make sure that this script is executed after the DOM has fully loaded. You can wrap your code inside a document ready function like this:

    $(document).ready(function() {
    // Your code`enter code here`
});
    Login or Signup to reply.
  2. 0

    Please try like below. change val() to value

    function ValidateFormFTTX(ApproveRejectSave) {
    
    var acceptedUG = parseInt($('#FEUGLEG_txtReadOnlyAccepted').text());
    var TotalUG = parseInt($('#FEUGLEG_txtReadOnly').text());
    var offerUG = parseInt($('#FEUGLEG_txt').value);

    alert(offerUG);

    var calculatedUG = (parseFloat(TotalUG) + parseFloat(offerUG).toFixed(4));
    
}
    Login or Signup to reply.
  3. 0

    You can use a number field instead of a text field. Also, you never called your ValidateFormFTTX function.

    Note: I added a jQuery debounce plugin to limit the number of times the validation is called upon input.

    $('#FEUGLEG_txt').on('input', $.debounce(250, (e) => {
  ValidateFormFTTX(null);
}));

function ValidateFormFTTX(ApproveRejectSave) {
  // Unused
  const acceptedUG = parseFloat($('#FEUGLEG_txtReadOnlyAccepted').text());
  
  const totalUG = parseFloat($('#FEUGLEG_txtReadOnly').text());
  const offerUG = $('#FEUGLEG_txt').get(0).valueAsNumber;

  const calculatedUG = (totalUG + offerUG).toFixed(4);
  
  console.log(calculatedUG);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="tdWidth disableField">
        <span id="FEUGLEG_txtReadOnly" class="text-center">100</span>
      </td>
      <td class="tdWidth disableField">
        <span id="FEUGLEG_txtReadOnlyAccepted" class="text-center">5</span>
      </td>
      <td class="tdWidth">
        <input id="FEUGLEG_txt" type="number" class="text-center" value="0" max="999999" />
      </td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
  4. 0

    You are not executing ValidateFormFTTX, only the function isNumberKey which you did not provide.

    I recommend to not use inline event handlers.

    Also you have the toFixed in the wrong place

    Alternatively use type="number" on the field

    Here is working code

    function ValidateFormFTTX(event) {

  let acceptedUG = $('#FEUGLEG_txtReadOnlyAccepted').text();
  let TotalUG = $('#FEUGLEG_txtReadOnly').text();
  let offerUG = $('#FEUGLEG_txt').val();

  alert(offerUG);

  var calculatedUG = (parseFloat(TotalUG) + parseFloat(offerUG)).toFixed(4); // the toFixed needs to be after the sum

  if (offerUG === 0) {
    alert('Please enter an offer')
    event.preventDefault(); // stop submission
    return;
  }
  // do whatever 
  alert(calculatedUG);
}

$(function() { // on page load
  $("#approvalForm").on("submit", ValidateFormFTTX);
  $('#FEUGLEG_txt').on("input", function() {
    // Replace any non-digit character with an empty string
    this.value = this.value.replace(/[^0-9]/g, '');
  });
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="approvalForm">
  <table>
    <tbody>
      <tr>
        <td class="tdWidth disableField">
          <span id="FEUGLEG_txtReadOnly" class="text-center">10</span>
        </td>

        <td class="tdWidth disableField">
          <span id="FEUGLEG_txtReadOnlyAccepted" class="text-center">20</span>
        </td>


        <td class="tdWidth"><input id="FEUGLEG_txt" type="text" class="text-center" value="0" maxlength="6" /></td>
      </tr>
    </tbody>
  </table>
  <input type="submit" />
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search