jquery keyup event on text box get id - javascript

I have build a form in html where dynamically generate some input field with dynamic ids(e.g id_1, id_2, id_3 etc). Now I want to create a event when I keyup on each input box.
here is my html file
<div id="addinput">
<div id="innneraddinput">
<div class="inputDivId">
<input class="search" id="searchid" type="text" size="30" name="p_new" value="" placeholder="" />
</div>
<div class="inputDivId">
<input type="text" id="p_new" size="10" name="p_new" value="" placeholder="" />
</div>
<div class="inputDivId">
<input type="text" id="p_new" size="10" name="p_new" value="" placeholder="" />
</div>
<div class="inputDivId">
<input type="text" id="p_new" size="10" name="p_new" value="" placeholder="" />
</div>
<div class="inputDivId">
<input type="text" id="p_new" size="10" name="p_new" value="" placeholder="" />
</div>
<div class="inputDivId">
<input type="text" id="p_new" size="15" name="p_new" value="" placeholder="" />
</div>
Add
</div>
<div id="result"></div>
</div>

$("#innneraddinput input").keyup(function() {
var v = this.id;
});
If elements are created dynamically, use the on method:
$("#innneraddinput input").on("keyup", function() {
var v = this.id;
});

$("#innneraddinput input").keyup(function() {
var id = $(this).attr('id');
}

Related

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.

How to get focusin for all textbox? using javascript event not using jquery

Hello Guys, I need help a little bit. Can anyone help me, how to use
this keyword in my case?
<form>
<div class="form-group">
<label for="txtFirstName">Your name</label>
<input id="txtFirstName" name="txtFirstName" type="text" autocomplete="off" class="inputBox" />
</div>
<div class="form-group">
<label for="txtEmail">Email address</label>
<input id="txtEmail" name="txtEmail" type="email" autocomplete="off" class="inputBox" />
</div>
<div class="form-group">
<select id="drpPosition" name="drpPosition">
<option>I would describe my user type as </option>
<option>Web developer </option>
<option>Web designer </option>
</select>
</div>
<div class="form-group">
<label for="txtPassword">Password</label>
<input id="txtPassword" type="password" class="cool" autocomplete="off" class="inputBox" />
<small>Minimum 8 characters</small>
</div>
<div class="form-group">
<input type="submit" name="btnSubmit" id="btnSubmit" value="Next" />
</div>
</form>
This is my JavaScript Code:
var inputFirstName = document.querySelector('.inputBox');
console.log(inputFirstName);
this.addEventListener('focusin', inputAddClassFunc);
this.addEventListener('focusout', inputRemoveClassFunc);
function inputAddClassFunc(event){
console.log(this);
this.previousElementSibling.classList.add('active');
}
function inputRemoveClassFunc(event){
var hasValue = this.value;
if(!hasValue) {
this.previousElementSibling.classList.remove('active');
}
}
When I focusin into the textbox, active class will be added to it's
sibling's lable And in my case, It only works in first textbox but not
for all textbox. How can I use "this" to works for all textbox?
I'd use event delegation instead - add focusin and focusout listeners to the form, and when the event fires, if the target of the event is one of the .inputBoxes, carry out the logic to change the class of the event.target.previousElementSibling:
const form = document.querySelector('form');
form.addEventListener('focusin', inputAddClassFunc);
form.addEventListener('focusout', inputRemoveClassFunc);
function inputAddClassFunc(event) {
if (event.target.matches('.inputBox')) {
event.target.previousElementSibling.classList.add('active');
}
}
function inputRemoveClassFunc(event) {
if (event.target.matches('.inputBox')) {
var hasValue = event.target.value;
if (!hasValue) {
event.target.previousElementSibling.classList.remove('active');
}
}
}
.active {
background-color: yellow;
}
<form>
<div class="form-group">
<label for="txtFirstName">Your name</label>
<input id="txtFirstName" name="txtFirstName" type="text" autocomplete="off" class="inputBox" />
</div>
<div class="form-group">
<label for="txtEmail">Email address</label>
<input id="txtEmail" name="txtEmail" type="email" autocomplete="off" class="inputBox" />
</div>
<div class="form-group">
<select id="drpPosition" name="drpPosition">
<option>I would describe my user type as </option>
<option>Web developer </option>
<option>Web designer </option>
</select>
</div>
<div class="form-group">
<label for="txtPassword">Password</label>
<input id="txtPassword" type="password" autocomplete="off" class="inputBox" />
<small>Minimum 8 characters</small>
</div>
<div class="form-group">
<input type="submit" name="btnSubmit" id="btnSubmit" value="Next" />
</div>
</form>
Also note that if you want the txtPassword element to have the inputBox class, you should change
<input id="txtPassword" type="password" class="cool" autocomplete="off" class="inputBox" />
to
<input id="txtPassword" type="password" autocomplete="off" class="inputBox" />
(remove the duplicate cool attribute)

add a class to parent element based on child class - inside of a submit event

Trying to target only parent divs that have child with class="has-error"
I'm using the following, but scope inside of conditional is referring to #pdf-form. Please advise how to fix.
JS:
$( "#pdf-form" ).submit(function( event ) {
if ($(".form-control").hasClass("has-error")) {
$(this).parent().addClass('has-error');
}
event.preventDefault();
});
HTML:
<form action="http://example.com" accept-charset="utf-8" id="pdf-form" enctype="multipart/form-data" method="post" novalidate="novalidate">
<div style="display:none">
<input type="hidden" name="params_id" value="363">
<input type="hidden" name="csrf_token" value="668186205c07bd680af53ba2f5f05ca78143a43d">
</div>
<div class="form-group">
<label for="email" class="control-label">Email</label>
<input type="text" name="email" value="" id="freeform_email" maxlength="150" class="form-control has-error" required="" aria-required="true" aria-describedby="freeform_email-error" aria-invalid="true">
<div id="freeform_email-error" class="has-error">Please Enter a Valid Email Address</div>
</div>
<div class="form-group">
<label for="first_name" class="control-label">Name</label>
<div class="row">
<div class="col-sm-6">
<input type="text" name="first_name" value="" id="freeform_first_name" maxlength="150" class="form-control" placeholder="Your first name">
</div>
<div class="clearfix visible-xs" style="height: 10px;"></div>
<div class="col-sm-6">
<input type="text" name="last_name" value="" id="last_name" maxlength="150" class="form-control" placeholder="Your last name">
</div>
</div>
</div>
<div class="form-group hidden">
<label class="control-label">report</label>
<input type="file" name="report[0]" value="" id="freeform_report0">
</div>
<input type="hidden" name="pdf_press_entries" value="77|8">
<input type="hidden" name="pdf_press_template" value="site/email_pdf_report">
<input type="hidden" name="pdf_press_upload_fieldname" value="report">
<input type="hidden" name="pdf_press_filename_fieldname" value="report_filename">
<p><input type="submit" name="submit" value="Submit" class="btn btn-primary"></p>
</form>
It's still unclear exactly what you are looking for. I suspect your initial setup is not quite correct, but this should give you an idea of how to access the parent elements that contain error controls.
It won't work here in the Stack Overflow snippet environment, because they disable submit events, but you can see it working here. I added an additional class to illustrate what is getting selected when you click submit.
$( "#pdf-form" ).submit(function( event ) {
var $errorElements = $(".form-control.has-error");
$errorElements.parent().addClass('added-error');
// If there are error elements, don't submit the form
$errorElements.length > 0 ? event.preventDefault() : "";
});
.has-error { background:red; }
.added-error { border:2px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://example.com" accept-charset="utf-8" id="pdf-form" enctype="multipart/form-data" method="post" novalidate="novalidate">
<div style="display:none">
<input type="hidden" name="params_id" value="363">
<input type="hidden" name="csrf_token" value="668186205c07bd680af53ba2f5f05ca78143a43d">
</div>
<div class="form-group">
<label for="email" class="control-label">Email</label>
<input type="text" name="email" value="" id="freeform_email" maxlength="150" class="form-control has-error" required="" aria-required="true" aria-describedby="freeform_email-error" aria-invalid="true">
<div id="freeform_email-error" class="has-error">Please Enter a Valid Email Address</div>
</div>
<div class="form-group">
<label for="first_name" class="control-label">Name</label>
<div class="row">
<div class="col-sm-6">
<input type="text" name="first_name" value="" id="freeform_first_name" maxlength="150" class="form-control" placeholder="Your first name">
</div>
<div class="clearfix visible-xs" style="height: 10px;"></div>
<div class="col-sm-6">
<input type="text" name="last_name" value="" id="last_name" maxlength="150" class="form-control" placeholder="Your last name">
</div>
</div>
</div>
<div class="form-group hidden">
<label class="control-label">report</label>
<input type="file" name="report[0]" value="" id="freeform_report0">
</div>
<input type="hidden" name="pdf_press_entries" value="77|8">
<input type="hidden" name="pdf_press_template" value="site/email_pdf_report">
<input type="hidden" name="pdf_press_upload_fieldname" value="report">
<input type="hidden" name="pdf_press_filename_fieldname" value="report_filename">
<p><input type="submit" name="submit" value="Submit" class="btn btn-primary"></p>
</form>
To cancel the submit it appears, based on your example, that you need to detect if any form-control elements have the has-error class. Then, to set the has-error on the class on the parents of those form-control elements you need to use the .each() approach instead of the if you have tried.
Something like this:
$( "#pdf-form" ).submit(function( event ) {
if ($(".form-control").hasClass("has-error").length > 0){
event.preventDefault();
}
$(".form-control").hasClass("has-error").each(function() {
$(this).parent().addClass('has-error');
}
});

AngulaJS input fields not loose focus when clicked

I am trying to create a simple angularjs form where i want to have nested object as ng-model
$scope.project = {
name:"Some Name",
location:{line1:"" , line2:"", city:"", zipcode:""}
}
http://plnkr.co/edit/RfN7qZBX3HlOtGhFOdFX?p=preview
now the problem is when i click on line2 , city,state etc focus goes back to line1
tried changing HTML and several other stuff but don't know what to do..
Tried removing bootstrap as well.
The issue is that you are misusing the <label> tag. Instead of this:
<label class="form-group">
Client Location
<div class="controls">
<input type="text" data-ng-model="project.location.line1" class="form-control" placeholder="Line 1">
<input type="text" data-ng-model="project.location.line2" class="form-control" placeholder="Line 2">
<input type="text" data-ng-model="project.location.city" class="form-control" placeholder="City">
<input type="text" data-ng-model="project.location.state" class="form-control" placeholder="State">
<input type="text" data-ng-model="project.location.zip" class="form-control" placeholder="Zip Code">
<input type="text" data-ng-model="project.location.country" class="form-control" placeholder="Country">
</div>
</label>
Try this:
<div class="form-group">
<label>Client Location</label>
<div class="controls">
<input type="text" data-ng-model="project.location.line1" class="form-control" placeholder="Line 1">
<input type="text" data-ng-model="project.location.line2" class="form-control" placeholder="Line 2">
<input type="text" data-ng-model="project.location.city" class="form-control" placeholder="City">
<input type="text" data-ng-model="project.location.state" class="form-control" placeholder="State">
<input type="text" data-ng-model="project.location.zip" class="form-control" placeholder="Zip Code">
<input type="text" data-ng-model="project.location.country" class="form-control" placeholder="Country">
</div>
</div>
The first label should be changed as well. Instead of this:
<label class="form-group">Name
<div class="controls">
<input type="text" data-ng-model="project.name" class="form-control" placeholder="Name">
</div>
</label>
Try this:
<div class="form-group">
<label>Name</label>
<div class="controls">
<input type="text" data-ng-model="project.name" class="form-control" placeholder="Name">
</div>
</div>
Or this:
<div class="form-group">
<label>
Name
<input type="text" data-ng-model="project.name" class="form-control" placeholder="Name">
</label>
</div>

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();
});

Categories

Resources