We Keep Coding

HTML FORM - Change Parts Of Readonly String Field Using onchange()

I want to assign the values - value and value 2 into the DATAID and DEPNUM when clicking the drop-down and using onchange() function in the following HTML FORM
The places that are being assigned are parts of a readonly field which contains string.
My goal is to create a readonly string which will contain the values that I've chosen from the dropdown fields, all combined in 1 string and separated by underscore.
I've been trying to use onChange method "myFunction()"
<input name="_1_1_2_1" tabindex="-1" class="valueEditable" id="myInput" onchange="myFunction()" type="text" size="32" value="...">
which will look like :
function myFunction()
{
var x = document.getElementById("myInput").value;
document.getElementById("demo").innerHTML = x;
}
eventually I run it on the paragraph :
<p id="demo" value="DATAID_DOCTYPE_DEPNUM_NTA">DATAID_DOCTYPE_DEPNUM_NTA</p>
The problem is that the value at is not changing instant as i change value2 or value.

You can bind two event-listener for both two input fields and updated the readonly textfield value by below approach.
$(document).ready(function(){
$('#field1').keyup(function() {
updatedReadonlyFieldVal($(this), 0);
});
$('#field2').keyup(function() {
updatedReadonlyFieldVal($(this), 2);
});
function updatedReadonlyFieldVal(elem, index) {
let val = elem.val();
let destVal = $('#destination').val();
let splittedDestVal = destVal.split('_');
splittedDestVal[index] = val;
$('#destination').val(splittedDestVal.join('_'));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="field1" name="field1">
<input type="text" id="field2" name="field2">
<input value="DATAID_DOCTYPE_DATANUM" readonly id="destination">
Please don't hesitate to let me know if you have any query.

angucomplete-alto auto populate based in other input

i have 2 autocomplete select box with a particular feature, basically in the first autocomplate i have a input that accepts a code, and in this code is related with a label. So basically when i select the code of the first input it autofills the second input with the selected object related. But in the second input haves also a autocomplete feature since the code is not a required field.
Bit there is a detail in the first input (code), the code is always 2 charecters, not more or less, but the user can insert more than 2 charecters.
In my code it works fine, but there is a detail, the input 1 (code) it autoselects the object and the first input removes the extra charecters of the user, but i need to have them there. How do i customize it?
Module that im using for autocomplete is this one Angucomplete-Alt
My code is:
<div angucomplete-alt
id="flight_code"
placeholder="flight code"
pause="100"
selected-object="claim.flight_details.flight_code"
local-data="airlines"
local-search="localSearch"
search-fields="code_airline"
title-field="code_airline"
minlength="2"
input-name="operating_airline"
input-class="form-control form-control-small"
match-class="highlight"
field-required="false">
<div angucomplete-alt
local-search="localSearch"
id="operating_airline"
placeholder="Search airline"
pause="100"
selected-object="claim.flight_details.operating_airline"
local-data="airlines"
search-fields="label"
title-field="label"
minlength="1"
input-name="operating_airline"
input-class="form-control form-control-small"
match-class="highlight"
field-required="true"
initial-value="claim.flight_details.flight_code.originalObject">
</div>
Controller:
$scope.localSearch = function(str, code_airline) {
var matches = [];
code_airline.forEach(function(code) {
if(str.toString().substring(0, 2).toUpperCase() === code.code_airline){
console.log("I found him!!");
matches.push(code);
}
});
return matches;
};

I resolved my issue, in made de first input code to a normal input a use the directive ngChange to detect the chareceters and than create a promise to search for the object and than inserted in the angcomplete input using the initialValue:
controller:
$scope.automaticFill = function(){
var str = $scope.claim.flight_details.flight_code;
if(str.toString().length === 2){
console.log("Im changed");
$http.get('data/airlines-companies.json').then(function(response){
var airlines = response.data;
airlines.forEach(function(code) {
if(code.code_airline === str.toString().toUpperCase())
$scope.test = code;
});
});
}
};
Html:
<input type="text"
class="form-control"
ng-model="claim.flight_details.flight_code"
name="flight_code"
id="flight_code"
ng-change="automaticFill()">
<div angucomplete-alt
local-search="tap"
id="operating_airline"
placeholder="Search airline"
pause="100"
selected-object="claim.flight_details.operating_airline"
local-data="airlines"
search-fields="label"
title-field="label"
minlength="1"
input-name="operating_airline"
input-class="form-control form-control-small"
match-class="highlight"
field-required="true"
initial-value="test">

How to get the value only from an input box that contains value out of multiple input boxes

I would like to get the value from an input box that contains value. Only one of them contains some value out of 3 and remaining 2 are empty:
The code mentioned below doesn't seems to work:
var a = $('input').eq(0).val();
if (a == undefined) {
a = $('input').eq(1).val();
//if still undefined try the next input box
if (a == undefined) {
a = $('input').eq(2).val();
}
}
console.log(a);

If you're trying to find the input that has a value entered you can use filter() instead of repeatedly checking them. Try this:
var $field = $('input').filter(function() {
return $(this).val().trim() != '';
});
console.log($field.val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="" />
<input type="text" value="foo" />
<input type="text" value="" />
Note that the above assumes that only one field will ever have a value. If there will be multiple, then you'll need to loop over the resulting collection in $field.

Selecting specific element within a div?

I am building a contact form, and I am having problems with jQuery. I want to select specific input fields that have an error and apply the class err. Unfortunately, my code selects all inputs when there is an error. I am having trouble identifying which part of my logic is wrong.
$('#send_mail').click(function(){
$("#contact_body").find('label').each(function(){
var contact_label = $('input[required=true], textarea[required=true]');
var label_check = $(this).find(contact_label);
$(contact_label).removeClass('err');
if (!$.trim($(label_check).val())){
$(contact_label).addClass('err');
}
});
});
The order of my HTML goes something like so:
#contact_body
<label>
<input>
</label>

This selects all input and textarea elements:
var contact_label = $('input[required=true], textarea[required=true]');
Instead, you should restrict it to the elements within the label:
var contact_label = $(this).find('input[required=true], textarea[required=true]');
Note that $(contact_label) and contact_label are equivalent in your code, as well as $(label_check) and label_check.
Also, you can use the state parameter of toggleClass() to simplify this:
contact_label.removeClass('err');
if (!$.trim(label_check.val())){
contact_label.addClass('err');
}
… to this:
contact_label.toggleClass('err', !$.trim(label_check.val()));
Here's the updated event:
$('#send_mail').click(function(){
$('#contact_body').find('label').each(function(){
var contact_label = $(this).find('input[required=true], textarea[required=true]');
var label_check = $(this).find(contact_label);
contact_label.toggleClass('err', !$.trim(label_check.val()));
});
});

I think your original code would work if you just changed this line:
$(contact_label).addClass('err');
To this:
$(label_check).addClass('err');
Because $(contact_label) references all the required inputs, whereas $(label_check) references only the input being checked.
But your code could be simplified, and you make unnecessary calls to $(), giving it an argument that is already a JQuery object.
I also do not see that you need to loop through the labels. You could loop through the required inputs instead.
$('#send_mail').click(function(){
$("#contact_body").find(':input[required]').each(function() {
var $input = $(this);
$input.removeClass('err');
if (!$.trim($input.val())){
$input.addClass('err');
}
});
});
Which could be shortened by using the .toggleClass() function:
$('#send_mail').click(function(){
$("#contact_body").find(':input[required]').each(function() {
$(this).toggleClass('err', !$.trim($input.val()));
});
});
Notes:
The selector ':input' matches <input>, <select> and <textarea> elements.

This is a slightly different approach. Gives a bit more flexibility.
arr = ['first', 'last', 'email', 'msg']; //IDs of fields to check
$('#send_mail').click(function(){
$('input, textarea').removeClass('err');
for (var i=0; i<arr.length-1; i++) { //Loop through all field IDs
if ( $('#'+arr[i]).val() == '' ) {
$('#'+arr[i]).addClass('err').focus();
return false;
}
}
//AJAX to send email goes here
alert('Email sent');
});
.err{background:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="first">First Name:</label>
<input id="first" type="text" required /><br>
<label for="last">Last Name:</label>
<input id="last" type="text" required/><br>
<label for="email">Email:</label>
<input id="email" type="email" required /><br>
<label for="msg">Message:</label>
<textarea id="msg" required></textarea>
<button id="send_mail">Send</button>

you can simplify the code, there will be less mistakes:
$('#send_mail').click(function(){
$("#contact_body").find('label').each(function(){
var field = $(this).find('[required=true]');
if ($.trim($(field).val())){
$(this).removeClass('err');
}
});
});

access identifier of <input> in ng-disabled

I need to disable input field until its dependent fields have valid value.
I want to have a generic function for this.
But for this, I need to know which input field's ng-disabled method is called.
I'll have a map, using which I will check if the modelValue of its dependent fields are defined and set ng-disabled based on this.
HTML:
<input type="text" class="form-control"
ng-init="oeMinLength = '3'"
ng-model="vm.trade.BOAT_CUSTOMER_NAME"
ng-disabled="vm.dependencyValidation()"
id="fi-oe" name="oe">
<input type="text" class="form-control"
ng-model="vm.trade.BOAT_CONTACT"
ng-disabled="vm.dependencyValidation()"
id="fi-contact" name="contact">
Controller:
vm.dependencyValidation = function () {
var identifier = 'contact';
if (isEmpty(getDependent(identifier))) {
return false;
}
else {
true;
}
};
I do not want to pass the name/id as the parameter to vm.dependencyValidation().