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.
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 select options contains languages, it's supposedly that user choose multiple options (languages) or an option (language), and i want user when choose an option (language), new select option shows, and contains his level in that language.
when user select multiple languages (english, arabic, france), three select option show, his level in these language, and when unselect any options, it's supposed to, the select option (that contains his level in that language) become hidden and reset (return to default select (first option)).
but i've some problems in my code
1- when user select multiple options, multiple select options that contains his level don't show all at once.
2- when user unselect an option it stills show and not reset (return to default select (first option))?!!
could you help me please
my view blade with script:
#extends('layouts.app')
#section('content')
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="languages">Languages</label>
<select id="languages" class="form-control" multiple>
<option>Choose Language...</option>
<option value="1">English</option>
<option value="2">Arabic</option>
<option value="3">France</option>
<option value="4">Espanole</option>
</select>
</div>
</div>
<div id="arabicShow" style="display: none" class="form-row">
<div id="" class="form-group col-md-6">
<label for="arabic">Arabic level</label>
<select id="arabic" class="form-control">
<option value='' selected>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="englishShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="english">English level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="franceShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="france">France level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
#stop
#section('script')
<script type="text/javascript">
$(document).ready(function (){
$( "#languages option:first-child" ).attr("disabled","disabled");
$( "#arabic option:first-child" ).attr("disabled","disabled");
$( "#english option:first-child" ).attr("disabled","disabled");
$( "#france option:first-child" ).attr("disabled","disabled");
$('#languages').change(function(){
var text = $(this).find("option:selected").text().trim(); //get text
if(text === "Arabic"){
$('#arabicShow').show();
}else if(text === "English"){
$('#englishShow').show();
}else if(text === "France"){
$('#franceShow').show();
}else {
$('#arabicShow').hide();
$('#englishShow').hide();//hide
}
});
});
</script>
#stop
You can use .each loop to iterate through all selected options and then depending on condition show require select-boxes.
Demo Code :
$(document).ready(function() {
$("#languages option:first-child").attr("disabled", "disabled");
$("#arabic option:first-child").attr("disabled", "disabled");
$("#english option:first-child").attr("disabled", "disabled");
$("#france option:first-child").attr("disabled", "disabled");
$('.selects').hide(); //hide all
$('#languages').change(function() {
$('.selects select:not(:visible)').val(""); //reset
$('.selects').hide(); //hide all
//loop through all selected options..
$(this).find("option:selected").each(function() {
var text = $(this).text()
if (text === "Arabic") {
$('#arabicShow').show();
} else if (text === "English") {
$('#englishShow').show();
} else if (text === "France") {
$('#franceShow').show();
}
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="languages">Languages</label>
<select id="languages" class="form-control" multiple>
<option>Choose Language...</option>
<option value="1">English</option>
<option value="2">Arabic</option>
<option value="3">France</option>
</select>
</div>
</div>
<!--added one common class i.e : selects-->
<div id="arabicShow" class="form-row selects">
<div id="" class="form-group col-md-6">
<label for="arabic">Arabic level</label>
<select id="arabic" class="form-control">
<option value='' selected>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="englishShow" class="form-row selects">
<div class="form-group col-md-6">
<label for="english">English level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="franceShow" class="form-row selects">
<div class="form-group col-md-6">
<label for="france">France level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
Please have a look at my below code
javascript
<script>
$(document).ready(function () { // Help for the HTML4 version.
$('select[name=brandTxtSelect]').change(function () {
if($(this).val()=="Select")
{
document.getElementById('brandTxt').readOnly = false;
document.getElementById("brandTxt").style.display = "block";
}
else
{
document.getElementById('brandTxt').readOnly = true;
document.getElementById("brandTxt").style.display = "none";
$('input[name=brandTxt]').val($(this).val());
}
});
});
</script>
HTML
<div class="form-group">
<label class="col-md-4 control-label" for="brandTxt">Brand</label>
<div class="col-md-4">
<select name="brandTxtSelect" class="form-control input-md">
<option value="">Select</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<!-- <input id="textinput" name="brandTxt" type="text" placeholder="Type Drug Brand" class="form-control input-md" > -->
</div>
<div class="col-md-4">
<input type="text" id="brandTxt" name="brandTxt" class="form-control input-md">
</div>
</div>
I am trying to make the textfield visible and enabled when "Select" is selected from the dropdown box. Unfortunately it seems always the else part is getting fired. I must be doing something wrong in JavaScript, please advice.
Your value for "Select" is not select, is "".
Change:
<option value="">Select</option>
for:
<option value="Select">Select</option>
The val() function would return the value of the selected <option>, not the caption.
Since the actual value of the first <option> is an empty string (""), you can simply try this instead:
if(!$(this).val())
Alternatively, if you'll omit the value attribute altogether, it will automatically consider the caption ("Select") as the value instead.
See val()
Your code is funny :D
You forgot, that the value of Select is empty, so the calue-check has to be fonde with an empty string.
$('select[name=brandTxtSelect]').change(function () {
if($(this).val()==""){
document.getElementById('brandTxt').readOnly = false;
document.getElementById("brandTxt").style.display = "block";
} else {
document.getElementById('brandTxt').readOnly = true;
document.getElementById("brandTxt").style.display = "none";
$('input[name=brandTxt]').val($(this).val());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-md-4 control-label" for="brandTxt">Brand</label>
<div class="col-md-4">
<select name="brandTxtSelect" class="form-control input-md">
<option value="">Select</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<!-- <input id="textinput" name="brandTxt" type="text" placeholder="Type Drug Brand" class="form-control input-md" > -->
</div>
<div class="col-md-4">
<input type="text" id="brandTxt" name="brandTxt" class="form-control input-md">
</div>
</div>
$('select[name=brandTxtSelect]').change(function () {
if($(this).val()==""){
document.getElementById('brandTxt').readOnly = false;
document.getElementById("brandTxt").style.display = "block";
} else {
document.getElementById('brandTxt').readOnly = true;
document.getElementById("brandTxt").style.display = "none";
$('input[name=brandTxt]').val($(this).val());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="brandTxtSelect" class="form-control input-md">
<option value="">Select</option>
<option value="Other">Other</option>
<option value="Option">Options</option>
</select>
<input type="text" id="brandTxt" name="brandTxt" class="form-control input-md">
Try It Once
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'
I've done some research but haven't been able to find and answer.
I have 1 text input and 1 selectbox.
If the selected value of the selectbox is 2, I 'd like the textbox to be hidden
If the selected value of selectbox is 1, the textbox should appear.
Here is my code:
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Pricing</label>
<div class="col-sm-10">
<select class="form-control" name="pricing">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
<div class="col-sm-10">
<input type="text" name="pricing" class="form-control">
</div>
</div>
You can assign an id to the form-group then use that to hide/show that element
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Fiyatlandırma</label>
<div class="col-sm-10">
<select class="form-control" name="fiyatlandirma">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</div>
</div>
<div class="form-group" id="fiyat-group">
<label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
<div class="col-sm-10">
<input type="text" name="fiyat" class="form-control"/>
</div>
</div>
then
//dom ready handler - wait for the element to load
jQuery(function($){
//change event handler to trigger when the select is changed
$('select[name="fiyatlandirma"]').change(function(){
//hide or display the group element based on the value of select
$('#fiyat-group').toggle(this.value == '2')
}).change();//to set the initial display state
})
http://learn.jquery.com/
http://learn.jquery.com/using-jquery-core/document-ready/
http://api.jquery.com/change
http://api.jquery.com/toggle
Try this:
$(document).ready(function(){
$("select.form-control").change(function(){
if($(this).val()=="1")
$("input[name=fiyat]").hide();
else
$("input[name=fiyat]").show();
});
});
You can give id to all three fields: select, input label and input box
$(document).ready(function () {
$("#pricing").change(function () {
if ($(this).val() == "1") {
$("#textbox").hide();
$("#textLabel").hide();
} else {
$("#textbox").show();
$("#textLabel").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Pricing</label>
<div class="col-sm-10">
<select class="form-control" name="pricing" id="pricing">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label" id="textLabel">Our Text Input</label>
<div class="col-sm-10">
<input type="text" name="pricing" id="textbox" class="form-control">
</div>
</div>
using java script
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Fiyatlandırma</label>
<div class="col-sm-10">
<select class="form-control" id="select" name="fiyatlandirma" onclick="hide()">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2" >Value 2</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
<div class="col-sm-10">
<input type="text" id="fiyat" name="fiyat" class="form-control">
</div>
</div>
<script>
function hide(){
var select = document.getElementById("select").selectedIndex;
var input = document.getElementById("fiyat");
if(select == 1)
input.style.visibility= "hidden";
else if(select == 2)
input.style.visibility= "visible";
}
</script>