Js/jquery: Fire Onchange From A Disabled/readonly Input Without Using Button

May 10, 2024 Post a Comment

The goal is to get the total Qty for the whole year. The user will input numbers into 3 different textboxes(Jan,Feb,Mar), then the sum will be displayed into a disabled textbox(Qua

Solution 1:

Method 1:

Basically, what you need to do is to trigger the change event for the disabled quarter fields programatically, using jQuery .trigger() function.

As I don't know how your HTML is structured -this why it is always recommended to provide MCVE example- I made a demo example and I've done things differently, like below:

jsFiddle 1

var monthly = $('.monthly'),
  Qrt = $('.quarter');

monthly.on('change, input', function() {
  var $th = $(this),
    // depending on the value of the data-q attribute, we pick// all input fields with the same data-q as an array, then//loop through them adding their values up
    q = $th.attr('data-q'),
    qArray = $th.parent().children('input[data-q="' + q + '"]'),
    tempSum = 0;

  for (var i = 0, ln = qArray.length; i < ln; i++) {
    tempSum += +$(qArray[i]).val();
  }
  
  // we pick the corresponding quarter sum field, again depending// on the value of the data-q attritues, and update its value, then// we trigger the change event of this quarter sum field.
  $('#' + q).val(tempSum).trigger('change'); // here you trigger it
});

Qrt.on('change', function() {
  var qSum = 0;
  for (var i = 0, ln = Qrt.length; i < ln; i++) {
    qSum += +$(Qrt[i]).val();
  }
  $('#final').val(qSum);
});

.monthly { width: 32%; }

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><h3>Grand Total:</h3><inputtype="text"id="final"disabled><hr><h3>1st Q:</h3><inputtype="text"class="monthly"data-q="q1"><inputtype="text"class="monthly"data-q="q1"><inputtype="text"class="monthly"data-q="q1"><br>Sum:<inputid="q1"type="text"class="quarter"disabled><h3>2nd Q:</h3><inputtype="text"class="monthly"data-q="q2"><inputtype="text"class="monthly"data-q="q2"><inputtype="text"class="monthly"data-q="q2"><br>Sum:<inputid="q2"type="text"class="quarter"disabled><h3>3rd Q:</h3><inputtype="text"class="monthly"data-q="q3"><inputtype="text"class="monthly"data-q="q3"><inputtype="text"class="monthly"data-q="q3"><br>Sum:<inputid="q3"type="text"class="quarter"disabled><h3>4th Q:</h3><inputtype="text"class="monthly"data-q="q4"><inputtype="text"class="monthly q-4th"data-q="q4"><inputtype="text"class="monthly q-4th"data-q="q4"><br>Sum:<inputid="q4"type="text"class="quarter"disabled>

Method 2:

since any change you make to any .monthly field will change the corresponding value of quarter sum, and thus it'll also affect the value of the yearly sum, you don't need to capture the change event of the disabled quarter sum fields, just loop through their values and update the value of the yearly field, all should be done inside the on('change') event of the .monthly fields, like below:

jsFiddle 2

jQuery

Baca Juga

var monthly = $('.monthly'),
    Qrt = $('.quarter');

monthly.on('change, input', function() {
  var $th = $(this),
    q = $th.attr('data-q'),
    qArray = $th.parent().children('input[data-q="' +q+ '"]'),
    tempSum = 0,
    qSum = 0;

  for (var i = 0, ln = qArray.length; i < ln; i++) {
    tempSum += +$(qArray[i]).val();
  }
  $('#' + q).val(tempSum);
  
  // code belowfor (var i = 0, ln = Qrt.length; i < ln; i++) {
    qSum += +$(Qrt[i]).val();
  }
  $('#final').val(qSum);
});

Update:

For the updated HTML in the OP, replace qArray line with this one:

$th.parents('.form-group').find('input[data-q="' + q + '"]')`,

Noteparents() is with "s" letter, unlike the former parent() which moves up a single level up the DOM, it does " search through the ancestors of these elements in the DOM tree and construct a new jQuery object from the matching elements ordered from immediate parent on up. ", so it travels up until we reach the matchng parent, here it is .form-group.

Then instead of children(), we use find().

jsFiddle 3

Solution 2:

Please find the below code (Finding the total for quarter A & quarter B) for your reference. Please use same methodology for other quarters.

<!DOCTYPE html><html><head><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script>
$(document).ready(function(){
/* FINDING THE QUARTER A AND QUARTER B */functionfindingQuaterTotal () {
      /* LOADING QUARTER A AND FINDING ITS TOTAL - STARTS */var mosQuarterA = document.getElementsByClassName("quarterA"),
          mosCountQuarterA = mosQuarterA.length,
          totalQuarterA = 0,
          i = 0;

      for (i = 0; i < mosCountQuarterA; i++) {
          totalQuarterA = totalQuarterA + parseInt(mosQuarterA[i].value);
      }
      /* ADDING INTO QUATER A DISABLED TEXTBOX */
      $("#quarterA").val(totalQuarterA);
      /* LOADING QUARTER A AND FINDING ITS TOTAL - ENDS *//* LOADING QUARTER B AND FINDING ITS TOTAL - STARTS */var mosQuarterB = document.getElementsByClassName("quarterB"),
          mosCountQuarterB = mosQuarterB.length,
          totalQuarterB = 0;

      for (i = 0; i < mosCountQuarterB; i++) {
          totalQuarterB = totalQuarterB + parseInt(mosQuarterB[i].value);
      }
      /* ADDING INTO QUARTER B DISABLED TEXTBOX */
      $("#quarterB").val(totalQuarterB);
      /* LOADING QUARTER B AND FINDING ITS TOTAL - ENDS *//* TRIGGERING CHANGE EVENT IN THE DISABLED TEXTBOX WHOSE ID STARTS WITH QUARTER.*/
      $("input[id^='quarter']").trigger("change");
};

/* ABOVE CHANGE TRIGGER WILL CALL BELOW EVENTS - STARTS */
$("input[id^='quarter']").change(function () {                        $("#final").val(parseInt($("#quarterA").val())+parseInt($("#quarterB").val()));
});
/* ABOVE CHANGE TRIGGER WILL CALL BELOW EVENTS - ENDS *//* IF ANY VALUE CHANGES IN MONTH TEXT BOX, FLLWING FUNCTION WILL BE CALLED - STARTS */
$("input[id^='month']").on("change keyup",function () {
  findingQuaterTotal();
});
findingQuaterTotal();
/* IF ANY VALUE CHANGES IN MONTH TEXT BOX, FLLWING FUNCTION WILL BE CALLED - ENDS */  
});
</script></head><body><h2>Quater A</h2>
Jan - <inputtype="number"id="month1"value="6"class="quarterA"></br>
Feb - <inputtype="number"id="month2"value="16"class="quarterA"></br>
March - <inputtype="number"id="month3"value="25"class="quarterA"></br>
Quater A Total - <inputtype="number"id="quarterA"value=""disabled></br><br/><br/><h2>Quater B</h2>
April - <inputtype="number"id="month4"value="6"class="quarterB"></br>
May - <inputtype="number"id="month5"value="16"class="quarterB"></br>
June - <inputtype="number"id="month6"value="25"class="quarterB"></br>
Quater B Total - <inputtype="number"id="quarterB"value=""disabled></br>


Quarter A and Quarter B total - <inputtype="number"id="final"value=""disabled></body></html>

JavaScript Test