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>
Related
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>
When i select the option value of "other" in my dropdown lis the form row below appears and allows me to type a manual cemetery but what gets submitted to the database is just the entry of "other" and not what i typed in manually?
<script>
function handleSelect() {
var selected = document.getElementById("mySelect").value;
var details = document.getElementById("other-details");
if (selected === "other") {
details.classList.remove("d-none");
details.classList.add("d-block");
} else {
details.classList.remove("d-block");
details.classList.add("d-none");
}
}
</script>
<div class="form-row">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<label class="control-label custom_label col-xs-12">Cemetery</label>
<select name="cemetery" class="form-control" id="mySelect" onchange="handleSelect();">
<option value="select" selected="selected">Select Cemetery</option>
<option value="Akatarawa">Akatarawa</option>
<option value="Taita">Taita</option>
<option value="Wainuiomata">Wainuiomata</option>
<option value="Whenua Tapu">Whenua Tapu</option>
<option value="Makara">Makara</option>
<option value="Karori">Karori</option>
<option value="St Johns">St Johns</option>
<option value="Awa Tapu">Awa Tapu</option>
<option value="Paraparaumu">Paraparaumu</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="form-row d-none" id="other-details">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<input type="text" id="other" class="form-control" name="" placeholder="Enter other Cemetery" />
</div>
</div>
</body>
Try setting name of the input to cemetery.
<input type="text" id="other" class="form-control" name="cemetery" placeholder="Enter other Cemetery" />
This may work, but not a good practise.
I suggest you to do something like following
HTML
<input type="text" id="other" class="form-control" name="other-cemetery" placeholder="Enter other Cemetery" />
PHP
if($_POST["cemetery"] == "other"){
$cemetery = $_POST["other-cemetery"];
}
Update: The first solution that I gave may not work in other cases. So add the following line to handleSelect() function. (Not selected case)
document.getElementById("other").value = document.getElementById("mySelect").value;
Thanks Dum, combining that link of JS and setting the Value of the "other" drop down to empty.
Example: <option value="">Other</option>
This has resolved my issue. Many thanks
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.
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'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>