I am trying to hide various div elements, but I want to make it dynamic so if I unselect then it shows back up in the browser. This is easy enough with show/hide, but my problem is that I need to show/hide some of the same fields. It works on the first selection, but then the second run it won't do anything because it thinks it should show it as per the '.show()' in the first run.
Can anyone point me in the right direction?
Thanks
S.
<script>
$(document).ready(function(){
$('#nat').on('change', function() {
if ( this.value == 'no_nat')
{
$("#field25").hide();
$("#field26").hide();
}
else
{
$("#field25").show();
$("#field26").show();
}
});
});
</script>
<script>
$(document).ready(function(){
$('#nat2').on('change', function() {
if ( this.value == 'no_nat')
{
$("#field25").hide();
$("#field26").hide();
}
else
{
$("#field25").show();
$("#field26").show();
}
});
});
</script>
HTML like this:
<div class="form-row">
<label>
<span>Test1</span>
<select name="field1" id="nat">
<option value="" selected="selected"></option>
<option VALUE="no_nat">1</option>
<option VALUE="nat">2</option>
</select>
</label>
</div>
<div class="form-row">
<label>
<span>Test2</span>
<select name="field2" id="nat2">
<option value="" selected="selected"></option>
<option VALUE="no_nat">1</option>
<option VALUE="nat">2</option>
</select>
</label>
</div>
<div class="form-row" id='field25'>
<label>
<span>Test3</span>
<input name="field25" type="text">
</input>
</label>
</div>
<div class="form-row" id='field26'>
<label>
<span>Test4</span>
<input name="field26" type="text">
</input>
</label>
</div>
You don't need to define $(document).ready twice. Try this:
<script>
$(document).ready(function(){
$('#nat').on('change', function() {
if ( this.value == 'no_nat')
{
$("#field25").hide();
$("#field26").hide();
}
else
{
$("#field25").show();
$("#field26").show();
}
});
$('#nat2').on('change', function() {
if ( this.value == 'no_nat')
{
$("#field25").hide();
$("#field26").hide();
}
else
{
$("#field25").show();
$("#field26").show();
}
});
});
</script>
See fiddle https://jsfiddle.net/r2m9s8gx/
You can try to have a single handler like
$(document).ready(function() {
$('select[name="field1"], select[name="field2"]').on('change', function() {
var state = $('select[name="field1"]').val() == 'no_nat' || $('select[name="field2"]').val() == 'no_nat';
$("#field25, #field26").toggle(state);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-row">
<label>
<span>Test1</span>
<select name="field1">
<option value="" selected="selected"></option>
<option VALUE="no_nat">1</option>
<option VALUE="nat">2</option>
</select>
</label>
</div>
<div class="form-row">
<label>
<span>Test2</span>
<select name="field2" type="text">
<option value="" selected="selected"></option>
<option VALUE="no_nat">1</option>
<option VALUE="nat">2</option>
</select>
</label>
</div>
<div class="form-row" id='field25'>
<label>
<span>Test3</span>
<input name="field25" type="text" />
</label>
</div>
<div class="form-row" id='field26'>
<label>
<span>Test4</span>
<input name="field26" type="text" />
</label>
</div>
try
$(this).val() === 'no_nat'
or
$('#nat').val() === 'no_nat'
Related
can anyone help me. i want to display reasons box if i select pending or incomplete job status.
DROPDOWN
<div class="form-group">
<label for="exampleFormControlSelect2">Job Status</label>
<select type="text" id="job_status" name="job_status" onchange="myFunction()">
<option value=''></option>
<option value="Doing">Doing</option>
<option value="Pending">Pending</option>
<option value="Incomplete">Incomplete</option>
<option value="Completed">Completed</option>
</select>
</div>
REASON BOX THAT I WANT TO APPEAR IF I SELECTED PENDING OR INCOMPLETE
<div class="form-group row">
<label for="reason" class="col-sm-2 col-form-label">Reason</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3">
</div>
</div>
THE SCRIPT
<script>
function myFunction() {
var x = document.getElementById("job_status").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
THANKS ALL
You just need to change the css of the input whenever you select those options using simple if else condition.
function myFunction() {
var x = document.getElementById("job_status").value;
if(x == 'Pending' || x == 'Incomplete'){
document.getElementById("reason").style.display = 'block';
}
else {
document.getElementById("reason").style.display = 'none';
}
}
#reason {
display:none;
}
<div class="form-group">
<label for="exampleFormControlSelect2">Job Status</label>
<select type="text" id="job_status" name="job_status" onchange="myFunction()">
<option selected disabled>Select Status</option>
<option value="Doing">Doing</option>
<option value="Pending">Pending</option>
<option value="Incomplete">Incomplete</option>
<option value="Completed">Completed</option>
</select>
</div>
<div id="reason" class="form-group row">
<label for="reason" class="col-sm-2 col-form-label">Reason</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3">
</div>
</div>
I have to give the show/hide textbox required field.. When user selects Others from the dropdown textbox will be shown.. I have to give required field for that textbox.. Here is the code
$("[name='mass']").change(function(){
if($(this).val() == "Other" )
{
$('.other').slideDown();
$('.other').slideDown().find('.other').attr('required', true);
}
else
{
$('.other').slideUp();
$('.other').slideDown().find('.other').attr('required', false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="mass" id="types" class="col-md-12" required="required">
<option value="">Mass</option>
<option value="Soul of">Soul of</option>
<option value="Other">Others</option>
</select>
<div class="other" style="display:none;" >
<label style="text-align:center;">If Others</label>
<input type="text" name="other" id="other" placeholder="If Others" maxlength="30" class="col-md-12"></div>
In your .find('.other') you are looking for a class but the input is having id="other" not class="other"
Also in your else statement you are sliding using slideUp and slideDown so it will always be show.
$("[name='mass']").change(function() {
if ($(this).val() == "Other") {
$('.other').slideDown().find('#other').attr('required', true);
} else {
$('.other').slideUp().find('#other').attr('required', false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="mass" id="types" class="col-md-12" required="required">
<option value="">Mass</option>
<option value="Soul of">Soul of</option>
<option value="Other">Others</option>
</select>
<div class="other" style="display:none;">
<label style="text-align:center;">If Others</label>
<input type="text" name="other" id="other" placeholder="If Others" maxlength="30" class="col-md-12"></div>
I have a form with more than 10 input/select options but i wish to show most of this form inputs when 4 of my fields specifically are filled.
I've done some research and found
$('input[type="text"]').each(function(){
// do my things here...
});
but this has 2 issues:
It doesn't work when i fill inputs
One of my fields is select option and here only tries to get inputs
Code
$(function() {
// show choices DIV only if all fields are filled.
$('input[type="text"]').each(function() {
if ($(this).val() != "") {
$('.choices').show();
} else {
$('.choices').hide();
}
});
});
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form action="" method="POST">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<div class="sm-form-design">
<input id="seq_no" type="text" class="form-control" name="seq_no" required>
<label for="seq_no" class="control-label">Seq No.</label>
</div>
</div>
</div>
<div class="col-md-9">
<div class="form-group">
<div class="sm-form-design">
<input id="question" type="text" class="form-control" name="question" required>
<label for="question" class="control-label">Question</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 sm-form-design">
<select name="type" id="type" class="form-control">
<option value="dropdown">Dropdown</option>
<option value="multiple">Multiple</option>
<option value="radio">Radio Buttons</option>
<option value="input">Input</option>
</select>
<label for="type" class="control-label">Type</label>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="sm-form-design">
<input type="text" name="quiz_time" class="form-control" id="masked-input-time" required>
<label for="quiz_time" class="control-label">Time *</label>
</div>
</div>
</div>
</div>
<!-- show this part when all fields above are filled -->
<div class="row choices">
<div class="col-md-12">
<h5>Choices:</h5>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
Question
How can I validate all my first 4 fields before showing rest of the form?
Any idea?
While Shiladitya's answer works, and is closest to your own code, I find it cleaner to handle forms by serializing data into an object as input occurs. This allows you to more easily reason about validation, as you only have to validate an object, not DOM elements.
Here is a pared down example:
$(function() {
const formData = {}
const $form = $('#form-a')
const $partTwo = $('#part-2')
// some real validation here
const isValidPartOne = data =>
data.a && data.b && data.c
const showPartTwo = () => $partTwo.show()
$form.on('input', ({target}) => {
formData[target.name] = target.value
// form data is available at all times
console.log('formData =', formData)
if (isValidPartOne(formData)) {
showPartTwo()
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form-a">
<div id="part-1">
PART 1
<input name="a" />
<input name="b" />
<select name="c">
<option value="" disabled selected>Choose One</option>
<option value="a">A</option>
<option value="b">B</option>
</select>
</div>
<div id="part-2" style="display:none;">
PART 2
<input name="d" />
</div>
</form>
Here you go with a solution
$(function() {
$('.choices').hide();
// show choices DIV only if all fields are filled.
$('select').change(function() {
validateInput();
});
$('input[type="text"]').keyup(function() {
validateInput();
});
function validateInput() {
var valid = true;
$('input[type="text"], select').each(function() {
if ($(this).val() === "") {
valid = false;
}
});
if (valid) {
$('.choices').show();
} else {
$('.choices').hide();
}
}
});
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form action="" method="POST">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<div class="sm-form-design">
<input id="seq_no" type="text" class="form-control" name="seq_no" required>
<label for="seq_no" class="control-label">Seq No.</label>
</div>
</div>
</div>
<div class="col-md-9">
<div class="form-group">
<div class="sm-form-design">
<input id="question" type="text" class="form-control" name="question" required>
<label for="question" class="control-label">Question</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 sm-form-design">
<select name="type" id="type" class="form-control">
<option value="dropdown">Dropdown</option>
<option value="multiple">Multiple</option>
<option value="radio">Radio Buttons</option>
<option value="input">Input</option>
</select>
<label for="type" class="control-label">Type</label>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="sm-form-design">
<input type="text" name="quiz_time" class="form-control" id="masked-input-time" required>
<label for="quiz_time" class="control-label">Time *</label>
</div>
</div>
</div>
</div>
<!-- show this part when all fields above are filled -->
<div class="row choices">
<div class="col-md-12">
<h5>Choices:</h5>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
OnChange of any input, please iterate through all the inputs just to check whether each input is empty or has value.
Here you go with a solution for your problem 1 that you mentioned in the comment box
$(function() {
$('.choices').hide();
// show choices DIV only if all fields are filled.
$('select').change(function() {
validateInput();
});
$('input[type="text"]').keyup(function() {
validateInput();
});
// --- Whenever you make an action you can call this method to validate your inputs ----
function validateInput() {
var valid = true;
$('input[type="text"], select').each(function() {
if ($(this).val() === "") {
valid = false;
}
});
if (valid) {
$('.choices').show();
} else {
$('.choices').hide();
}
}
});
I am not in a place to properly test but looking at your function I would make the following changes,
$(function() {
// show choices DIV only if all fields are filled.
var flag = false
$('input[type="text"]').each(function() {
if ($(this).val() != "") {
flag = true
} else {
flag = false
}
});
if (flag) {
$('.choices').show();
} else {
$('.choices').hide();
}
});
$('input[type="text"]').keyup(function() {
// call function
});
$('input[type="text"]').keydown(function() {
// call function
});
I have two select boxes which loads contacts and groups of contacts, how do I show one div at a time, switching between them by checking or unchecking the checkbox?
The code below show one at off state and show both two when checked instead of hiding the first one and showing the second one.
code snippet
$(document).ready(function () {
var checkbox = $('#checker');
var dependent = $('#dependent-box');
var dependent2 = $('#dependent-box2');
if (checkbox.attr('checked') !== undefined){
dependent.show();
dependent2.hide();
} else {
dependent2.show();
dependent.hide();
}
checkbox.change(function(e){
dependent.toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="checker" data-toggle="toggle">
<div id="dependent-box">
<div class="form-group" >
<select class="contact-multiple form-control" multiple="multiple" name="to_sms[]" id="toggle1" style="width: 98%;">
<option value="Hi">
Hi
</option>
</select>
</div>
</div>
<div id="dependent-box2">
<div class="form-group" >
<select class="contact-multiple form-control" multiple="multiple" name="to_sms[]" id="toggle1" style="width: 98%;">
<option value="Hi">
Hello
</option>
</select>
</div>
</div>
You are not toggling the second box in your change function.
checkbox.change(function(e){
dependent.toggle();
dependent2.toggle();
});
check if the checker is checked :
$(document).ready(function () {
var checkbox = $('#checker');
var dependent = $('#dependent-box');
var dependent2 = $('#dependent-box2');
dependent2.hide();
checkbox.change(function(e){
if(this.checked){
dependent.hide();
dependent2.show();
}else
{
dependent.show();
dependent2.hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="checker" data-toggle="toggle">
<div id="dependent-box">
<div class="form-group" >
<select class="contact-multiple form-control" multiple="multiple" name="to_sms[]" id="toggle1" style="width: 98%;">
<option value="Hi">
Hi
</option>
</select>
</div>
</div>
<div id="dependent-box2">
<div class="form-group" >
<select class="contact-multiple form-control" multiple="multiple" name="to_sms[]" id="toggle1" style="width: 98%;">
<option value="Hi">
Hello
</option>
</select>
</div>
</div>
I have select box which no select generates number of textboxes in a div.
Now there are three field
display_name[], user_name[], and user_password[]
The code for that is :
<select name="license" id="dropdown" class="form-control" required="required">
<option value="default" >Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
$("#dropdown").change(function() {
var selVal = $(this).val();
$("#pttuserdiv").html('');
if(selVal > 0) {
for(var i = 1; i<= selVal; i++) {
$("#pttuserdiv").append(`
<div class="col-sm-3 col-sm-offset-1">
<div class="form-group label-floating">
<label class="control-label">Display Name</label>
<input type="text" class="form-control" name="display_name[]" required >
</div>
</div>
<div class="col-sm-3 col-sm-offset-1">
<div class="form-group label-floating">
<label class="control-label">Username</label>
<input type="text" class="form-control validateLocation" name="user_name[]" id="user_name" required >
</div>
</div>
<div class="col-sm-3 col-sm-offset-1">
<div class="form-group label-floating">
<label class="control-label">Password</label>
<input type="password" class="form-control" name="user_password[]" required >
</div>
</div>`);
}
}
});
});
</script>
<div class="row">
<div id="pttuserdiv">
</div>
</div>
Now I want the user_name[] field to be unique.
How do I do that ?
I want to display error or alert if user input same username again in user_name[].
Try the following approach
Bind keyup event and check user's input for the current input box.
Check if the current input value is same as other username values
If yes, then highlight the input box.
Demo
$(document).ready(function() {
$("#dropdown").change(function() {
var selVal = $(this).val();
$("#pttuserdiv").html('');
if (selVal > 0) {
for (var i = 1; i <= selVal; i++) {
$("#pttuserdiv").append('<div class="col-sm-3 col-sm-offset-1"><div class="form-group label-floating"><label class="control-label">Display Name</label><input type="text" class="form-control" name="display_name[]" required ></div></div><div class="col-sm-3 col-sm-offset-1"><div class="form-group label-floating"><label class="control-label">Username</label><input type="text" class="form-control validateLocation" name="user_name[]" id="user_name" required ></div></div> <div class="col-sm-3 col-sm-offset-1"><div class="form-group label-floating"><label class="control-label">Password</label><input type="password" class="form-control" name="user_password[]" required ></div></div>');
}
$( "[name='user_name[]']" ).off( "keyup" );
$( "[name='user_name[]']" ).on( "keyup", function(){
var isFound = false;
var value = $(this).val();
$( "[name='user_name[]']" ).not(this).each( function(){
if ( this.value == value )
{
isFound = true;
}
});
$(this).toggleClass( "highlight", isFound );
});
}
});
});
.highlight
{
border-color : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="license" id="dropdown" class="form-control" required="required">
<option value="default" >Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<script type="text/javascript">
</script>
<div class="row">
<div id="pttuserdiv">
</div>
</div>
Note - Id doesn't play any role in my code, but as a good practice keep the ids of all elements unique.