how to access codeIsbn variable from outside the jquery keydown function

how to access codeIsbn variable from outside the jquery keydown function - javascript

can you help me solve my problem
I want to get the value of codeIsbn which is in the jquery keydown function, then I will place it in the value bookCode
let codeIsbn;
$('#bookISBN').keydown(function(){
let bookIsbn = $('#bookISBN').val();
let splitISBN = bookIsbn.split('-');
codeIsbn = splitISBN[1]+'-'+splitISBN[2]+'-'+splitISBN[3];
//console.log(codeIsbn);
});
console.log(codeIsbn);
$('#bookCode').val(codeIsbn);
Html Code
<div class="row">
<div class="col-lg-6 col-sm-12">
<div class="form-group">
<label for="">ISBN Buku</label>
<input type="text" name="isbnBuku" class="form-control" id="bookISBN" data-inputmask="'mask': ['999-999-999-99-9']" data-mask placeholder="ISBN Buku">
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="form-group">
<label for="">Kode Buku</label>
<input type="text" name="kodeBuku" id="bookCode" class="form-control" placeholder="Kode Buku">
</div>
</div>
</div>
The error that appears in the console log is undefined

You want to use keyup, rather than keydown. Assuming the ISBN number should be greater than 10 characters this should work for you. You will want to probably do something different to validate the isbn format and length. This isn't a perfect solution ready for production, but it's a step in the right direction.
$(function(){
let codeIsbn;
$('#bookISBN').keyup(function(){
if( $(this).val().length > 9 ) {
let bookIsbn = $('#bookISBN').val();
let splitISBN = bookIsbn.split('-');
codeIsbn = splitISBN[0]+'-'+splitISBN[1]+'-'+splitISBN[2];
if( codeIsbn.length > 9 ) {
$('#bookCode').val(codeIsbn);
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-6 col-sm-12">
<div class="form-group">
<label for="">ISBN Buku</label>
<input type="text" name="isbnBuku" class="form-control" id="bookISBN" data-inputmask="'mask': ['999-999-999-99-9']" data-mask placeholder="ISBN Buku">
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="form-group">
<label for="">Kode Buku</label>
<input type="text" name="kodeBuku" id="bookCode" class="form-control" placeholder="Kode Buku">
</div>
</div>
</div>

Related

how to display form with div correctly?

I have this part of form field
When user click on the Add button will copy the above form field and user can add more in this field .
but when I add <div id="ownership"> above the code form it start to look like this
I need to put id=ownership because I want to use it in my jQuery function
<div id="ownership">
<div class="col-lg-12 mb-30 ">
<label for="add_owner"><b><span style="color:#e60000;">*</span> Name</b></label><br>
<input class="from-control" type="text" id="name" >
</div>
<div class="col-lg-6 mb-30" >
<label for="add_owner"><b><span style="color:#e60000;">*</span> Phone number</b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="text" id="phone" >
</div>
</div>
<div class="col-lg-6 mb-30" >
<label for="add_owner"><b><span style="color:#e60000;">*</span> Emailn</b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="email" id="email">
</div>
</div>
</div>
<div id="owner"></div>
<br>
<div class="col-md-12">
<button type="button" class="btn btn-success w-30 add_info f-r">Add</button>
</div>
<script>
$(document).ready(function(){
$(".add_info").click(function(){
var newForm = $("#ownership").clone();
$('input', newForm).val('');
$('owner').append(newForm);
});
});
</script>
How do I fix the code in order to achieve the image in number 1 ?

try this
<div class="row">
<div class="col-sm-6"> Text</div>
<div class="col-sm-6"> Text</div>
</div>
you need to apply this format then design will be properly according your desirable.

Try this way. Always use bootstrap col class inside row class then it will not cause unexpected result.
<div class="row">
<div class="col-md-12"></div>
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>

How to add the values of input box using typescript

I want to add the values of apple,orange and mango , then want to get the value in total.
below is the code which I tried.
<div class="row col-12 " ngModelGroup="cntMap">
<div class="form-group col-6">
<label for="total">Total</label>
<div class="clearfix">
<input type="text" value="{{totalCount}}" class="form-control"
name="totalCnt" [maxlength]="30" placeholder="Total" #totalCnt="ngModel" ngModel
[(ngModel)]="form.totalCnt">
</div>
</div>
<div class="form-group col-6 ml-auto">
<label for="APPLE">Apple</label>
<div class="clearfix">
<input type="text" class="form-control" name="APPLE" [maxlength]="30" placeholder="Enter"
#APPLE="ngModel" ngModel [(ngModel)]="form.APPLE" (change)="getCount($event)">
</div>
</div>
<div class="form-group col-6 ml-auto">
<label for="ORANGE">Orange</label>
<div class="clearfix">
<input type="text" class="form-control" name="ORANGE" [maxlength]="30" placeholder="Enter"
#ORANGE="ngModel" ngModel [(ngModel)]="form.ORANGE" (change)="getCount($event)">
</div>
</div>
<div class="form-group col-6 ml-auto">
<label for="MANGO">Mango</label>
<div class="clearfix">
<input type="text" class="form-control" name="MANGO" [maxlength]="30" placeholder="Enter"
#MANGO="ngModel" ngModel [(ngModel)]="form.MANGO" (change)="getCount($event)">
</div>
</div>
</div>
In component.ts file
getCount(event: any) {
var c = event.target.value;
this.totalCount += parseInt(c);
console.log("totalCount ", this.totalCount );
}
Problem:
When I add the value in the input , its adding the count like:
10+10+10=30
After that when I change the Apple value fron 10 to 8, the total value is like:
10+10+10+8=38
Which means without clearing the data from input box, it is adding the value 8.
Can anybody help me to clear this issue.

The flow which is happening currently is correct as the getCount() is adding the new value to existing total count.
What you should do instead is on every change event, re-add the values from all three input fields.
getCount(event: any) {
this.totalCount = parseInt(this.form.APPLE) + parseInt(this.form.ORANGE) + parseInt(this.form.MANGO);
console.log("totalCount ", this.totalCount );
}

JQuery: input change -> find parent -> find next input -> value returns undefined

I am trying to get the next closest input of same class or different class that is available in the next row div child it says undefined am unable to get it.
[Fiddle]
$(".std_amt").change(function() {
alert($(this).parent('.row').next(".row").children("input.std_amt").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<div class="form-group ">
<input class="form-control std_amt" type="text" name="relative_name_0" id="relative_name_0" value="">
<label class="help-inline"></label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="form-group ">
<input class="form-control std_amt" type="text" name="relative_name_1" id="relative_name_1" value="">
<label class="help-inline"></label>
</div>
</div>
</div>

Try to use closest instead of parent like below
$(".std_amt").change(function() {
alert($(this).closest('.row').next(".row").find("input.std_amt").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<div class="form-group ">
<input class="form-control std_amt" type="text" name="relative_name_0" id="relative_name_0" value="">
<label class="help-inline"></label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="form-group ">
<input class="form-control std_amt" type="text" name="relative_name_1" id="relative_name_1" value="">
<label class="help-inline"></label>
</div>
</div>
</div>

.parent('.row') looks at the direct parent, it does NOT climb the tree. You need to use closest('.row') to reference the row. And you should use find() and not children() since the input is not a direct child.
$(this).closest('.row').next(".row").find("input.std_amt")

JavaScript/jQuery Change Class of A Tag Specifically When Two Input Fields Are Both Filled In

I have the following HTML:
<div class="field text-left">
<div class="col-lg-6 col-sm-6 col-xs-12">
<label class="text-left">Name</label>
<input type="text" id="name" name="name" placeholder="Name"/>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12">
<label class="text-left">Surname</label>
<input type="text" id="surname" name="surname" placeholder="Surname"/>
</div>
</div>
<div class="field">
<div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0">
<div class="col-lg-12 col-sm-12 col-xs-12">
Next Step
</div>
</div>
</div>
The above is in a multi-step form with other values and hidden panel.
I am trying to figure out how to remove the Class disabled from the a tag with id fullnameBtn only when both surname and name fields are entered using JavaScript or jQuery.
Can someone help on the right path?
Thanks

1-check if both the fields are filled
2- then remove the "selected" class
if($("name") && $("surname")){
$("#fullnameBtn").removeClass("disabled");
}

Here is something to toggle class [but still i guess you want to disable and enable the nextPage link for which you have to manually handle in disabled class]
$(document).ready(function(){
// lets monitor the input of values for inputs you can use a class also
$('input').on('input',function(){
// added for bit of simplicity or you can directly get valuess
var surname = $('#surname').val();
var name = $('#name').val();
if(surname != "" && name != "" )
{
// values seems filled remove class
$('#fullnameBtn').removeClass('disabled');
}
else
{
// user has emptied some input so add class again.
$('#fullnameBtn').addClass('disabled');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field text-left">
<div class="col-lg-6 col-sm-6 col-xs-12">
<label class="text-left">Name</label>
<input type="text" id="name" name="name" placeholder="Name"/>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12">
<label class="text-left">Surname</label>
<input type="text" id="surname" name="surname" placeholder="Surname"/>
</div>
</div>
<div class="field">
<div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0">
<div class="col-lg-12 col-sm-12 col-xs-12">
Next Step
</div>
</div>
</div>

JQuery checked event working only once

The problem I am having is that my JQuery checked event only seems to be working once. My aim is for textboxes to be enabled when the corresponding checkbox is checked. Here is a cut down version of the HTML:
<div class="row">
<div class="form-group">
<div class="col-lg-3 col-md-3 col-xs-3">
<input type="checkbox" class="" id="forenameCheck" name="forenameCheck" onchange="valueChanged()">
<label for="forename" class="control-label">Forename</label>
</div>
<div class="col-lg-7 col-md-7 col-xs-7">
<input type="text" class="form-control" id="forename" disabled name="forename" placeholder="Forename">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-lg-3 col-md-3 col-xs-3">
<input type="checkbox" class="" id="surnameCheck" name="surnameCheck" onchange="valueChanged()">
<label for="surname" class="control-label">Surname</label>
</div>
<div class="col-lg-7 col-md-7 col-xs-7">
<input type="text" class="form-control" id="surname" disabled name="surname" placeholder="Surname">
</div>
</div>
</div>
and this is the JQuery:
function valueChanged()
{
if($("#forenameCheck").is(":checked")){
$("#forename").prop("disabled",false);
}
else{
$("#forename").prop("disabled",true);
}
if($("#surnameCheck").is(":checked")){
$("#surname").prop("disabled",false);
}
else{
$("#surname").prop("disabled",true);
}
}
I am very new to JQuery and have no idea why this isn't working. "Forename" works fine but "Surname" does not. This is the JSFiddle of the code. What's strange is that it does not work at all on JSFiddle. It's also worth noting that i'm using bootstrap with this too.
If anyone can help it would be much appreciated!

I would handle each element separately.
$("#forenameCheck").change(function() {
var isDisabled = !$(this).is(":checked");
$("#forename").prop("disabled", isDisabled);
});

It would be better to handle each element separately in your case. Here is the code:
$("#forenameCheck").change(function() {
var isDisabled = !$(this).is(":checked");
$("#forename").prop("disabled", isDisabled);
});
$("#surnameCheck").change(function() {
var isDisabled = !$(this).is(":checked");
$("#surname").prop("disabled", isDisabled);
});
Here is an updated JSFiddle
Update
I just tried the following code (not in JSFiddle, just in a plain html file) and it works.
<script type='text/javascript' src='http://code.jquery.com/jquery-compat-git.js'></script>
<script>
function valueChanged()
{
if($("#forenameCheck").is(":checked")){
$("#forename").prop("disabled",false);
}
else{
$("#forename").prop("disabled",true);
}
if($("#surnameCheck").is(":checked")){
$("#surname").prop("disabled",false);
}
else{
$("#surname").prop("disabled",true);
}
}
</script>
<div class="row">
<div class="form-group">
<div class="col-lg-3 col-md-3 col-xs-3">
<input type="checkbox" class="" id="forenameCheck" name="forenameCheck" onchange="valueChanged()">
<label for="forename" class="control-label">Forename</label>
</div>
<div class="col-lg-7 col-md-7 col-xs-7">
<input type="text" class="form-control" id="forename" disabled name="forename" placeholder="Forename">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-lg-3 col-md-3 col-xs-3">
<input type="checkbox" class="" id="surnameCheck" name="surnameCheck" onchange="valueChanged()">
<label for="surname" class="control-label">Surname</label>
</div>
<div class="col-lg-7 col-md-7 col-xs-7">
<input type="text" class="form-control" id="surname" disabled name="surname" placeholder="Surname">
</div>
</div>
</div>
It seems it is not working in JSFiddle because of how the code is loaded in it. It is giving the following JavaScript error:
Uncaught ReferenceError: valueChanged is not defined
If you view the source of the JSFiddle output you will see that the JavaScript code is wrapped in window.onload=function(){ and this might be causing issues.

Your code is far too complicated. Replace onchange="valueChanged()" with onchange="valueChanged(this)" and use this javascript:
function valueChanged(button) {
button.parentNode.nextElementSibling.childNodes[1].disabled=!button.checked;
}
Result:
function valueChanged(button) {
button.parentNode.nextElementSibling.childNodes[1].disabled=!button.checked;
}
<div class="row">
<div class="form-group">
<div class="col-lg-3 col-md-3 col-xs-3">
<input type="checkbox" class="" id="forenameCheck" name="forenameCheck" onchange="valueChanged(this)">
<label for="forename" class="control-label">Forename</label>
</div>
<div class="col-lg-7 col-md-7 col-xs-7">
<input type="text" class="form-control" id="forename" disabled name="forename" placeholder="Forename">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-lg-3 col-md-3 col-xs-3">
<input type="checkbox" class="" id="surnameCheck" name="surnameCheck" onchange="valueChanged(this)">
<label for="surname" class="control-label">Surname</label>
</div>
<div class="col-lg-7 col-md-7 col-xs-7">
<input type="text" class="form-control" id="surname" disabled name="surname" placeholder="Surname">
</div>
</div>

While we're unable to answer the question of "why isn't my code working," since the code in your question is apparently dissimilar to the code you attempted to type1, I'd like to offer a simple plain JavaScript alternative to the posted solutions.
This approach binds the event-handler using JavaScript itself, in order for easier future maintenance (since it prevents having to search the HTML to update the function calls) and applies the same function to each of the check-boxes. This approach allows for the same function to handle the change event of each check-box, rather than individually binding a change event-handler to every check-box element on the page, which is unnecessarily repetitive (and rapidly inflates the document size).
This is dependant upon the relationship of the check-box ids and their associated <input /> elements' id (though an alternative, below, is posted which uses the structure of the HTML):
// re-naming the function according what it does, this is
// entirely personal, so change, or revert, according to taste:
function changeToggle() {
// the changed check-box ('this' is passed in
// via the use of addEventListener(), later:
var checkbox = this,
// replacing the 'Check' from the element's id
// with an empty string (to get the id of the
// associated <input />:
id = checkbox.id.replace('Check', ''),
// retrieving the associated <input />:
input = document.getElementById(id);
// updating the disabled property of the <input />,
// to be the opposite of the checked state of
// the check-box:
input.disabled = !checkbox.checked;
}
// retrieving all <input /> elements that are descendants of
// an element with the class of 'row':
var checkboxes = document.querySelectorAll('.row input[type=checkbox]');
// using Array.prototype.forEach, and Function.prototype.call,
// to iterate over the NodeList returned by querySelectorAll():
Array.prototype.forEach.call(checkboxes, function(check) {
// check is the array-element of the array we're currently
// iterating, in this case the check-box nodes; here we're
// binding a change event-handler, naming the function
// created earlier:
check.addEventListener('change', changeToggle);
});
function changeToggle() {
var checkbox = this,
id = checkbox.id.replace('Check', ''),
input = document.getElementById(id);
input.disabled = !checkbox.checked;
}
var checkboxes = document.querySelectorAll('.row input[type=checkbox]');
Array.prototype.forEach.call(checkboxes, function(check) {
check.addEventListener('change', changeToggle);
});
<div class="row">
<div class="form-group">
<div class="col-lg-3 col-md-3 col-xs-3">
<input type="checkbox" class="" id="forenameCheck" name="forenameCheck" />
<label for="forename" class="control-label">Forename</label>
</div>
<div class="col-lg-7 col-md-7 col-xs-7">
<input type="text" class="form-control" id="forename" disabled name="forename" placeholder="Forename" />
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-lg-3 col-md-3 col-xs-3">
<input type="checkbox" class="" id="surnameCheck" name="surnameCheck" />
<label for="surname" class="control-label">Surname</label>
</div>
<div class="col-lg-7 col-md-7 col-xs-7">
<input type="text" class="form-control" id="surname" disabled name="surname" placeholder="Surname" />
</div>
</div>
</div>
To use the HTML structure, particularly that the <label> for the associated <input /> is the next element-sibling to the check-box:
function changeToggle() {
var checkbox = this,
// retrieving the nextElementSibling (the first
// element that follows as a sibling, rather than
// nextSibling, which includes comment, and text,
// nodes):
label = checkbox.nextElementSibling,
// accessing the HTMLLabelElement's htmlFor
// property, to retrieve the string from its
// 'for' attribute (getAttribute('for') would
// also work):
id = label.htmlFor,
input = document.getElementById(id);
// as above:
input.disabled = !checkbox.checked;
}
function changeToggle() {
var checkbox = this,
label = checkbox.nextElementSibling,
id = label.htmlFor,
input = document.getElementById(id);
input.disabled = !checkbox.checked;
}
var checkboxes = document.querySelectorAll('.row input[type=checkbox]');
Array.prototype.forEach.call(checkboxes, function(check) {
check.addEventListener('change', changeToggle);
});
<div class="row">
<div class="form-group">
<div class="col-lg-3 col-md-3 col-xs-3">
<input type="checkbox" class="" id="forenameCheck" name="forenameCheck" />
<label for="forename" class="control-label">Forename</label>
</div>
<div class="col-lg-7 col-md-7 col-xs-7">
<input type="text" class="form-control" id="forename" disabled name="forename" placeholder="Forename" />
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-lg-3 col-md-3 col-xs-3">
<input type="checkbox" class="" id="surnameCheck" name="surnameCheck" />
<label for="surname" class="control-label">Surname</label>
</div>
<div class="col-lg-7 col-md-7 col-xs-7">
<input type="text" class="form-control" id="surname" disabled name="surname" placeholder="Surname" />
</div>
</div>
</div>
References:
Array.prototype.forEach().
document.querySelectorAll().
EventTarget.addEventListener().
Function.prototype.call().
HTMLLabelElement.
Node.nextElementSibling.
Footnotes:
Your comment, below the question, addressing Pointy:
#Pointy Thank you for pointing that out. I didn't see that there. The text editor must have automatically put them there as I was typing.
Source.

Develop Reference

JavaScript is the programming language of the Web.

how to access codeIsbn variable from outside the jquery keydown function - javascript

Related

how to display form with div correctly?

How to add the values of input box using typescript

JQuery: input change -> find parent -> find next input -> value returns undefined

JavaScript/jQuery Change Class of A Tag Specifically When Two Input Fields Are Both Filled In

JQuery checked event working only once

Categories

Resources