How can I change the variable, in my case "docFileID" based on the user selection from the HTML.
For example, if the user select month-8 then the docFileID will equal = " qwer"
or if the user select month-9 the docFileID = "jklk" and so on.
I have tried this but it is not working. I get this error in the console:
Uncaught at createPdf (Code:30)
HTML
<div class="input-field " style="padding:0.2cm;" >
<select name="name" class="browser-default" id="sel">
<option value="" disabled selected> Choose your option</option>
<option value="1">month-8</option>
<option value="2">month-9</option>
<option value="3">month-10</option>
<option value="4">month-11</option>
<option value="5">month-12</option>
</select>
Javascript
function addRecord (){
var id = document.getElementById('id').value;
var name = document.getElementById('name').value;
var dep = document.getElementById('dep').value;
var job = document.getElementById('job').value;
var sel;
if(document.getElementById("sel").value == "mothe-8"){
sel = '1zjkJ8f';
}
else{
if(document.getElementById("sel").value == "month-9"){
sel = '1mWjyTVx';
} else{
sel = '' ;
}
if(document.getElementById("sel").value == "month-10"){
sel = '1s1GnG3fB7';
} else{
sel = '' ;
}
if(document.getElementById("sel").value == "month-11"){
sel = '1OKuviyHRiWW';
} else{
sel ='' ;
}
if(document.getElementById("sel").value == "month-12"){
sel = '1WbzrU12VEwuMsoE';
} else{
sel = '' ;
}
}
google.script.run.withSuccessHandler(onSuccess).createPdf(name,id,dep,job,sel);
google.script.run.withFailureHandler(onFailure).createPdf();
} // addRecord ended
code that I want to change is its id :
function createPdf (name,id,dep,job,sel,docFile,tempFolder,pdfFolder) {
var docFileID= sel;
} // createPdf closed
the value property refers to the value in the HTML, not to the text of the option element. Also, the logic is a mess, you should use a switch or at least else if
function addRecord(){
var sel;
switch(document.getElementById("sel").value){
case "month-8":
sel = '1zjkJ8f';
break;
case "month-9":
sel = '1mWjyTVx';
break;
case "month-10":
sel = '1s1GnG3fB7';
break;
case "month-11":
sel = '1OKuviyHRiWW';
break;
case "month-12":
sel = '1WbzrU12VEwuMsoE';
break;
default:
sel = '' ;
}
console.log(sel);
}
<div class="input-field " style="padding:0.2cm;" >
<select name="name" class="browser-default" id="sel" onchange="addRecord()">
<option value="" disabled selected> Choose your option</option>
<option value="month-8">month-8</option>
<option value="month-9">month-9</option>
<option value="month-10">month-10</option>
<option value="month-11">month-11</option>
<option value="month-12">month-12</option>
</select>
I changed the js to
var sel;
if(document.getElementById("sel").value == 1){
sel = '1zjkJ8f';
}
else {
if(document.getElementById("sel").value == 2){
sel = '1mWjyTV';
} else if (document.getElementById("sel").value == 3){
sel = 'RLbSNM';
} else if(document.getElementById("sel").value == 4){
sel = '1OKIZ_xvtfNGNeUU3VNME';
} else if (document.getElementById("sel").value == 5){
sel = '1OKuv0-jIZ_xvtfNGNeUU3VNME' ;
}
}
Related
First of all, sorry, I know the next code is wrong, I'm new in programming and I have a problem with it. When the user select an option from the Select, a value it must change, then, the user must write a price in numbers which value must not be higher than the previous value, here is when the scripts should act but it doesn't works. The correct code must be something like that:
<script>
function cboc(){
var cb = $("#cbotipfon").val();
var maxvalGORE = null;
if(cb == 0){
maxvalGORE = 0;
if(cb == 15){
maxvalGORE = 100;
}
if(cb == 16){
maxvalGORE = 200;
}
}
function cbocc(){
var val = null;
var x = document.GetElementById('txtprepos').value;
val = parseInt(x);
if(val > maxvalGORE){
alert('The value is higher than $' + maxvalGORE +'.');
document.GetElementById('txtprepos').value = "";
}
}
</script>
<select style="width=5.5em;" name="cbotipfon" id="cbotipfon" onchange="cboc()">
<option value="0">Select</option>
<option value="15">Option A</option>
<option value="16">Option B</option>
</select>
<input type="number" onblur="cbocc()" name="txtprepos" id="txtprepos"/>
I've been with that problem for days. If you can help me I'll be eternally grateful. Thanks in advance and for take your time.
Here is a simple example. No need to declare any function. Just declare your variables correctly and use the addEventListener method for getting the values of the input and select elements.
var maxvalGORE ,val ,cb ,x = null;
document.getElementById("cbotipfon").addEventListener("change", function(){
var cb = document.getElementById('cbotipfon').value;
if(cb == 0){
maxvalGORE = 0;
}
if(cb == 15){
maxvalGORE = 100;
}
if(cb == 16){
maxvalGORE = 200;
}
});
document.getElementById("txtprepos").addEventListener("change", function(){
x = document.getElementById('txtprepos').value;
val = parseInt(x);
if(val > maxvalGORE){
alert('The value is higher than $' + maxvalGORE +'.');
} else if(val == maxvalGORE) {
alert('The value is equal to $' + maxvalGORE +'.');
} else {
alert('The value is lower than $' + maxvalGORE +'.');
}
document.getElementById('txtprepos').value = "";
});
<select style="width=5.5em;" name="cbotipfon" id="cbotipfon">
<option value="0">Select</option>
<option value="15">Option A</option>
<option value="16">Option B</option>
</select>
<input type="number" name="txtprepos" id="txtprepos"/>
I have two select element and I want to show some options in second select based on what user choose at first select.
consider first select have two options : a , b ...
if user choose 'a' from first select :
the second select optiones should be -> c , d ...
and if user choose 'b' from first select :
the second select optiones should be : e , f ...
I have done some coding but the problem is at the start when user doesnt choose any option from first select the second select is always empty(it should show c , d)
<!DOCTYPE html>
<html>
<body>
<select id="s1" required>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="s2" required > </select>
<script>
document.getElementById("s1").onchange = function() {
document.getElementById('s2').disabled = false; //enabling s2 select
document.getElementById('s2').innerHTML = ""; //clear s2 to avoid conflicts between options values
var opt0 = document.createElement('option');
var opt1 = document.createElement('option');
if (this.value == 'a') {
opt0.textContent = "c";
opt1.textContent = "d";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
} else if (this.value == 'b') {
opt0.textContent = "e";
opt1.textContent = "f";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
}
};
</script>
</body>
</html>
If you can save the option values in a lookup object (or JSON):
function setOptions(select, values) {
for (var i = select.length = values.length; i--; )
select[i].innerText = values[i]
}
function value(select) { return select.value || select[0].value } // 1st item by default
var data = { 1: { 1.1: [1.11, 1.12], 1.2: [1.21, 1.22] },
2: { 2.1: [2.11, 2.12], 2.2: [2.21, 2.22], 2.3: [2.31, 2.32, 2.33] } }
s2.onchange = function() { setOptions(s3, data[value(s1)][value(s2)]) }
s1.onchange = function() { setOptions(s2, Object.keys(data[value(s1)])); s2.onchange() }
setOptions(s1, Object.keys(data)); s1.onchange(); // fill the options
<select id=s1 required size=3></select>
<select id=s2 required size=3></select>
<select id=s3 required size=3></select>
This code is based on JavaScript (No need for jQuery)
change Id name and value (x=="desire_value") according to your code
function myFunction() {
var x = document.getElementById("select1").value;
if (x == "3") document.getElementById("select2").style.display = "block";
else document.getElementById("select2").style.display = "none";
}
<select id="select1" onchange="myFunction()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="select2" style="display: none;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
You have to write the functionality outside of onchange(). Try the following:
document.getElementById("s1").onchange = function() {
document.getElementById('s2').disabled = false; //enabling s2 select
document.getElementById('s2').innerHTML = ""; //clear s2 to avoid conflicts between options values
var opt0 = document.createElement('option');
var opt1 = document.createElement('option');
if (this.value == 'a') {
opt0.textContent = "c";
opt1.textContent = "d";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
} else if (this.value == 'b') {
opt0.textContent = "e";
opt1.textContent = "f";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
}
};
let element = document.getElementById("s1");
let selOption = element.options[element.selectedIndex].value;
if(selOption == 'a'){
var opt0 = document.createElement('option');
var opt1 = document.createElement('option');
opt0.textContent = "c";
opt1.textContent = "d";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
}
<select id="s1" required>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="s2" required > </select>
Why don't you just put that hard coded...
<!DOCTYPE html>
<html>
<body>
<select id="s1" required>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="s2" required >
<option value="c">c</option>
<option value="d">d</option>
</select>
<script>
document.getElementById("s1").onchange = function() {
document.getElementById('s2').disabled = false; //enabling s2 select
document.getElementById('s2').innerHTML = ""; //clear s2 to avoid conflicts between options values
var opt0 = document.createElement('option');
var opt1 = document.createElement('option');
if (this.value == 'a') {
opt0.textContent = "c";
opt1.textContent = "d";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
} else if (this.value == 'b') {
opt0.textContent = "e";
opt1.textContent = "f";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
}
};
</script>
</body>
</html>
One approach to contemplate is populating the dependant dropdowns with all values and use a data attribute for the parent-child relationship. Javascript then clones and removes the options for later insertion.
The functional javascript is now very lean and the dependency relationships are maintained in the DOM.
var s2Clone;
// Doesn't work in older IEs
//CLone the Dependant drop down and hide
document.addEventListener('DOMContentLoaded', function(){
s2Clone = document.getElementById("s2").cloneNode(true);
document.getElementById("s2").innerHTML = "";
}, false);
document.getElementById("s1").onchange = function() {
var selected = this.value;
//Get the nodes with a parent attribute of the selected data
var optionsToInsert = s2Clone.querySelectorAll("[data-parent='" + selected +"']");
//clear existing
var s2 = document.getElementById("s2");
s2.innerHTML = "";
//Add The new options.
for(i = 0; i < optionsToInsert.length; i++)
{
s2.appendChild(optionsToInsert[i]);
}
}
<select id="s1" required>
<option value="">Please select</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="s2" required >
<option value="a1" data-parent="a">a - 1</option>
<option value="a2" data-parent="a">a - 2</option>
<option value="a3" data-parent="a">a - 3</option>
<option value="b1" data-parent="b">b - 1</option>
<option value="b2" data-parent="b">b - 2</option>
<option value="b3" data-parent="b">b - 3</option>
</select>
My java script code is not working, Currently when you select a value in the first drop down menu the second drop down menu becomes editable which is fine. But I want to make it as if when you select the option 'default' in the first drop down menu the second drop down menu reverts to 'default' and becomes disabled and read only, but if I select any other option other then 'default' the second menu should be editable.
<html>
<head>
<script type="text/javascript">
function mySecondFunction() {
var ddl = document.getElementById("1");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == "Default")
{
document.getElementById("mySelection").disabled = true;
}else {
document.getElementById("mySelection").disabled = false;
}
}
</script>
</head>
<body>
<select id="1" onchange="mySecondFunction()">
<option value="OptionZero">Default</option>
<option value="OptionOne">Car</option>
<option value="OptionTwo">Car2</option>
<option value="OptionThree">Car23</option>
</select>
<br>
<select disabled id="mySelection">
<option value="OptionZero">Default</option>
<option value="OptionOne">A</option>
<option value="OptionTwo">B</option>
<option value="OptionThree">C</option>
</select>
</body>
</html>
You should write
if(selectedValue == "OptionZero") {
It is the value attribute which set the value on an element.
Try as
function mySecondFunction() {
var ddl = document.getElementById("1");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == "OptionZero")
{
document.getElementById('mySelection').selectedIndex = 0;
document.getElementById("mySelection").disabled = true;
}else {
document.getElementById("mySelection").disabled = false;
}
}
OR CAN WE TRY AS
function mySecondFunction() {
var ddl = document.getElementById("1");
var selectedValue = ddl.options[ddl.selectedIndex].text;
if (selectedValue == "Default")
{
document.getElementById('mySelection').selectedIndex = 0;
document.getElementById("mySelection").disabled = true;
}else {
document.getElementById("mySelection").disabled = false;
}
}
DEMO2
Demo
UPDATE DEMO
You need to use value OptionZero and not the Label Default, and set the value back in "mySelection"
if (selectedValue == "OptionZero")
{
document.getElementById("mySelection").disabled = true;
// set the value to default
document.getElementById("mySelection").value = "OptionZero"
} else {
document.getElementById("mySelection").disabled = false;
}
You have mistake with the value, this is the answer:
function mySecondFunction() {
var ddl = document.getElementById("1");
var selectedValue = ddl.options[ddl.selectedIndex].value;
document.getElementById("mySelection").disabled = selectedValue === "OptionZero"?true:false;
}
Please go through the following code.
<html>
<head>
<script type="text/javascript">
function mySecondFunction() {
var ddl = document.getElementById("1");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == "OptionZero")
{
document.getElementById("mySelection").value="OptionZero";
document.getElementById("mySelection").disabled = true;
}else {
document.getElementById("mySelection").disabled = false;
}
}
</script>
</head>
<body>
<select id="1" onchange="mySecondFunction()">
<option value="OptionZero">Default</option>
<option value="OptionOne">Car</option>
<option value="OptionTwo">Car2</option>
<option value="OptionThree">Car23</option>
</select><br>
<select disabled id="mySelection">
<option value="OptionZero">Default</option>
<option value="OptionOne">A</option>
<option value="OptionTwo">B</option>
<option value="OptionThree">C</option>
</select>
</body>
</html>
Please change
selectedValue == "Default"
to
selectedValue == "OptionZero"
and add the following line in if condition
document.getElementById("mySelection").value="OptionZero";
Hope it will help you.Thank you.
Change your Script like this
function mySecondFunction() {
if (document.getElementById("1").value == "OptionZero")
{
document.getElementById("mySelection").value="OptionZero";
document.getElementById("mySelection").disabled = true;
}else {
document.getElementById("mySelection").disabled = false;
}
}
Here is Fiddle
This is the code, I'd like to show a hided input when I select the option "other", but it it doesn't work
<select id="transfer_reason" name="transfer_reason">
<option value="text">Text</option>
<option value="email">Email</option>
<option value="integer">Integer</option>
<option value="other">Other</option>
</select>
<input type="text" id="otherdetail" value="" style="display: none;" />
<script type="text/javascript">
window.onload = function() {
var eSelect = document.getElementById('transfer_reason');
var optOtherReason = document.getElementById('otherdetail');
eSelect.onchange = function() {
if(eSelect.options[selectedIndex].value == "other") {
optOtherReason.style.display = 'block';
}
else {
optOtherReason.style.display = 'none';
}
}
}
It work when using selectedIndex
if(eSelect.selectedIndex === 3) {
but I'd like to use the value of option
Just change this:
eSelect.options[selectedIndex].value
to this:
eSelect.options[eSelect.selectedIndex].value
Or as #CoreyRothwell said(and the best/right way):
eSelect.value
You're probably getting(in the console):
selectedIndex is not defined
It worked here.
change
eSelect.options[selectedIndex].value == "other"
to
eSelect.value == "other"
the value in the option tag is Other but you are comparing it with other you should change it like this:
window.onload = function () {
var eSelect = document.getElementById('transfer_reason');
var optOtherReason = document.getElementById('otherdetail');
eSelect.onchange = function () {
var selectedValue = eSelect.options[eSelect.selectedIndex].value;
//OR
selectedValue = eSelect.value;
//BUT the important point is using toLowerCase() like this
if (selectedValue.toLowerCase() == "other") {
optOtherReason.style.display = 'block';
} else {
optOtherReason.style.display = 'none';
}
}
}
Or just do this:
if (selectedValue.toLowerCase() == "Other") {//replace the "other" with "Other"
optOtherReason.style.display = 'block';
} else {
optOtherReason.style.display = 'none';
}
This is a piece of the code I'm working with and the only part giving me problems. I'm using the combo box to give me both the Line2_flag and the screencharge. Without this particular piece of code the form works fine so I know it's just this snippet. Any help is appreciated. Thanks!
<select name="inkcolors" size="1" id="inkcolors" class="FormStyle"
<option selected value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
var = Line2_flag;
var = screencharge;
if(form.inkcolors[1].selected){
Line2_flag = 1.75;
screencharge = 1;
}
if(form.inkcolors[2].selected){
Line2_flag = 2.25;
screencharge = 2;
}
if(form.inkcolors[3].selected){
Line2_flag = 2.75;
screencharge = 3;
}
you could try this method:
<html>
<form>
<select name="inkcolors" size="1" id="inkcolors" class="FormStyle"
<option selected value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
<script>
var Line2_flag = null;
var screencharge = null;
var field = document.forms[0].elements['inkcolors'];
var selected = field.options[field.selectedIndex].value;
if (selected === "1") {
Line2_flag = 1.75;
screencharge = 1;
} else if (selected === "2") {
Line2_flag = 2.25;
screencharge = 2;
} else if (selected === "3") {
Line2_flag = 2.75;
screencharge = 3;
}
</script>
</html>