Develop Reference

Combining multiple .change functions into one using Jquery

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?

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>

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.

Get id of active textfield

If I have 4 text boxes in my form, at any point can I get id of text field in which user is filling the information at the moment.
Eg. in following context, I should be able to get id of textbox 3.
Thanks

You can get the currently active element using document.activeElement, so its ID using document.activeElement.id.
Focus on any of the textboxes in the snippet to see how it works:
setInterval(function() {
console.log("Active element: " + document.activeElement.id);
},1000);
<input type="text" name="" id="1">
<br>
<input type="text" name="" id="2">
<br>
<input type="text" name="" id="3">
<br>
<input type="text" name="" id="4">

You can use getAttribute() like the following way:
function myFunc(thatText){
console.log(thatText.getAttribute('id'));
}
<div>
<input type="text" id="txt1" onchange="myFunc(this)" placeholder="1"/><br/>
<input type="text" id="txt2" onchange="myFunc(this)" placeholder="2"/><br/>
<input type="text" id="txt3" onchange="myFunc(this)" placeholder="3"/><br/>
<input type="text" id="txt4" onchange="myFunc(this)" placeholder="4"/>
</div>

There can be an onkeyup function. pass this from the DOM and in js use that argument to get id
function getElem(elem) {
console.log(elem.id)
}
<input type="text" name="test" id="1" onkeyup="getElem(this)">
<br>
<input type="text" name="test" id="2" onkeyup="getElem(this)">
<br>
<input type="text" name="test" id="3" onkeyup="getElem(this)">
<br>
<input type="text" name="test" id="4" onkeyup="getElem(this)">

how i can add input type property the same like a name value this input with jquery

I have the following input fields:
<form id="validate">
<input name="name" value="" validate-required />
<input name="email" value="" validate-required validate-email/>
<input name="date" value="" validate-date/>
<input name="ip" value="" validate-regexp="^\d+\.\d+\.\d+\.\d+$" />
<input type="submit" value="Send" />
</form>
And I need to add a type value for every field the same, like a name value, but with jQuery.
So far I've tried this :
$(":not(input[type=submit])").prop("type", ????); I don't know what I must write on ???? place.

$(":not(input[type=submit])").prop("type", function (i, p) { return this.name; });
Note that this doesn't check if the type you're setting it with is valid. See this for more details jQuery.prop().

If you want to make every input of the same type such as : text , use the following code.
$(":not(input[type=submit])").prop("type", $(this).val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="validate">
<input name="name" value="" validate-required />
<input name="email" value="" validate-required validate-email/>
<input name="date" value="" validate-date/>
<input name="ip" value="" validate-regexp="^\d+\.\d+\.\d+\.\d+$" />
<input type="submit" value="Send" />
</form>
For other inputs in your code you could also use the following input types that are supported in HTML5 as well :
text,date,datetime,email,url,datetime-local
A list of all possible input type attribute values is given : here.

jQuery to populate array-named form fields based on first entered text box value

I have a form with variable number of inputs as an array
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
The idea is when i put some value in the first field (foo[1]) i need the jQuery or Javascript copy the value from #foo[1] into #foo[2], #foo[3], etc depending on the array.

Do you need following behavior :
$(document).ready(function(){
$("input[id^=foo\\[]").prop("disabled",true); //disable all elements first
$("input#foo\\[1\\]").prop("disabled",false); //then enable the first one
$("input#foo\\[1\\]").change(function(){
var source = $(this);
var currentVal = $(source).val();
$("input[id^=foo\\[]").each(function(){
if(!$(this).is(source))
$(this).val(currentVal);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value=""/>
<input type="text" id="foo[3]" name="foo[3]" value=""/>
<input type="text" id="foo[4]" name="foo[4]" value=""/>
<input type="text" id="foo[5]" name="foo[5]" value=""/>
</form>

$('input').on('input', function(){
$(this).siblings().val($(this).val());
});
Couldn't tell if you just wanted the first or all. If just the first, you can target with an id or jQuery.
$('input').eq(0).on('input', function(){});

Something like this
HTML
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
JavaScript
$("input[id=foo\\[1\\]").on("input", function (){
$(this).siblings().val($(this).val());
});
And if you want the other to be readonly:
$("input[id^=foo\\[]:not([id=foo\\[1\\]])").attr("readonly", "readonly");

How to I only show the divs if that div has an input that isn't blank?

I have a bunch of divs that are all hidden like this
<div class="elements">
<input value="something" type="text" value="" name="name">
<input value="" type="text" name="phone">
</div>
<div class="elements">
<input type="text" value="" name="name" class="contact_name">
<input value="something" type="text" name="phone">
</div>
<div class="elements">
<input type="text" value="" name="name" class="contact_name">
<input value="" type="text" name="phone">
</div>
<div class="elements">
<input value="something_again" type="text" value="" name="name">
<input value="" type="text" name="phone">
</div>
CSS
.elements{display:none;}
I want to show only the element divs that have an input of that is not an empty string....so in the above example i would show the first, second and fourth divs because at least one input has a value...
$('.elements').find('input').each(function)...
that is what i have so far but not sure how to search if there is at least one input that isn't blank

Try this
$('.elements input:text[value!=""]').parents(".elements").show();

$('.elements').each(function() {
var count = $(this).find('input[value!=""]').length;
count > 0 ? $(this).show() : $(this).hide();
});