Javascript, change hidden value to dropdown index - javascript

I have a form in my template with a drop down to select an option. how can I change a hidden value to the index of whats selected. So if they pick option 2 with the value of "Mains" it stores 1 or if they choose option 1 with a value of "Starters" it stores 0.
<div class="form-group">
<input type="hidden" id="arrayIndex" name="arrayIndex">
<label for="dishCategory">Choose a category:</label>
<select type="text" class="form-control" name="dishCategory" id="dishCategory">
{{#entries}}
{{#category}}
<option value="{{catName}}">{{catName}}</option>
{{/category}}
{{/entries}}
</select>
</div>

The following snippet adds some logic to your html document. Anytime you select a new option from the dropdown, it performs the following actions:
Updates an output message showing which index was picked among the
options
Sets the value of the hidden type input (#arrayIndex) as that index mentioned before
document.addEventListener("DOMContentLoaded", function() {
let select = document.getElementById('dishCategory');
select.addEventListener('change', (event) => {
//value of the selected option
let selectedValue = select.value;
//index of the selected option
let selectedOptionIndex = select.selectedIndex;
//the entire selected option element
let selectedOption = select.options[select.selectedIndex];
//updates the msg with information about which option was picked
document.getElementById('msg').innerText =
`The index of the option chosen was: ${selectedOptionIndex}`;
//updates the value of the hidden input with such index
document.getElementById('arrayIndex').value =
selectedOptionIndex;
});
});
#msg{
border: solid 1px black;
margin-bottom: 10px;
}
<div class="form-group">
<input type="hidden" id="arrayIndex" name="arrayIndex">
<div id="msg">Select an option in the dropdown...</div>
<label for="dishCategory">Choose a category:</label>
<select type="text"
class="form-control"
name="dishCategory"
id="dishCategory">
<option value="" disabled selected>Select your option</option>
<option value="Tom">01-Tom</option>
<option value="Jerry">02-Jerry</option>
<option value="Mickey">03-Mickey</option>
</select>
</div>

Related

How to add more inputs depend dropdown values (PHP, JS)

so I want to add some input based on the option value from the drop down that will be selected. For example, the dropdown looks like this:
<form action="#" method="post">
<select name="job" id="job" >
<option value="">position</option>
<option value="1">Teacher</option>
<option value="2">Principal</option>
<option value="3">Staff</option>
</select>
</form>
and if the selected value is number 1 or teacher, it will display new input like this below it:
<input type="number" name="student" id="student">
<input type="Text" name="class" id="class">
if you guys know how to make it, maybe you can help me with this please, either using php or js because I've been stuck with this problem for a long time.
There are many different ways to achieve what you want depends on what framwwork you are using.
For
vanilla JS: onchange to control css OR append html.
jQuery: $("#class").hide() / .show();
Angular: ngIf
vueJs: v-if / v-show
etc...
In JS you can do that by adding change event listener to the <select></select> element;
and each time the selected <option></option> changes you should make all inputs hidden then make the ones you want visible.
Example:
const select = document.getElementById('job');
select.addEventListener('change', function() {
// returns the selected option's value
const selectedOption = select.value;
// makes all inputs hidden each time the selected option changes.
document.querySelectorAll('input').forEach(input => input.style.display = "none");
// for 1st parameter, pass the option value.
// for 2nd parameter, pass an array of ids of the inputs you want to make them visible.
const setInputs = (state, id) => {
if (selectedOption === state) {
(id.sup ? id = [id] : id);
id.forEach(i => {
try {
document.getElementById(i).style.display = 'block';
} catch (error) {
console.error(`#${i} doesn't exists!`)
}
});
}
}
/* if the selected option's value is 1(Teacher),
The "student" and "class" inputs will be visible. */
setInputs('1', ['student', 'class']);
/* if the selected option's value is 2(Principal),
The "id" and "principal" inputs will be visible. */
setInputs('2', ['id', 'principal']);
/* if the selected option's value is 3(Staff),
The "name" input will be visible. */
/* if you want to show just one input,
don't need to pass an array as 2nd parameter
just pass a string */
setInputs('3', 'name');
});
/* Makes all inputs hidden by default */
input {
display: none;
}
<form action="#" method="post">
<select name="job" id="job">
<option selected hidden disabled>Position</option>
<option value="1">Teacher</option>
<option value="2">Principal</option>
<option value="3">Staff</option>
</select>
<input type="number" name="student" id="student" placeholder="Student">
<input type="Text" name="class" id="class" placeholder="class">
<input type="number" name="id" id="id" placeholder="ID">
<input type="number" name="principal" id="principal" placeholder="Principal">
<input type="Text" name="name" id="name" placeholder="Name">
</form>
before that, set the style of input is hide, then You can try onchange on select, Which is get the value of select. then proceed to show the hide input.
const job = document.getElementById("job");
let add = document.getElementsByClassName("addEx");
job.addEventListener("change",function() {
if (this.value == 1) {
for (let i = 0; i < add.length; i++) {
add[i].style.display = 'block';
}
}
else {
for (let i = 0; i < add.length; i++) {
add[i].style.display = 'none';
}
}
});
.addEx {
display:none;
}
<form action="#" method="post">
<select name="job" id="job" >
<option value="">position</option>
<option value="1">Teacher</option>
<option value="2">Principal</option>
<option value="3">Staff</option>
</select>
<input type="number" name="student" id="student" class="addEx">
<input type="Text" name="class" id="class" class="addEx">
</form>
You can use like this:
jQuery(document).ready(function() {
$('#job').change(function() {
let job = $('#job').val();
if (job == '1') {
$('#sampleBox').show();
} else {
$('#sampleBox').hide();
}
});
});
#sampleBox {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="job" id="job">
<option selected hidden disabled>Position</option>
<option value="1">Teacher</option>
<option value="2">Principal</option>
<option value="3">Staff</option>
</select>
<div id="sampleBox">
<input type="number" name="student" id="student">
<input type="Text" name="class" id="class">
</div>

How do I change select to input text while checkbox is checked?

It's my first contact with js so please don't hate me
I have something like this:
function Zmiana(isChecked) {
document.getElementById('test').type = 'text';
}
<div class="dropdown">
<select id="test" name="producent" class="dropdown-select">
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="Lenovo">Lenovo</option>
</select> <br>
</div>
But it doesn't work
You won't be changing the select into a textbox. Instead, you'll have both a select and a textbox. The checkbox will simply determine which is shown.
Also, your select should include a first choice that is not considered valid so that you don't get a submitted value that the user didn't choose.
.hidden { display:none; }
<input type="checkbox" id="check">Check to enter text directly
<div class="dropdown">
<select id="test" name="producent" class="dropdown-select">
<option value="">--- Choose ---</option>
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="Lenovo">Lenovo</option>
</select>
<input id="data" class="hidden">
</div>
<script>
let text = document.getElementById('data');
let check = document.getElementById("check");
let select = document.getElementById("test");
// You must set up your function to handle the
// click event of the checkbox
check.addEventListener("click", Zmiana);
function Zmiana(){
// Add or remvoe the hidden class based on
// whether it's already in use
select.classList.toggle("hidden");
text.classList.toggle("hidden");
}
</script>

Getting the name of a drop-down selection using JavaScript

I'm using JavaScript to pull in some information into a list and I'm not sure how to target a drop-down selection.
This is what I'm using to grab the result of a checked radio button:
RequestType: $("input[name=requestType]:checked").val(),
How would I be able to use the same format to grab the selection of a drop-down?
SessionType:
You don't need to call the function on every click, just a listener for the change-event is normally enough.
If you also want to get the value of the select-input at other moments, you can save the selected value in an variable or query the input-selects with the :selected-option.
$('#rChoices').on('change', function(event) {
let value = event.target.value;
console.log(value);
});
$('#btnGetValue').on('click', function(event) {
let value = $('#rChoices option:selected').val();
console.log(value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row rChoices">
<label for="rChoices" class="col-form-label">Please choose a application below:</label>
<select class="form-control" id="rChoices">
<option class="" selected disabled>---------</option>
<option value="onedrive" id="onedrive">OneDrive</option>
<option value="teams" id="teams">Teams</option>
<option value="outlook" id="outlook">Outlook</option>
<option value="officesuite" id="officesuite">Office Suite</option>
<option value="planner" id="planner">Planner</option>
<option value="sharepoint" id="sharepoint">SharePoint</option>
<option value="stream" id="stream">Stream</option>
<option value="yammer" id="yammer">Yammer</option>
</select>
<div class="help-block with-errors"></div>
</div>
<button id="btnGetValue">Get Value</button>
This worked for my current situation:
SessionType: $('#rChoices :selected').text()

Add the value of the hidden input field of other option

I ended by this code after helping with many thanks of others here in this website. Now, in the following code of submitting the form, I want the value of the hidden input field to be instead of Other when shown the result.
<form action="" method="post">
<div class="row">
<div class="col-sm-8 col-sm-offs et-2">
<select class="form-control" name="country" id="country" required >
<option value="">Please select your country</option>
<option value="A">Country A</option>
<option value="B">Country B</option>
<option value="C">Country C</option>
<option value="Other">Other</option>
</select>
<input type ="text" id="country_other" style="display:none">
<button type="submit" class="btn btn-gpsingh">Next</a>
</div>
</div>
</form>
<script>
$("#country").change(function(){
var value = this.value;
if(value =='Other')
{
$("#country_other").show();
$("#country_other").attr('required', false);
}
else
{
$("#country_other").hide();
$("#country_other").val('');
$("#country_other").attr('required', false);
}
});
</script>
Something you could try, if I understood correctly, would be to remove the name attribute from the SELECT menu if the chosen value is other and assign the name attribute instead to the text input element - when the form is submitted the item in the POST array with the name of country would come from the text field and not the select menu...
$('#country').change(function(){
if( this.value == 'Other' ){
$('#country_other').show();
$('#country_other').attr('required', false);
/* remove name from select & add to text field */
$('#country_other').attr('name', $(this).attr('name') );
$(this).removeAttr('name');
} else {
$('#country_other').hide();
$('#country_other').val('');
$('#country_other').attr('required', false);
/* remove name attribute from text field and assign back to select menu */
$(this).attr('name', $('#country_other').attr('name') );
$('#country_other').removeAttr('name');
}
});

how to call trigger change on change event javascript

i have a checkbox where if isChecked = 1 a select element will show up then from select you can choose from the option. then if isChecked = 0 select element hide and supposedly to reset the selected option to its default option.
scenario i checked the input box.
then the select element show up then i select a room.
then i changed my mind so i unchecked the inputbox.
what supposed to happen is to change the selected option to its default option.
but when i re-checked the input box the option i selected still tag as selected option.
<div class="form-group">
<input type="checkbox" name="isChecked"><span>isChecked </span>
</div>
<div class="form-group technical">
<label>Rooms</label>
<select class="form-control technicalrooms" name="technicalrooms">
<option selected disabled>Select Room</option>
<option value="Function Room">Function Room</option>
<option value="Meeting Room">Meeting Room</option>
</select>
</div>
and here is my code.
$('.technical').hide();
$('[name="isChecked"]').on('change', function () {
var val = ($(this).is(':checked') == true) ? 1 : 0;
if(val == 1){
$(".technical").show();
}else{
$(".technical").hide();
$(".technicalrooms option:first").trigger('change');
}
})
You want to set the options checked property to true not trigger change. Triggering change will only execute any handlers bound to it, not affect its state.
$(".technicalrooms option:first").prop('selected', true);
working demo
$('.technical').hide();
$('[name="isChecked"]').on('change', function () {
var val = ($(this).is(':checked') == true) ? 1 : 0;
if(val == 1){
$(".technical").show();
}else{
$(".technical").hide();
var trooms = $(".technicalrooms');
$("option:first", trooms).prop('selected', true);
trooms.trigger('change');
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="form-group">
<input type="checkbox" name="isChecked"><span>isChecked </span>
</div>
<div class="form-group technical">
<label>Rooms</label>
<select class="form-control technicalrooms" name="technicalrooms">
<option selected disabled>Select Room</option>
<option value="Function Room">Function Room</option>
<option value="Meeting Room">Meeting Room</option>
</select>
</div>

Categories