How can I get the new value of an input with jquery - javascript

So I have these two input fields written in html:
<div class="row">
<div class="col-md-12 form-group">
<label>Name</label>
<input type="text" name="doc name" class="form-control " id="doc-name">
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<label>Number</label>
<input type="text" name="doc number" class="form-control " id="doc-number">
</div>
</div>
And I have some jquery code that returns me an error if either of the input fields remain empty:
if($('#doc-name').val() == '' || $('#doc-number').val =='') {
return false //this is completed with the actual error script but isn't important to the current issue
}
The issue that I actually have is that even after I complete the input fields, the .val() command still return an empty string, it is not returning what I actually wrote in those inputs. .html() or .text() also return something empty. Can you please point me in the right direction ?


Not sure if this is what you mean. But I've created a sample here where every click event it will get the value of the input fields.
<input type="text" id="name"/>
<input type="text" id="number"/>
<button id="getvalue">Get value</button>
Here's the js
$(document).ready( function(){
$('#getvalue').click( function() {
var nameVal = $('#name').val();
var numVal = $('#number').val();
if(nameVal == '' || numVal == ''){
alert('Empty fields.')
}else{
alert('Name is ' + nameVal + ' and Number is ' + numVal);
}
});
});
You need to have a trigger event in order for javascript to communicate with your html elements. In this case we are using a click event through button element.
Here's a working sample


