Update HTML dropdown list with Javascript - javascript

This issue is making me crazy.
I would like to update a dropdown list (select options) named "Title" (having 2 options ("Mr" & "Ms").
If i run with this way (updating the select option outside the function), the dropdown list is updated selecting the option #1. Also the input field named "e1" is updated.
var MyTitle = document.getElementById("Title");
MyTitle.selectedIndex = 1;
function bb(ff) {
document.getElementById("e1").value = ff;
}
google.script.run.withSuccessHandler(bb).FillUserDetails("gg");
<div class="input-field col s1">
<select id="Title" name="Title">
<option value="1">Mr</option>
<option value="2">Ms</option>
</select>
<label>Gender</label>
</div>
<input type="text" id="e1" name="e1" class="validate">
But If i run with this way (updating the select option inside the function), the dropdown list is not updated and still selecting the option #0. while the input field (e1) is update.
function bb(ff) {
var MyTitle = document.getElementById("Title");
MyTitle.selectedIndex = 1;
document.getElementById("e1").value = ff;
}
google.script.run.withSuccessHandler(bb).FillUserDetails("gg");
<div class="input-field col s1">
<select id="Title" name="Title">
<option value="1">Mr</option>
<option value="2">Ms</option>
</select>
<label>Gender</label>
</div>
<input type="text" id="e1" name="e1" class="validate">
Even using:
M.updateTextFields();
M.FormSelect.init(elems);
the problem persists. Any ideas?
I'm adding the code of the FillUserDetails() function.
in code.gs
function FillUserDetails(a) {
a="Hello";
return a
}
I hope this addition improves the clarity of the question.

Related

How to get the selected text of options in multiple select?

I am trying to get the selected option in multiple select, I can get the value in the form of an array, but I can't get the text of the option.
$(function() {
$('#sizeAddCategory').change(function(e) {
var selected = $(e.target).text();
console.log("selected " + selected);
$('#textAreaAddCategory').val(selected.join(','));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-sm-6">
<label for="sel1">Select Sizes (hold ctrl or shift (or drag with the mouse) to select more than one):</label>
<br/>
<select required class="form-control" id="sizeAddCategory" multiple>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="name">Selected Sizes</label>
<br/>
<textarea required disabled rows="4" class="form-control" id="textAreaAddCategory"></textarea>
</div>
On $(e.target).text(), I am getting all the options text, I need the text of only selected options, so I can display it in the textarea.
Using .text() on a select will give the text of the control - i.e. all of the options, not just the selected ones.
To get the selected text (not value as you pointed out you can already get), you can use:
$(this).find("option:checked").map((i,e)=>$(e).text()).toArray();
Here, $(this).find("option:checked") will give you the option elements that have been selected while the .map will return the .text() for each of those values into a jquery array, with .toArray() to convert to a normal js array.
$(function() {
$('#sizeAddCategory').change(function() {
var selected = $(this).find("option:checked").map((i,e)=>$(e).text()).toArray();
console.log("selected", selected);
$('#textAreaAddCategory').val(selected.join(','));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-sm-6">
<label for="sel1">Select Sizes (hold ctrl or shift (or drag with the mouse) to select more than one):</label>
<br/>
<select required class="form-control" id="sizeAddCategory" multiple>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="name">Selected Sizes</label>
<br/>
<textarea required disabled rows="4" class="form-control" id="textAreaAddCategory"></textarea>
</div>
It's because the target that you're defining is in the select tag. Instead of using:
$('#sizeAddCategory').change(function(e) {
use:
$('.option-category').click(function(e) {
and add a class in the options:
<option value="{{$size->id}}" class="option-category">{{$size->name}}</option>
you write :
var selected = $(e.target).text();
you should get the value of selectbox and
you should write
var selected = $(e.target).val();
oh my god
i right now understand what did you mean
ok
write :
$("#selectBox").change(function(e){
var x = $(e.target).find("option:checked").text();
console.log(x);
});

HTML Form Select Dropdown Options and Hidden Form Fields Not showing in PHP Form using JS Script

Recently i set up a script in JS with help from Stack to show a Form Row labled "other" when i select an option called "Other" from a dropdown option above. Example is below. This works well for one dropdown. But as soon as I add another dropdown Menu and "other" form row the JS code breaks and neither the 1st or 2nd Form Dropdown Options get posted to the Database and the form row "other" does not show. I hope i have explained the issue correctly. I essentially want one JS script to repeat for all dropdown forms so when "other" option value is selected i want the form row "other" to display below so custom data can be typed in. Using Bootstrap 4.3.1 with all JS querir plugins working. The datbase is connected with no issues posting data when its just a text field. So i was hoping someone might have work around and i will have a lot of dropdowns with the "Other" form row posting different form data in to the database. Many thanks.
<script>
function handleSelect() {
document.getElementById("other").value = document.getElementById("mySelect").value;
var selected = document.getElementById("mySelect").value;
var details = document.getElementById("other-details");
if (selected === "") {
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</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="cemetery" />
</div>
</div>
<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">Headstone - Stone Color</label>
<select name="headstone_color" class="form-control" id="mySelect" onchange="handleSelect();">
<option value="headstone_color" selected="selected">Select Headstone - Stone Color</option>
<option value="Black">Black</option>
<option value="African Grey">African Grey</option>
<option value="Platinum Blue">Platinum Blue</option>
<option value="Blue Pearl">Blue Pearl</option>
<option value="Emerald Pearl">Emerald Pearl</option>
<option value="White Pearl">White Pearl</option>
<option value="Imperial Red">Imperial Red</option>
<option value="Balmoral Red">Balmoral Red</option>
<option value="G603-Chinese White/Grey">G603-Chinese White/Grey</option>
<option value="">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="headstone_color" />
</div>
</div>
Please check the select id. both of the select has the same id as myselect. The id must be unique. So please make your code generic and use some unique ids.
Thanks
Something like this?
<script>
function handleSelect() {
document.getElementById("other1").value = document.getElementById("mySelect1").value;
var selected = document.getElementById("mySelect1").value;
var details = document.getElementById("other-details1");
document.getElementById("other2").value = document.getElementById("mySelect2").value;
var selected = document.getElementById("mySelect2").value;
var details = document.getElementById("other-details2");
if (selected === "") {
details.classList.remove("d-none");
details.classList.add("d-block");
} else {
details.classList.remove("d-block");
details.classList.add("d-none");
}
}
</script>
and so on ??

How to hide select2 with options jQuery

I have select form with options, for search by keywords. I'm using select2 lib.
But my select form is created dynamically, and I want to hide and show some select form depending on user's choice.
Now the problem is that, if I choose something from the list:
For ex Production plant, it will appear new select form in which I have options. (it's working good)
If I again go to Production resources and choose another type:
Now I chose Production segment and prev select form is hidden, but in case if I want to go back to the Production plant, it will not appear:
My code:
$("#productionResources").change(function () {
var prodRes = $("#productionResources :selected").html();
$("#selectedProdRes").html(prodRes);
var id = $(this).val();
if (id != "") {
$('#' + id).select2().next().show();
}
idChanging(id);
});
function idChanging(id) {
$("#productionResources").change(function () {
$('#' + id).select2().next().hide();
});
}
HTML:
<div class="display-in-row">
<label>Production resources</label><br>
<select class="form-control" id="productionResources">
<option selected></option>
<option value="productionPlant">Production plant</option>
<option value="productionSegment">Production segment</option>
<option value="valueStream">Value stream</option>
<option value="workCenterGroup">Work center group</option>
<option value="workCenter">Work center</option>
<option value="station">Station"</option>
</select>
</div>
<div class="display-in-row">
<div class="col-12">
<label id="selectedProdRes"></label><br>
<select asp-for="ProductionPlantId" asp-items="Model.ProductionPlant" class="form-control content" id="productionPlant"></select>
<select asp-for="ProductionSegmentId" asp-items="Model.ProductionSegment" class="form-control content" id="productionSegment"></select>
<select asp-for="ValueStreamId" asp-items="Model.ValueStream" class="form-control content" id="valueStream"></select>
<select asp-for="WorkCenterGroupId" asp-items="Model.WorkCenterGroup" class="form-control content" id="workCenterGroup"></select>
<select asp-for="WorkCenterId" asp-items="Model.WorkCenter" class="form-control content" id="workCenter"></select>
<select asp-for="StationId" asp-items="Model.Station" class="form-control content" id="station"></select>
</div>
</div>
The problem comes from your function idChanging():
As soon as you change the 1st select, the event of idChanging() is set and remains. So everytime you select #productionResources, all the events defined by idChanging() will get triggered, so all the previously selected selects will be hidden.
The following should work:
I add a class secondary-select to all the secondary selects to facilitate, but this is not required:
<div class="display-in-row">
<div class="col-12">
<label id="selectedProdRes"></label><br>
<select asp-for="ProductionPlantId" asp-items="Model.ProductionPlant" class="form-control content secondary-select" id="productionPlant"></select>
<select asp-for="ProductionSegmentId" asp-items="Model.ProductionSegment" class="form-control content secondary-select" id="productionSegment"></select>
<select asp-for="ValueStreamId" asp-items="Model.ValueStream" class="form-control content secondary-select" id="valueStream"></select>
<select asp-for="WorkCenterGroupId" asp-items="Model.WorkCenterGroup" class="form-control content secondary-select" id="workCenterGroup"></select>
<select asp-for="WorkCenterId" asp-items="Model.WorkCenter" class="form-control content secondary-select" id="workCenter"></select>
<select asp-for="StationId" asp-items="Model.Station" class="form-control content secondary-select" id="station"></select>
</div>
</div>
$("#productionResources").change(function () {
// Define title
var prodRes = $("#productionResources :selected").html();
$("#selectedProdRes").html(prodRes);
// Make sure none of the 2nd select is visible
$('.secondary-select').select2().next().hide();
// Display the select according to the ID
var id = $(this).val();
if (id !== '') {
$('#' + id).select2().next().show();
}
});

clone input without its value

I want to clone a div and don't want to get the value of cloned input using jquery and ejs..the problem is when I create the array when in the cloned div I get everything ok except the time input I hot the second input only I want to get the value of third time for example
I've tried to empty the value of time input like this Javascript clone without values but it doesn't work.
var state ='', type='', time= '';
$('#state').change(function () {
state = this.value;
})
$('#type').change(function () {
type = this.value;
})
$('#addToilet').click(function () {
setTimeout(function () {
console.log( $('#toiletTime').val());
time = '';
$('#toiletContent').clone(true).appendTo('.another');
time = $("#toiletTime").val();
console.log(state);
toilet.push({state, type, time});
console.log('kk',toilet);
},100)
})
my HTML:
<label>Toilet State</label>
<select class="form-control col-md-6" id="state" name="">
<option disabled selected>Select the State..</option>
<option value="Urine">Urine</option>
<option value="Stool">Stool</option>
</select>
<label>Time</label>
<input type="time" class="form-control col-md-6" id="toiletTime" name="" value="">
<label>Type</label>
<select class="form-control col-md-6" id="type" name="">
<option disabled selected>Select the Type..</option>
<option value="Kind">Kind</option>
</select>
</div>
</div>
<div class="another">
<p class="addNew" hidden>Add Another One</p>
</div>
flush the value after cloning
$('#toiletContent').clone(true).val('').appendTo('.another');
better if you put the cloned item into a var and after append it
var clonedItem = $('#toiletContent').clone(true);
clonedItem.val('').appendTo('.another');

Why isn't my text field being added to the page?

I'm working on the interactivity of a simple HTML form.
Specifically, there is a dropdown select box for job roles. If 'other' is selected, then a text field should appear, asking the user to be more specific.
I'm a beginner and want to do this without jQuery.
Here is a snippet of the HTML I am working with:
<fieldset class="basic">
<legend>Basic Info</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email">
<label>Job Role</label>
<select id="title" name="user_title">
<option value="full-stack js developer">Full Stack JavaScript Developer</option>
<option value="front-end developer">Front End Developer</option>
<option value="back-end developer">Back End Developer</option>
<option value="designer">Designer</option>
<option value="student">Student</option>
<option value="other">Other</option>
</select>
</fieldset>
My intuition tells me to first build the text field and add it's attributes.
I will then use an if condition to test whether or not the selected option is 'other'. If it is, then I will append the newly created text field to the page.
This hasn't been working so far. To try and debug this, I have tried console logging the elements I am trying to work with. I don't think I'm understanding how this works as it's printing out 'undefined' and 'null'.
Here is my JS:
// TASK: Add interactivity to form
'use strict';
// Hold DOM elements for easy access
var pageBody = document.querySelector('body');
var jobRoleSelect = document.getElementById('title');
console.log(jobSelected);
var jobSelected = jobRoleSelect.options[jobRoleSelect.selectedIndex].value;
var basicSection = document.querySelector('basic');
console.log(basicSection);
// Job Role section of the form. Reveal a text field when the "Other" option is selected from the "Job Role" drop down menu
if(jobSelected === 'other') {
var otherText = document.createElement('input');
// Add an text input field. Use the id of "other-title"
otherText.setAttribute('id', 'other-title');
otherText.setAttribute('type', 'text');
otherText.setAttribute('name', 'other_field');
otherText.setAttribute('placeholder', 'Your Title');
var otherLabel = document.createElement('label');
otherLabel.setAttribute('for', 'other_field');
otherLabel.innerHTML = 'other';
basicSelection.appendChild(otherLabel);
basicSelection.appendChild(otherText);
}
You need to set up an event listener to listen for the "change" event that is fired when the user makes a selection from the dropdown menu. Also you are referencing "basicSelection" instead of "basicSection" in your if statement.
'use strict';
var jobRoleSelect = document.getElementById('title');
var basicSection = document.getElementsByClassName('basic')[0];
document.getElementById("title").addEventListener("change", function(){
var jobSelected = jobRoleSelect.options[jobRoleSelect.selectedIndex].value;
console.log(jobSelected);
if(jobSelected === 'other') {
var otherText = document.createElement('input');
// Add an text input field. Use the id of "other-title"
otherText.setAttribute('id', 'other-title');
otherText.setAttribute('type', 'text');
otherText.setAttribute('name', 'other_field');
otherText.setAttribute('placeholder', 'Your Title');
var otherLabel = document.createElement('label');
otherLabel.setAttribute('for', 'other_field');
otherLabel.innerHTML = 'Other:';
basicSection.appendChild(otherLabel);
basicSection.appendChild(otherText);
}
});
<fieldset class="basic">
<legend>Basic Info</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email">
<label>Job Role</label>
<select id="title" name="user_title">
<option value="full-stack js developer">Full Stack JavaScript Developer</option>
<option value="front-end developer">Front End Developer</option>
<option value="back-end developer">Back End Developer</option>
<option value="designer">Designer</option>
<option value="student">Student</option>
<option value="other">Other</option>
</select>
</fieldset>
If the JS you've shown is included at the end of the document body then it will run once when the page first loads. I assume what you actually want is to have it run in response to the user changing what is selected, in which case you need to wrap your code in a function and make that an event handler for the change event.
var jobRoleSelect = document.getElementById('title');
jobRoleSelect.addEventListener('change', function() {
// your other code here
});
Note also that you need to allow for the user changing the selection to "Other", then changing it back to something else, then changing it to "Other" again, that is, your function would need to be able to remove the text input if not required for the current selection.
But I think it would be a lot simpler to just include the text element and label in your html and hide and show them as needed:
var jobRoleSelect = document.getElementById('title');
jobRoleSelect.addEventListener('click', function() {
var otherSelected = jobRoleSelect.value === 'other';
var otherElements = document.querySelectorAll('.other');
for (var i = 0; i < otherElements.length; i++) {
if (otherSelected)
otherElements[i].classList.remove('hidden');
else
otherElements[i].classList.add('hidden');
}
});
label {
display: block;
}
.hidden {
display: none;
}
<fieldset class="basic">
<legend>Basic Info</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email">
<label>Job Role</label>
<select id="title" name="user_title">
<option value="full-stack js developer">Full Stack JavaScript Developer</option>
<option value="front-end developer">Front End Developer</option>
<option value="back-end developer">Back End Developer</option>
<option value="designer">Designer</option>
<option value="student">Student</option>
<option value="other">Other</option>
</select>
<label class="other hidden" for="other-title">Other</label>
<input class="other hidden" type="text" id="other-title" name="other-field" placeholder='Your title'>
</fieldset>
I've given all (that is both) of the elements that need to be hidden or shown the other class, which means my code has to loop over them. You could instead wrap them in a div and just hide the div.
Note that I've done the hiding/showing via a class, which I add or remove via the elements' .classList. Unfortunately .classList isn't supported in IE<=9, but there is a polyfill, or of course you can just set the style.display directly or whatever.
You have so many errors in your code. But i have figured them out and came out with the solution. Use this
<fieldset class="basic">
<legend>Basic Info</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email">
<label>Job Role</label>
<select id="title" name="user_title">
<option value="full-stack js developer">Full Stack JavaScript Developer</option>
<option value="front-end developer">Front End Developer</option>
<option value="back-end developer">Back End Developer</option>
<option value="designer">Designer</option>
<option value="student">Student</option>
<option value="other">Other</option>
</select>
</fieldset>
<script>
'use strict';
// Hold DOM elements for easy access
var pageBody = document.querySelector('body');
var jobRoleSelect = document.getElementById('title');
//console.log(jobSelected);
var basicSelection = document.querySelector('.basic');
//console.log(basicSection);
jobRoleSelect.onchange = function(){
var jobSelected = jobRoleSelect.options[jobRoleSelect.selectedIndex].value;
// Job Role section of the form. Reveal a text field when the "Other" option is selected from the "Job Role" drop down menu
if(jobSelected == 'other') {
console.log('nice');
var otherText = document.createElement('input');
// Add an text input field. Use the id of "other-title"
otherText.setAttribute('id', 'other-title');
otherText.setAttribute('type', 'text');
otherText.setAttribute('name', 'other_field');
otherText.setAttribute('placeholder', 'Your Title');
var otherLabel = document.createElement('label');
otherLabel.setAttribute('for', 'other_field');
otherLabel.innerHTML = 'other';
basicSelection.appendChild(otherLabel);
basicSelection.appendChild(otherText);
}
}
</script>
Here is a work jsFiddle

Categories