Combining multiple .change functions into one using Jquery

Question

I have a few text input fields that will update some hidden fields.

I have a few .change functions that will watch for changes on the visible input fields.

Here is my JSFiddle - https://jsfiddle.net/tcgmr698/

Jquery

    $("#TravellerContact_ManualAddress1").change(function () {
        $('input[id=TravellerContact_Address1]').val($('input[id=TravellerContact_ManualAddress1]').val())
    });

    $("#TravellerContact_ManualAddress2").change(function () {
        $('input[id=TravellerContact_Address2]').val($('input[id=TravellerContact_ManualAddress2]').val())
    });

    $("#TravellerContact_ManualAddress3").change(function () {
        $('input[id=TravellerContact_Address3]').val($('input[id=TravellerContact_ManualAddress3]').val())
    });

    $("#TravellerContact_ManualAddress4").change(function () {
        $('input[id=TravellerContact_Address4]').val($('input[id=TravellerContact_ManualAddress4]').val())
    });

    $("#TravellerContact_ManualAddress5").change(function () {
        $('input[id=TravellerContact_Address5]').val($('input[id=TravellerContact_ManualAddress5]').val())
    });

    $("#TravellerContact_ManualPostCode").change(function () {
        $('input[id=TravellerContact_PostCode]').val($('input[id=TravellerContact_ManualPostCode]').val())
    });

HTML

<div id="manualFullAddress" class="fullAddress">
            <input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress1" name="TravellerContact_ManualAddress1" placeholder="Address" type="text">

            <input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress2" name="TravellerContact_ManualAddress2" placeholder="Address 2" type="text">
            <input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress3" name="TravellerContact_ManualAddress3" placeholder="Address 3" type="text">
            <input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress4" name="TravellerContact_ManualAddress4" placeholder="City" type="text">
            <input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress5" name="TravellerContact_ManualAddress5" placeholder="Province" type="text">
            <input class="form-control manualAddressEntry-js" id="TravellerContact_ManualPostCode" name="TravellerContact_ManualPostCode" placeholder="Postal Code" type="text">
        </div>

Hidden fields that get posted to the DB

<input class="HideValFromSet" id="TravellerContact_Address1" name="TravellerContact.Address1" type="hidden" value="">

<input class="HideValFromSet" id="TravellerContact_Address2" name="TravellerContact.Address2" type="hidden" value="">

<input class="HideValFromSet" id="TravellerContact_Address3" name="TravellerContact.Address3" type="hidden" value="">

<input class="HideValFromSet" id="TravellerContact_Address4" name="TravellerContact.Address4" type="hidden" value="">

<input class="HideValFromSet" id="TravellerContact_Address5" name="TravellerContact.Address5" type="hidden" value="">

<input class="HideValFromSet" id="TravellerContact_PostCode" name="TravellerContact.PostCode" type="hidden" value="">

My main question is how do I go about combining these functions into one function? Is it possible?

Use a starts-with selector for the id, add this and String.prototype.replace() and you're almost done. — Andreas
– Andreas, Commented Aug 7, 2020 at 10:46
Please consider changing your html, for example, for your manual field you could use <input data-target="#TravellerContact_Address1" type="text" />, than your JS would be much easier, starting with $('[data-target]').on('change', function{ var thisInput = $(this); var thisTarget = $(thisInput.data('target')); thisTarget.val( thisInput.val() ); }); Just make your life easier... cheers — skobaljic
– skobaljic, Commented Aug 7, 2020 at 10:47

Andreas · Accepted Answer · 2020-08-07 10:53:36Z

The relevant elements are all children of #manualFullAddress. We can therefor add the .change() event handler to this parent element instead ("event delegation", but it would also work with one event handler per <input /> element)

We can use this to get the id of the <input /> element. And with .replace("Manual", "") we can get the id of the corresponding <input type="hidden" /> element.

$("#manualFullAddress").on("change", "input", function() {
  const input = $(this);

  $("#" + this.id.replace("Manual", "")).val(input.val());
});

$("#manualFullAddress").on("change", "input", function() {
  const input = $(this);

  $("#" + this.id.replace("Manual", "")).val(input.val());
});

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

<div id="manualFullAddress" class="fullAddress">
  <input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress1" name="TravellerContact_ManualAddress1" placeholder="Address" type="text">
  <input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress2" name="TravellerContact_ManualAddress2" placeholder="Address 2" type="text">
  <input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress3" name="TravellerContact_ManualAddress3" placeholder="Address 3" type="text">
  <input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress4" name="TravellerContact_ManualAddress4" placeholder="City" type="text">
  <input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress5" name="TravellerContact_ManualAddress5" placeholder="Province" type="text">
  <input class="form-control manualAddressEntry-js" id="TravellerContact_ManualPostCode" name="TravellerContact_ManualPostCode" placeholder="Postal Code" type="text">
</div>

<div>
"Hidden" Elements
<br />
<input class="HideValFromSet" id="TravellerContact_Address1" name="TravellerContact.Address1" value="">
<input class="HideValFromSet" id="TravellerContact_Address2" name="TravellerContact.Address2" value="">
<input class="HideValFromSet" id="TravellerContact_Address3" name="TravellerContact.Address3" value="">
<input class="HideValFromSet" id="TravellerContact_Address4" name="TravellerContact.Address4" value="">
<input class="HideValFromSet" id="TravellerContact_Address5" name="TravellerContact.Address5" value="">
<input class="HideValFromSet" id="TravellerContact_PostCode" name="TravellerContact.PostCode" value="">
</div>

Great help @Andreas didn't know you could use the .change function on the parent div. The .replace was a great idea

Avadh Vashisth · Accepted Answer · 2020-08-07 11:20:26Z

0

In your case, you can bind change event using .manualAddressEntry-js and get the id dynamically as shown below.

$('.manualAddressEntry-js').change( function() {
  var id = $(this).attr('id').replace("Manual", "");
  $(`input[id=${id}]`).val($(`input[id=${id}]`).val());
});

But I will recommend changing id to data- and using that instead of id, if you're not using it anywhere else.

edited Aug 7, 2020 at 11:20

answered Aug 7, 2020 at 11:05

Avadh Vashisth

1352 silver badges9 bronze badges

1 Comment

Avadh Vashisth Over a year ago

You need to do replace also.

Collectives™ on Stack Overflow

Combining multiple .change functions into one using Jquery

Jquery

HTML

Hidden fields that get posted to the DB

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Jquery

HTML

Hidden fields that get posted to the DB

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related