It should be '#doc-name' and '#doc-number':
if ($('#doc-name').val() == '' || $('#doc-number').val() == '') {
alert('Error');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 form-group">
<label>Name</label>
<input type="text" name="doc name" class="form-control " id="doc-name">
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<label>Number</label>
<input type="text" name="doc number" class="form-control " id="doc-number">
</div>
</div>


When you return false from an event handler it prevents the default action for that event and stops the event bubbling up through the DOM. That is, it is the equivalent of doing this:
if($('#doc-name').val() == '' || $('doc-number').val == '') {
alert('ok');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 form-group">
<label>Name</label>
<input type="text" name="doc name" class="form-control " id="doc-name">
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<label>Number</label>
<input type="text" name="doc number" class="form-control " id="doc-number">
</div>
</div>


It depends on where/when you are calling that piece of code. In the example below it will execute on pressing a submit button.
https://jsfiddle.net/wy8z7b2k/
$('#submit').click(function(e) {
if ($('#doc-name').val() == '' || $('#doc-number').val() == '') {
console.log('returning false');
return false //this is completed with the actual error script but isn't important to the current issue
}
});
<div class="row">
<div class="col-md-12 form-group">
<label>Name</label>
<input type="text" name="doc name" class="form-control " id="doc-name">
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<label>Number</label>
<input type="text" name="doc number" class="form-control " id="doc-number">
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<button id="submit">Submit</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Related

how to access codeIsbn variable from outside the jquery keydown function

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>

My form validation error message vanishes

I was trying to make a registration form using HTML, Bootstrap and JavaScript.
I am able to get the error message when a field is left empty, but the error message vanishes just after showing up. I don't know what am I doing wrong
function checkValidation() {
var firstName = document.getElementById('firstName').value;
if (firstName == "") {
console.log("enter");
document.getElementById('firstNameErrorMessage').innerHTML = "please enter";
} else {
console.log("done");
}
}
<div class="container-fluid">
<div class="container">
<h2>Registration Form</h2>
<form class="form-horizontal" name="myForm">
<div class="form-group">
<label class="control-label col-sm-2" for="firstName">
First Name
</label>
<div class="col-sm-10">
<input type="text" name="firstName" class="form-control" id="firstName" placeholder="Enter your First Name" name="firstName">
<div class="col-sm-12">
<p id="firstNameErrorMessage"></p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" onclick="checkValidation()">Submit</button>
</div>
</div>
</form>
</div>
</div>

You will need to use preventDefault in order to make it work as intended:
<div class="container-fluid">
<div class="container">
<h2>Registration Form</h2>
<form class="form-horizontal" name="myForm">
<div class="form-group">
<label class="control-label col-sm-2" for="firstName">
First Name
</label>
<div class="col-sm-10">
<input type="text" name="firstName" class="form-control" id="firstName" placeholder="Enter your First Name" name="firstName">
<div class="col-sm-12">
<p id="firstNameErrorMessage"></p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" onclick="checkValidation(event)">Submit</button>
</div>
</div>
</form>
and
function checkValidation(e) {
e.preventDefault();
var firstName = document.getElementById('firstName').value;
if (firstName == "") {
console.log("enter");
document.getElementById('firstNameErrorMessage').innerHTML = "please enter";
} else {
console.log("done");
}
}
Have a look here for some preventDefault questions:
How and when to use preventDefault()?
What's the difference between event.stopPropagation and event.preventDefault?

Dynamically add and remove form fields to be validated by Parsley.js

Here is my fiddle: My Fiddle (updated)
In my form (ID: #form), inputs fields are shown or hidden based on the selected option of a select input.
Each Input and its labels a wrapped in a div, which is hidden or shown based on the selected option. The attribute data-children of the select contains the information (in JSON Format) which inputs are to be shown when a certain option is selected.
I use the data-parsley-excluded attribute to remove the fields not visible from the parsley validation (Parsley Documentation).
Before I execute the parsley method $('#form').destroy();, at the end $('#form').parsley();
My HTML:
<div class="container">
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<form id="form" method="post" accept-charset="UTF-8" class="form-horizontal" data-parsley-validate="">
<div class="form-group">
<label class="control-label" for="question_01" style="">Question 1</label>
<select class="form-control" name="question_01" id="question_01" required data-children="{"option_01":["input_01","input_02","input_03","input_04","input_05","input_06"],"option_02":["input_01","input_06","input_07","input_08","input_09","input_10"],"option_03":["input_02","input_04","input_05","input_07","input_09","input_10","input_11"]}">
<option value="" selected>Bitte auswählen</option>
<option value="option_01">Option 01</option>
<option value="option_02">Option 02</option>
<option value="option_03">Option 03</option>
</select>
</div>
<div id="div_input_01" class="form-group input-div hidden">
<label for="input_01" style="">Input 01</label>
<input type="text" class="form-control" name="input_01" id="input_01" required>
</div>
<div id="div_input_02" class="form-group input-div hidden">
<label for="input_02" style="">Input 02</label>
<input type="text" class="form-control" name="input_02" id="input_02" required>
</div>
<div id="div_input_03" class="form-group input-div hidden">
<label for="input_03" style="">Input 03</label>
<input type="text" class="form-control" name="input_03" id="input_03" required>
</div>
<div id="div_input_04" class="form-group input-div hidden">
<label for="input_04" style="">Input 04</label>
<input type="text" class="form-control" name="input_04" id="input_04" required>
</div>
<div id="div_input_05" class="form-group input-div hidden">
<label for="input_05" style="">Input 05</label>
<input type="text" class="form-control" name="input_05" id="input_05" required>
</div>
<div id="div_input_06" class="form-group input-div hidden">
<label for="input_06" style="">Input 06</label>
<input type="text" class="form-control" name="input_06" id="input_06" required>
</div>
<div id="div_input_07" class="form-group input-div hidden">
<label for="input_07" style="">Input 07</label>
<input type="text" class="form-control" name="input_07" id="input_07" required>
</div>
<div id="div_input_08" class="form-group input-div hidden">
<label for="input_08" style="">Input 08</label>
<input type="text" class="form-control" name="input_08" id="input_08" required>
</div>
<div id="div_input_09" class="form-group input-div hidden">
<label for="input_09" style="">Input 09</label>
<input type="text" class="form-control" name="input_09" id="input_09" required>
</div>
<div id="div_input_10" class="form-group input-div hidden">
<label for="input_10" style="">Input 10</label>
<input type="text" class="form-control" name="input_10" id="input_10" required>
</div>
<div id="div_input_11" class="form-group input-div hidden">
<label for="input_11" style="">Input 11</label>
<input type="text" class="form-control" name="input_11" id="input_11" required>
</div>
<button type="button" class="btn btn-info btn-block btn-submit-settings">Submit</button>
</form>
</div>
</div>
</div>
My Javascript:
$(document).ready(function() {
$('.btn-submit-settings').on('click', function(e) {
window.Parsley.on('field:error', function()
{
console.log('Validation failed for: ', this.$element);
});
$('#form').submit();
});
$('#form select').change(function() {
var $this = $(this);
if ($this.data('children')) {
$('#form').parsley().destroy();
// Hide all child elements
$.each($this.data('children'), function(value_id, input_id_array) {
$.each(input_id_array, function(key, input_id) {
if ($('#div_' + input_id).length ) {
$('#' + input_id).val(null);
if (!$('#div_' + input_id).hasClass('hidden')) {
$('#div_' + input_id).addClass('hidden');
}
}
});
});
// show the child elements of the selected option
if ($this.data('children')[$this.val()]) {
$.each($this.data('children')[$this.val()], function(key, input_id) {
if ($('#div_' + input_id).length )
{
if ($('#div_' + input_id).hasClass('hidden'))
{
$('#div_' + input_id).removeClass('hidden');
}
}
});
}
// For all inputs inside hidden div set attribute "data-parsley-excluded" = true
$('#form div.input-div.hidden').find(':input').each(function() {
var attr_data_parsley_excluded = $(this).attr('data-parsley-excluded');
if (typeof attr_data_parsley_excluded === typeof undefined || attr_data_parsley_excluded === false) {
$(this).attr('data-parsley-excluded', 'true');
}
});
// For all inputs inside not hidden div remove attribute "data-parsley-excluded"
$('#form div.input-div:not(.hidden)').find(':input').each(function() {
console.log(this.id);
$(this).removeAttr('data-parsley-excluded');
});
$('#form').find(':input').each(function() {
// Log shows that attribute is set right, seems to be ignored by parsley
console.log('ID: ' + this.id + ' TYPE: ' + $(this).prop('nodeName') + ': excluded=' + $(this).attr('data-parsley-excluded'));
});
$('#form').parsley();
$('#form').parsley().refresh();
}
});
});
I can't get it to work, even though the attributes seem to be set the right way.
The fields once hidden, stay out of the validation.

I guess you should add the attribute data-parsley-required="false" to exclude hidden fields from validation.
I mean, try to change
<input type="text" class="form-control" name="input_01" id="input_01" required>
to this
<input type="text" class="form-control" name="input_01" id="input_01" data-parsley-required="false">
and just change the attribute value if you want to validate it or not

This is more of a personal opinion than a factual answer, but I think you are attempting to solve the problem incorrectly. If I were doing this, I would create 2 parsley groups "shouldValidate" and "shouldNotValidate", and add your fields accordingly based on whether they are displayed or not. Then when you call validate, pass the group name "shouldValidate", and only that set of elements will be validated.

You probably need to call refresh on your parsley form after you modify excluded.

Changing the message in onblur event upon condition for all input fields in jquery

I have more than 20 input fields with onblur defined in all the fields with its respective message in it. Upon condition, i wanted to change the message.
Following is my HTML code:
<div class="form-group">
<div class="col-sm-2"></div>
<label for="fullname1" class="col-sm-3 control-label">
<span id="w7_E">Full Name</span>
<span id="w7_B">Poskod</span>
</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="fullname1" name="fullname" onkeyup="checkKeyUp(this);" onblur="checkOnBlur(this,'Please Enter Your fullname');" placeholder="Name">
</div>
<div class="col-sm-3"></div>
<div class="text-danger" data-valmsg-replace="true" data-valmsg-for="fullname1"></div>
</div>
<div class="form-group">
<div class="col-sm-2"></div>
<label for="postcode1" class="col-sm-3 control-label">
<span id="w20_E">Postcode</span>
<span id="w20_B">Poskod</span></label>
<div class="col-sm-4">
<input type="text" class="form-control" id="postcode1" name="postcode" placeholder="Postcode" onkeyup="checkKeyUp(this);fetch_state(this);" onblur="checkOnBlur(this,'Please Enter Your Postcode');">
</div>
<div class="col-sm-3"></div>
</div>
<div class="form-group">
<div class="col-sm-2"></div>
<label for="state1" class="col-sm-3 control-label">
<span id="w21_E">State</span>
<span id="w21_B">Negeri</span></label>
<div class="col-sm-4">
<input type="text" class="form-control" id="state1" name="state" placeholder="State" onkeyup="checkKeyUp(this);" onblur="checkOnBlur(this,'Please Enter Your State');">
</div>
<div class="col-sm-3"></div>
</div>
My Jquery code:
function checkOnBlur(me, message) {
var e_id = $(me).attr('name');
var element_name= (this.name);
if (!(me.val()).length) {
var exist = document.getElementById(e_id + '_e');
var langID='<%=session.getAttribute("language_sel")%>';
if (exist == null) {
var htmlString = "";
if(langID == 'B') {
if (element_name == "fullname") {
message = "Sila masukkan nama penuh penama";
}
if (element_name == "postcode") {
message = "Sila masukkan poskod";
}
if (element_name == "state") {
message = "Sila masukkan negeri";
}
}
htmlString += '<label id=' + e_id + '_e' + ' ' + 'class="error">' + message + '</label>';
$(htmlString).insertAfter("#" + e_id);
$('#' + e_id).focus();
}
}
}
If langID = "B", message in jquery code should appear.
Please help me to resolve this.
Thanks in advance.

disable an input if another input is clicked

I have three sections in a form, the first one contains one input and the second contains three inputs and the third contains a checkbox. How to
disable the two sections if checkbox is checked
disable the checkbox and a section if I tapped a text in the other section
enable the three sections if all of them are empty
I must have only one active section everytime.
What I did is not the solution because there is a problem in the second section. if only one input is empty in this section all the other inputs are enabled. any one can help me please.
Thanks and sorry about my english
document.getElementById("client").onblur = function () {
if (this.value.length > 0) {
document.getElementById("FirstName").disabled=true;
document.getElementById("LastName").disabled=true;
document.getElementById("Email").disabled=true;
document.getElementById("standard").disabled=true;
}else {
document.getElementById("FirstName").disabled=false;
document.getElementById("LastName").disabled=false;
document.getElementById("Email").disabled=false;
document.getElementById("standard").disabled=false;
}
}
document.getElementById("FirstName").onblur = function () {
if (this.value.length > 0) {
document.getElementById("client").disabled=true;
document.getElementById("standard").disabled=true;
}else {
document.getElementById("client").disabled = false;
document.getElementById("standard").disabled = false;
}
}
document.getElementById("LastName").onblur = function () {
if (this.value.length > 0) {
document.getElementById("client").disabled=true;
document.getElementById("standard").disabled=true;
}else {
document.getElementById("client").disabled = false;
document.getElementById("standard").disabled = false;
}
}
document.getElementById("Email").onblur = function () {
if (this.value.length > 0) {
document.getElementById("client").disabled=true;
document.getElementById("standard").disabled=true;
}else {
document.getElementById("client").disabled = false;
document.getElementById("standard").disabled = false;
}
}
document.getElementById("standard").onblur = function () {
if (this.checked) {
document.getElementById("client").disabled=true;
document.getElementById("FirstName").disabled=true;
document.getElementById("LastName").disabled=true;
document.getElementById("Email").disabled=true;
}else {
document.getElementById("client").disabled=false;
document.getElementById("FirstName").disabled=false;
document.getElementById("LastName").disabled=false;
document.getElementById("Email").disabled=false;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="form-group col-md-12">
<label>Search Client</label>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<div class="input-group custom-search-form margin-bottom">
<input id="client" name="client" type="text" class="form-control input-sm" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default btn-sm" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="form-group col-md-12">
<label>New Client</label>
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<input type="text" class="form-control input-sm" id="FirstName" placeholder="First Name">
</div>
<div class="form-group col-md-4">
<input type="text" class="form-control input-sm" id="LastName" placeholder="Last Name">
</div>
<div class="form-group col-md-4">
<input type="email" class="form-control input-sm" id="Email" placeholder="Email">
</div>
</div>
</div>
</div>
<div class="checkbox margin-bottom">
<label>
<input id="standard" type="checkbox" value="">Standard
</label>
</div>

It sounds like you may want try the focus listener instead of the on Blur listener.
https://developer.mozilla.org/en-US/docs/Web/Events/focus
The second element seems to work when I entered in values for all of the fields. It looks like it's checking the length of what was entered.

Categories

Resources