jQuery how to DRY the similar onclick event calls

Question

I want to listen to two input change events, when one of the changes, check the checkbox and disable the element. Likewise, it needs to roll the checkbox back to the previous state when the value of input boxes back to the default values. The click function looks like 90% resemblance, how to DRY them?

var payment = 'old payment';        
var billAdr = 'old billAdr';

$('#payment').val(payment);
$('#bill-adr').val(billAdr);

$('#payment').on('input', function() {
  var newPayment = $('#payment').val();
  if(newPayment !== payment) {
    $("#save-nxt-time").attr('checked', true);
    $("#save-nxt-time").prop('disabled', true);
  } else {
    var newBillAdr = $('#bill-adr').val();
    if(newBillAdr === billAdr) {
      $("#save-nxt-time").prop('disabled', false);
      $("#save-nxt-time").attr('checked', false);
    }
  }
});

$('#bill-adr').on('input', function() {
  var newBillAdr = $('#bill-adr').val();
  if(newBillAdr !== billAdr) {
    $("#save-nxt-time").attr('checked', true);
    $("#save-nxt-time").prop('disabled', true);
  } else {
    var newPayment = $('#payment').val();
    if(newPayment === payment) {
      $("#save-nxt-time").prop('disabled', false);
      $("#save-nxt-time").attr('checked', false);
    }
  }
});

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <form action="/#">
    <label for="payment">payment</label>
    <input type="text" id="payment" name="payment">
    <br>
    <label for="bill-adr">bill address</label>
    <input type="text" id="bill-adr" name="bill-adr">
    <br>
    <input type="checkbox" id="save-nxt-time">
    <label for="save">Save to next time</label><br><br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

Is the goal to have the checkbox checked and disabled if either of the inputs change? — GitGitBoom, Sep 10 '20 at 00:14
Can you please explain this sentence? *"Likewise, it needs to roll the checkbox back to the previous state when the value of input boxes back to the default values"* ... when... what? — Roko C. Buljan, Sep 10 '20 at 00:20
@RokoC.Buljan sorry about that, I didn't use these values so I forgot to check them. I updated the HTML part. "Likewise.." -> because previously I disable the checkbox if the value of one of them is different from the default value. So, if the value back to the default value, the checkbox should be undisabled. — rj487, Sep 10 '20 at 00:27

Roko C. Buljan · Accepted Answer · 2020-09-10T01:28:20.660

const oldPa = 'old payment';
const oldBi = 'old billAdr';

const $next = $('[name="save-nxt-time"]');
const $paym = $('[name="payment"]').val(oldPa);
const $bill = $('[name="bill-adr"]').val(oldBi);
const $paBi = $paym.add($bill);

$paBi.on('input', () => {
  const bool = $paym.val() !== oldPa || $bill.val() !== oldBi;
  $next.prop({disabled: bool, checked: bool});
});

form label {display: block;}

<form action="/#">
  <label><span>Payment</span> <input type="text" name="payment"></label>
  <label><span>Billing address</span> <input type="text" name="bill-adr"></label>
  <label><input type="checkbox" name="save-nxt-time"> <span>Save to next time</span></label>
  <input type="submit" value="Submit">
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

U make me feel small with my answer ^^ – SKJ Sep 10 '20 at 01:08 — SKJ, Sep 10 '20 at 01:08

score 0 · Answer 2 · answered Sep 10 '20 at 01:01

Like this ?

// first load
checkTest(true);

$('#payment, #bill-adr').on('input', function() { 
   checkTest(false, $(this).attr('id'), $(this).val(), "#save-nxt-time");  
});
  
function checkTest(init = false, id, value, input) {
  var payment = 'old payment', billAdr = 'old billAdr';
 
  if (init === true) {
    $('#payment').val(payment);
    $('#bill-adr').val(billAdr);
  }

  console.clear();
  console.log(value);

  if (value === billAdr || value === payment) {
    $(input).prop('disabled', false).attr('checked', false);
  } else {
    $(input).attr('checked', true).prop('disabled', true);    
  }
}

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <form action="/#">
    <label for="other">payment</label>
    <input type="text" id="payment" name="fname">
    <br>
    <label for="other">bill address</label>
    <input type="text" id="bill-adr" name="fname">
    <br>
    <input type="checkbox" id="save-nxt-time">
    <label for="save">Save to next time</label><br><br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

score 0 · Answer 3 · answered Sep 10 '20 at 01:52

how about putting the text and ids of the elements in an array and looping through run snippet below

$(document).ready(function() {
  const p = new PaymentMgr();
  p.init();
});

class PaymentMgr {
  constructor() {
    this.data = [{
      text: 'old payment',
      id: 'payment'
    }, {
      text: 'old bill address',
      id: 'bill-adr'
    }];
  }

  init() {
    this.data.forEach(element => $(`#${element.id}`)
      .val(element.text)
      .on("input", (e) => {
        ['checked', 'disabled'].forEach(attribute =>
          $("#save-nxt-time")
          .attr(attribute, $(e.target).val() !== element.text))
      })
    );
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="/#">
  <label for="payment">payment</label>
  <input type="text" id="payment" name="payment">
  <br>
  <label for="bill-adr">bill address</label>
  <input type="text" id="bill-adr" name="bill-adr">
  <br>
  <input type="checkbox" id="save-nxt-time">
  <label for="save">Save to next time</label><br><br>
  <input type="submit" value="Submit">
</form>

jQuery how to DRY the similar onclick event calls

3 Answers3