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>
Related
I have the select below and I want to pass its selected value based on the option's name (color), inside an input field using jQuery but it doesn't work.
What am I doing wrong?
$(document).ready(function() {
$('#select_color_id option[name="color"]').on('change', function() {
var selectedoption = $('#select_color_id').val();
$('#search-query').val(selectedoption);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div style="margin-bottom:20px;">
<input type="text" id="search-query" class="search-color-field" name="search_query" placeholder="Search your color...">
</div>
<select class="form-control" id="select_color_id">
<option value="white" name="color">White</option>
<option value="black" name="color">Black</option>
<option value="red" name="color">Red</option>
<option value="brown" name="color">Brown</option>
<option value="pink" name="color">Pink</option>
<option value="search-add" name="new-color">Add new color</option>
</select>
First option tag does not have change event. But you can get selected option and check the name to see if it is color or not:
$(document).ready(function() {
$('#select_color_id').on('change', function(e) {
var optionSelected = $(this).find("option:selected")[0];
console.log(optionSelected.getAttribute("name"))
if(optionSelected.getAttribute("name") === "color"){
var selectedoption = $('#select_color_id').val();
$('#search-query').val(selectedoption);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div style="margin-bottom:20px;">
<input type="text" id="search-query" class="search-color-field" name="search_query" placeholder="Search your color...">
</div>
<select class="form-control" id="select_color_id">
<option value="white" name="color">White</option>
<option value="black" name="color">Black</option>
<option value="red" name="color">Red</option>
<option value="brown" name="color">Brown</option>
<option value="pink" name="color">Pink</option>
<option value="search-add" name="new-color">Add new color</option>
</select>
If search-add is always going to be the only thing you don't want to appear then you can just do a check for it, then otherwise set the value of your search-query input field to your selectedoption variable:
$(document).ready(function() {
$('#select_color_id').on('change', function() {
var selectedoption = $('#select_color_id').val();
if (selectedoption == 'search-add') {
return;
}
$('#search-query').val(selectedoption);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div style="margin-bottom:20px;">
<input type="text" id="search-query" class="search-color-field" name="search_query" placeholder="Search your color...">
</div>
<select class="form-control" id="select_color_id">
<option value="white" name="color">White</option>
<option value="black" name="color">Black</option>
<option value="red" name="color">Red</option>
<option value="brown" name="color">Brown</option>
<option value="pink" name="color">Pink</option>
<option value="search-add" name="new-color">Add new color</option>
</select>
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!
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>
I am new to javascript and I want to use the select option to list each selected value in the input tag.
I have tried to use javascript to show the selected value but when I select for the second time the first value dismiss and show the second selected. I was expected to show each selected value in the input tag separately without dismissing other previous selected.
function getSelectedValue() {
var selectedValue = document.getElementById("list").value;
document.getElementById("myValues").innerHTML = selectedValue;
}
<select name="" onchange="getSelectedValue();" class="form-control" id="list">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
</select>
<input type="text" name="value[]" id="myValue" value="">
I expected the output of
<input type="text" name="value[]" id="myValue" value="Option1">
<input type="text" name="value[]" id="myValue" value="Option3">
thus in the input should show
Option1
Option3
You can do something like that if you want to use Jquery.
function getSelectedValue() {
var selectedValue = document.getElementById("list").value;
if(selectedValue) {
var html ='<input type="text" name="value[]" id="myValue" value="'+selectedValue+'"> <br>';
$('.inp').append(html);
$('.default').remove();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="" onchange="getSelectedValue();" class="form-control" id="list">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
</select>
<div class="inp">
<input type="text" name="value[]" id="myValue" value="" class="default">
</div>
I dont know what you really expect, but I think this solution can be helpful to you. checkout the snippet.
First get the value and then append to the existing value
function getSelectedValue() {
var selectedValue = document.getElementById("list").value;
var _optionSelected = document.getElementById("myValue").value;
_optionSelected.length ? document.getElementById("myValue").value += ', '+selectedValue : document.getElementById("myValue").value += selectedValue;
}
<select name="" onchange="getSelectedValue();" class="form-control" id="list">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
</select>
<input type="text" name="value[]" id="myValue" value="">
Im not entirely sure I understand you 100%, but if I do i think you want to be able to see all of the selected values in the input box? That you have selected, ever! If so:
var values = []
function getSelectedValue() {
var selectedValue = document.getElementById("list").value;
if (values.indexOf(selectedValue) === -1) { //prevents duplicate values
values.push(selectedValue)
}
document.getElementById("myValues").setAttribute('value', values.join(' '))
}
<select name="" onchange="getSelectedValue();" class="form-control" id="list">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
</select>
<input type="text" name="value[]" id="myValues" value="">
You can use Select2 jQuery plugin for that.
$(document).ready(function() {
$('.js-example-basic-multiple').select2({
width: '100%'
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<select class="js-example-basic-multiple" name="options[]" multiple="multiple">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Option4</option>
</select>
You can add a new input to the div with the selected value
var selectedValues = [];
function getSelectedValue() {
var selectedValue = document.getElementById("list").value;
if( !selectedValues.includes(selectedValue) ){
selectedValues.push(selectedValue);
document.getElementById("myValues").innerHTML +=
'<input type="text" name="value[]" id="myValue" value="' + selectedValue + '"></br>';
}
}
<select name="" onchange="getSelectedValue();" class="form-control" id="list">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
</select>
<div id="myValues">
</div>
I have the following code:
<select>
<option value="Type 1">Type 1</option>
<option value="Type 2">Type 2</option>
<option value="Type 3">Type 3</option>
<option value="Other">Other</option>
</select>
<input type="text" id="other" />
What I want to do is using jQuery make the textbox below hidden by default, and then show it if a user selects the other option from the dropdown.
No need for any css here.
$('#sel').change(function() {
var selected = $(this).val();
if(selected == 'Other'){
$('#other').show();
}
else{
$('#other').hide();
}
});
<select id="sel">
<option value="Type 1">Type 1</option>
<option value="Type 2">Type 2</option>
<option value="Type 3">Type 3</option>
<option value="Other">Other</option>
</select>
<input type="text" id="other" style="display: none;" />
$('#sel').change(function() {
$('#other').css('display', ($(this).val() == 'Other') ? 'block' : 'none');
});
Try this:
<select id="selectbox_id">
<option value="Type 1">Type 1</option>
<option value="Type 2">Type 2</option>
<option value="Type 3">Type 3</option>
<option value="Other">Other</option>
</select>
<input type="text" id="other" />
JQuery:
$(function(){
// hide by default
$('other').css('display', 'none');
$('selectbox_id').change(function(){
if ($(this).val() === 'Other') {
$('other').css('display', 'block');
}
});
});
<select id = "ddlPassport" onchange = "ShowHideDiv()" style="width:150px;">
<option value="Y">Type 1</option>
<option value="Y">Type 2</option>
<option value="N">Type 3</option>
<option value="D">Other</option>
</select>
<script type="text/javascript">
function ShowHideDiv()
{
var ddlPassport = document.getElementById("ddlPassport");
var dvPassport = document.getElementById("dvPassport");
dvPassport.style.display = ddlPassport.value == "Y" ? "block" : "none";
dvPassport1.style.display = ddlPassport.value == "N" ? "block" : "none";
dvPassport2.style.display = ddlPassport.value == "D" ? "block" : "none";
}
<div id="dvPassport" style="display: none">
<form action="viewdata.php" method="POST">
Enter Data:
<input type="text" id="txtPassportNumber" name="data" />
<br>
<input type="submit" value="Search" name="submit"
style="float:right;width:150px;margin-top:10px;">
</form>
</div>
<div id="dvPassport1" style="display: none">
<form action="viewdata.php" method="POST">
Enter Data:
<input type="number" id="txtPassportNumber" name="data" />
<br>
<input type="submit" value="Search" name="submit"
style="float:right;width:150px;margin-top:10px;">
</form>
</div>
<div id="dvPassport2" style="display: none">
<form action="viewdata.php" method="POST">
Enter Data:
<input type="date" id="txtPassportNumber" name="data" />
<br>
<input type="submit" value="Search" name="submit"
style="float:right;width:150px;margin-top:10px;">
</form>
</div>