This has definitely been covered before and im sure it will again but none of the examples ive found are helping me.
I have a dropdown field, when option 2(Admin) is selected i want to display a text input type that is otherwise hidden.
const ac = document.getElementById("admin_code");
ac.style.display = "none";
function toggleDropdown(selObj){
ac.style.display = selObj.value === "Admin" ? "block" : "none";
}
<label>User Type:</label> <select id="userType" name="userType" id="userType" onchange='toggleDropdown(this);' required>
<option value="" selected>Select User Type</option>
<option value="Client">Client</option>
<option value="Admin">Admin</option>
<option value="Staff">Staff</option>
</select>
<br>
<div id="admin_code">
<label>Person Code:</label> <input type="text" name="adminCode"
id="adminCode" placeholder="000001">
</div>
Currently when i go into the page with this on my admin_code div shows from the start. I have tried changing the style.display values both to none to see if it is even being called but it seems it is not.
Pass the this keyword into your callback function:
const ac = document.getElementById("admin_code");
ac.style.display = "none";
function toggleDropdown(selObj) {
ac.style.display = selObj.value === "Admin" ? "block" : "none";
}
<label>User Type:</label>
<select id="userType" name="userType" id="userType" onchange='toggleDropdown(this);' required>
<option value="" selected>Select User Type</option>
<option value="Client">Client</option>
<option value="Admin">Admin</option>
<option value="Staff">Staff</option>
</select>
<br>
<div id="admin_code">
<label>Admin Code:</label> <input type="text" name="adminCode" id="adminCode">
</div>
This worked for me. First I set the initial style for div#admin_code to "display: none;"
Then I changed your function slightly
function toggleDropdown(){
let value = document.querySelector('select').value;
if (value=="Admin") {
document.getElementById("admin_code").style.display = "block";
} else {
document.getElementById("admin_code").style.display = "none";
}
}
<label>User Type:</label> <select id="userType" name="userType" id="userType" onchange='toggleDropdown();' required>
<option value="" selected>Select User Type</option>
<option value="Client">Client</option>
<option value="Admin">Admin</option>
<option value="Staff">Staff</option>
</select>
<br><div id="admin_code" style="display: none;">
<label>Admin Code:</label> <input type="text" name="adminCode" id="adminCode" >
</div>
Related
I'm struggling with the following issue - I have an HTML form in which there are three select fields. Before submitting values, I want to make a form validation in which at least ONE of the four dropdowns should be selected. I have the following code but it keeps requiring all the dropdowns.
Link to the code: jsfiddle
Code - HTML
<div class="container">
<div class="row">
<div class="col-lg-12">
<form method="post" id="myform">
<div class="form-group ">
<label class="control-label " for="select">
Select a Choice
</label>
<select class="select form-control" id="select1" name="select1" required>
<option value="">---</option>
<option value="First Choice">1</option>
<option value="Second Choice">2</option>
<option value="Third Choice">3</option>
</select>
<select class="select form-control" id="select2" name="select2" required>
<option value="">---</option>
<option value="First Choice">a</option>
<option value="Second Choice">b</option>
<option value="Third Choice">c</option>
</select>
<select class="select form-control" id="select3" name="select3" required>
<option value="">---</option>
<option value="First Choice">X</option>
<option value="Second Choice">Y</option>
<option value="Third Choice">Z</option>
</select>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" id="sub" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
Code - JS:
$(document).ready(function () {
$('#sub').click(function() {
check = $(".select option:selected").length;
if(!check) {
alert("You must select an option from at least one dropdown");
return false;
}
});
});
Where I make a mistake in the code?
Take a look at this
jsfiddle example
You need to remove the "required" attribute and manage required values using JS because if you set all combobox to required you'll be forced to fill all of them.
<div class="container">
<div class="row">
<div class="col-lg-12">
<form method="post" id="myform">
<div class="form-group ">
<label class="control-label " for="select">
Select a Choice
</label>
<select class="select form-control" id="select1" name="select1">
<option selected disabled value="">---</option>
<option value="First Choice">1</option>
<option value="Second Choice">2</option>
<option value="Third Choice">3</option>
</select>
<select class="select form-control" id="select2" name="select2">
<option selected disabled value="">---</option>
<option value="First Choice">a</option>
<option value="Second Choice">b</option>
<option value="Third Choice">c</option>
</select>
<select class="select form-control" id="select3" name="select3">
<option selected disabled value="">---</option>
<option value="First Choice">X</option>
<option value="Second Choice">Y</option>
<option value="Third Choice">Z</option>
</select>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" id="sub" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
JS code
$(document).ready(function () {
$('#sub').click(function() {
check = $('option[disabled]:selected').length;
if(check == 3) {
alert("You must select an option from at least one dropdown");
return false;
}
});
});
Hope it helps you
First, you must delete the required on your select tags. Then, use something like this in the jquery part:
$(document).ready(function () {
$('#sub').click(function() {
var anySelected = false;
$(".select option:selected").each(function(){
if(!$(this).val() == ""){
anySelected = true;
}
});
if(!anySelected) {
alert("You must select an option from at least one dropdown");
return false;
}
});
});
Here is a working fiddle.
Hope it helps!
I have this simple bit of code. When the user chooses Others, an <input type=text> should appear.
But it only works when there is only one value selected.
Users can randomly add in the same select type, so the code can't be changed. For what I know, in javascript need to use foreach.
So my question is, how to let each of the <input type=text> appear in EACH of the select elements instead of it only appearing in the first one.
function Pack(val){
var element=document.getElementById('otherpack');
if(val=='others')
element.style.display='block';
else
element.style.display='none';
}
<select name="Type[]" onchange='Pack(this.value);' required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
</select>
<select name="Type[]" onchange='Pack(this.value);' required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
</select>
<select name="Type[]" onchange='Pack(this.value);' required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
</select>
Here is my solution:
function Pack(v) {
var inputBox=v.nextSibling;
var selectedValue=v.options[v.selectedIndex].value;
if (selectedValue=="others") {
inputBox.style.display='block';
} else {
inputBox.style.display='none';
}
}
This should be the most stable solution.
I would prefer to make change events into javascript side instead of making it in HTML..
As suggested it is not good to use input inside select so make input outside of select box..
const selectBoxes = document.querySelectorAll('select');
function Pack(select) {
const selectedInput = select.nextElementSibling;
if(select.value === 'others')
selectedInput.style.display='block';
else
selectedInput.style.display='none';
}
selectBoxes.forEach(select => {
select.addEventListener('change', Pack.bind(this, select))
})
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
<br>
<br>
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
<br>
<br>
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
id attributes should have unique values, so your selector will always select the first match.
Secondly, input elements are not allowed to be children of select elements. select elements can only have optgroup or option elements as children
It is also best practice to attach listeners via JavaScript code instead of onchange attributes. You can listen at the document level ("event delegation") to avoid repeating several listeners (one per select element).
Here is how it could work:
function Pack(e){
let select = e.target;
if (select.name !== "Type[]") return;
let element = select.nextElementSibling; // this finds the INPUT element
element.style.display = select.value === "others" ? "block" : "none";
}
document.addEventListener("change", Pack);
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" style="display:none"/>
<br>
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" style="display:none"/>
<br>
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" style="display:none"/>
Have you tried giving them unique ids? if you wanna have the same identifier in different elements, maybe use the class attribute instead.
Hope it helps, good luck !
edit: actually, now I see you're calling them with an id that isn't unique. Give each of the text-inputs their own id and it should work
ids are meant to be unique in the code, so whenever you call your function it assumes that there is only one element with that id
I have the following code to run my Dropdown box and field I want to disable when the value is not equal to value in dropdown.
My code is as follows.
document.getElementById('type').addEventListener('change', function() {
if (this.value == Hijacking) {
document.getElementById('hijacking').disabled = false;
} else {
document.getElementById('hijacking').disabled = true;
}
});
<div class="width-qrtr">
<label>Type of event</label>
<select name="Type" id="select">
<option value="">Select Type</option>
<option value="Fraud">Fraud</option>
<option value="Theft">Theft</option>
<option value="Accident">Accident</option>
<option value="Hijacking">Hijacking</option>
</select>
</div>
<div class="width-qrtr">
<label>Police Station</label>
<input id="textbox" disabled="true" type="text" name="Test" />
</div>
It keeps the field disabled. If i change the values to numerical it works but I need the Value for SQL to be inserted into my DB
document.getElementById works only if you put the corresponding id in defined by id="...". Also to compare string values you have to put them in quotes => this.value == 'Hijacking'.
The corrected code looks like this:
document.getElementById('select').addEventListener('change', function() {
if (this.value == 'Hijacking') {
document.getElementById('textbox').disabled = false;
} else {
document.getElementById('textbox').disabled = true;
}
});
<div class="width-qrtr">
<label>Type of event</label>
<select name="Type" id="select">
<option value="">Select Type</option>
<option value="Fraud">Fraud</option>
<option value="Theft">Theft</option>
<option value="Accident">Accident</option>
<option value="Hijacking">Hijacking</option>
</select>
</div>
<div class="width-qrtr">
<label>Police Station</label>
<input id="textbox" disabled="true" type="text" name="Test" />
</div>
Few bugs in your code , fixed as follows:
document.getElementById('select').addEventListener('change', function() {
if (this.value == "Hijacking") {
document.getElementById('textbox').disabled = false;
} else {
document.getElementById('textbox').disabled = true;
}
});
<div class="width-qrtr">
<label>Type of event</label>
<select name="Type" id="select">
<option value="">Select Type</option>
<option value="Fraud">Fraud</option>
<option value="Theft">Theft</option>
<option value="Accident">Accident</option>
<option value="Hijacking">Hijacking</option>
</select>
</div>
<div class="width-qrtr">
<label>Police Station</label>
<input id="textbox" disabled="true" type="text" name="Test" />
</div>
I have these options:
<form>
<select id="poSelect" >
<option selected disabled>Choose here</option>
<option id="buyeroption" value="100101">I am a Buyer</option>
<option id="garageoption" value="100102">I am a Garage</option>
</select>
<label>Full Name</label>
<input type="text" />
<label>Email Address</label>
<input type="email" />
<label>Password</label>
<input type="password" />
<label id="industrylabel" >Select Your Brand</label>
<select id="industryoption">
<option selected disabled>Select</option>
<option value="Renault">Renault</option>
<option value="Pegaut">Pegaut</option>
<option value="Citroen">Citroen</option>
</select>
<div class="form-check-label">
<input id="send_updates" type="checkbox" />
<label for="send_updates">Send me occasional email updates</label>
</div>
So what I need is when user select I am a Buyer label "Select your Brand" and industry option select to be hidden but when I click I am garage to appear.
<form>
<select id="mySelect">
<option id="apple">Apple</option>
<option id="orange">Orange</option>
<option id="pineapple">Pineapple</option>
<option id="banana">Banana</option>
</select>
</form>
<p></p>
<button onclick="myFunction()">textbox1</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").options.namedItem("banana").text;
document.getElementById("demo").innerHTML = x;
}
</script>
Maybe you want something like that if you want to change any thing please check this link:-http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_select_options6
I have a simple select drop down. What I am trying to do is have... The user select a insurance company name. However, if the user does not see the company they're with then I would like to have an 'other' option which will populate a input so that the user can manually type the insurance company in.
Where am I going wrong?
<h3><b>Insurance Information</b></h3>
<style> #InsuranceCompanyOther{display:none;}</style>
<script>$('p select[name=InsuranceCompany]').change(function(e){
if ($('p select[name=InsuranceCompany]').val() == ''){
$('#InsuranceCompanyOther').show();
}else{
$('#InsuranceCompanyOther').hide();
}
});</script>
<div class="control-group">
<label class="control-label">Insurance Comapny</label>
<div class="controls">
<select class="form-control" name="InsuranceCompany">
<option value="<?php echo !empty($InsuranceCompany)?$InsuranceCompany:'';?>"><?php echo !empty($InsuranceCompany)?$InsuranceCompany:'-- Select One --';?></option>
<option value="Allstate">Allstate</option>
<option value="State Farm">State Farm</option>
<option value="Farmers">Farmers</option>
<option value="Travelers">Travelers</option>
<option value="Safeco">Safeco</option>
<option value="USAA">USAA</option>
<option value="MetLife">MetLife</option>
<option value="Farm Bureau">Farm Bureau</option>
<option value="Gem State">Gem State</option>
<option value="Amica">Amica</option>
<option value="American Family">American Family</option>
<option value="">Other</option>
</select>
<div id="InsuranceCompanyOther">
<p>Please Specify: <label id="InsuranceCompanyOther"><input name="InsuranceCompany" type="text" placeholder="Input Insurance Company" size="50" /></label></p>
</div>
</div>
</div>
P.S. I dont believe this is worthy to down vote...
Coreections you need to do in your code are:
You javascript code should be in document.ready, as script is
getting loaded before html and in this it is attaching events to
element that is not on DOM yet.
The tag select[name=InsuranceCompany] is not within p tag
therefore remove p from jQuery selector.
Working Snippet:
$('document').ready(function() {
$('select[name=InsuranceCompany]').change(function(e) {
if ($('select[name=InsuranceCompany]').val() == '') {
$('#InsuranceCompanyOther').show();
} else {
$('#InsuranceCompanyOther').hide();
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3><b>Insurance Information</b></h3>
<style>
#InsuranceCompanyOther {
display: none;
}
</style>
<div class="control-group">
<label class="control-label">Insurance Comapny</label>
<div class="controls">
<select class="form-control" name="InsuranceCompany">
<option value="<?php echo !empty($InsuranceCompany)?$InsuranceCompany:'';?>">
<?php echo !empty($InsuranceCompany)?$InsuranceCompany: '-- Select One --';?>
</option>
<option value="Allstate">Allstate</option>
<option value="State Farm">State Farm</option>
<option value="Farmers">Farmers</option>
<option value="Travelers">Travelers</option>
<option value="Safeco">Safeco</option>
<option value="USAA">USAA</option>
<option value="MetLife">MetLife</option>
<option value="Farm Bureau">Farm Bureau</option>
<option value="Gem State">Gem State</option>
<option value="Amica">Amica</option>
<option value="American Family">American Family</option>
<option value="">Other</option>
</select>
<div id="InsuranceCompanyOther">
<p>Please Specify:
<label>
<input name="InsuranceCompany" type="text" placeholder="Input Insurance Company" size="50" />
</label>
</p>
</div>
</div>
</div>
EDIT:
Include jQuery library in you code, example CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>