I have a modal that contains a dropdown list that can select multiple options, i've tried many methods but my javascript wont execute do what i need. When the button is clicked, i need the javascript to select a value from the options under the said dropdown list. It does not select anything.
//alert(response[i].daytype);
var daywhen = response[i].daytype.toString();
var trimmed = daywhen.split(',');
var length = trimmed.length;
//alert(trimmed[0]+trimmed.length);
document.getElementById(2).selected = "true";
document.getElementById(1).selected = "true";
for(x = 0;x<length;x++){
alert(trimmed[x]);
document.getElementById("1").selected = "true";
document.getElementById("esched").selectedIndex = 2;
<div class="col" id="escheduledropdown" style="display:none;"><label id="etypeofsched"></label><!-- list of week or months if not daily -->
<select id="esched" name="esched" class="form-control col selectpicker" data-style="btn-primary" multiple="multiple">
<!-- fill data using javascript -->
<option value="1" id="1">Monday</option>
<option value="2" id="2">Tuesday</option>
<option value="3" id="3">Wednesday</option>
<option value="4" id="4">Thursday</option>
<option value="5" id="5">Friday</option>
<option value="6" id="6">Saturday</option>
<option value="0" id="0">Sunday</option>
</select>
<input type="hidden" name="hiddenschedule2" id="hiddenschedule2" value="">
</div>
Note: The commented alerts are executed so i know the javascript is executed. it just wont read the elementbyid.
Related
I have a requirement where I need to pass two dates(DateFrom and DateTo) through the URL using <a href> which goes to another page where it shows the report of that dates.both the dates are in format yyyy-mm-dd.
below is the code I'm using.
here DateFrom and DateTo in the URL will be the dates that the user selects.
I have used radio buttons to select the columns to be generated in the report. user will choose either 1st set of columns or 2nd set of columns. and the chosen set of columns will be shown in the report.
After choosing from date, to date, and set of columns, the user will click on the generate report button which goes to the other page where it shows the report.
How shall I pass those two date values and radio button conditions for selecting columns.
the UI is in FTL(freemarker). I'm also attaching an image of the UI for better understanding.
there are two different URLs for two different sets of columns.
the URLs are
1st set of columns: http://localhost:9191/preview?__report=production_1.rptdesign&__format=pdf&DateFrom=2022-06-10&DateTo=2022-06-10
2nd set of columns: http://localhost:9191/preview?__report=production_2.rptdesign&__format=pdf&DateFrom=2022-06-10&DateTo=2022-06-10
if the user selects 1st set of columns one <a href> will be used and if the user selects 2nd set of columns another <a href> will be used. I haven't completed the coding part yet. how shall I achieve this in FTL?
<input type="date" id="quality-fromdate">
<input type="date" id="quality-toDate">
<input id="radiobutton1" type="radio" name="radio-button">
<div class="select-columns-options-1" id="select-columns-options1">
<option value="tasks">Product Name</option>
<option value="tasks">Order Id</option>
<option value="tasks">Quantity Ordered</option>
<option value="tasks">Quantity To Produce</option>
<option value="tasks">Due Date</option>
<option value="tasks">Estimated Completion Time</option>
</div>
<input id="radiobutton2" type="radio" name="radio-button">
<div class="select-columns-options-2">
<option value="tasks">Product Name</option>
<option value="tasks">Quantity Ordered</option>
<option value="tasks">Quantity To Produce</option>
</div>
Generate Report
I wouldn't use <a> here, since the url has to be generated dynamically. Here's an example using a button and figuring out the url when the button is clicked. If you absolutely have to use <a>, you'd probably have to bind into the change events of the dates and the radios and update the href of the <a> that way.
const btnclick = () => {
let radio = document.querySelector("input[type='radio']:checked").id === "radiobutton1" ? 1 : 2;
let from = document.querySelector("#quality-fromdate").value;
let to = document.querySelector("#quality-toDate").value;
console.log(`http://localhost:9191/preview?__report=production_${radio}.rptdesign&__format=pdf&DateFrom=${from}&DateTo=${to}`)
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
To: <input type="date" id="quality-fromdate"> From: <input type="date" id="quality-toDate">
<br/>
<input id="radiobutton1" type="radio" name="radio-button" checked>
<select class="select-columns-options-1" id="select-columns-options1">
<option value="tasks">Product Name</option>
<option value="tasks">Order Id</option>
<option value="tasks">Quantity Ordered</option>
<option value="tasks">Quantity To Produce</option>
<option value="tasks">Due Date</option>
<option value="tasks">Estimated Completion Time</option>
</select>
<br/>
<input id="radiobutton2" type="radio" name="radio-button">
<select class="select-columns-options-2">
<option value="tasks">Product Name</option>
<option value="tasks">Quantity Ordered</option>
<option value="tasks">Quantity To Produce</option>
</select>
<br/>
<button onclick="btnclick()">Generate Report</button>
You had quite a bit to go, here is working version using eventListener and URL object
I am not testing the dates
You also needed to be more consistent with IDs etc. I assume your link needed the two selects (they were divs in your code)
const url = new URL("http://localhost:9191/preview?__format=pdf")
const linkSpan = document.getElementById("link");
const dateFrom = document.getElementById("quality-fromDate")
const dateTo = document.getElementById("quality-toDate")
const reportType1 = document.getElementById("select-columns-options1");
const reportType2 = document.getElementById("select-columns-options2");
document.getElementById("reportDiv").addEventListener("click", function(e) {
linkSpan.innerHTML = "";
const reportRad = document.querySelector("[name=radio-button]:checked")
if (!reportRad) return;
if (reportType1.selectedIndex < 1 || reportType2.selectedIndex < 1) return; // nothing selected
url.searchParams.set("__report", reportRad.id === "radiobutton1" ? "production_1.rptdesign" : "production_2.rptdesign")
url.searchParams.set("__reportType1", reportType1.value);
url.searchParams.set("__reportType2", reportType2.value);
url.searchParams.set("DateFrom", dateFrom.value)
url.searchParams.set("DateTo", dateTo.value)
linkSpan.innerHTML = `${reportType1.options[reportType1.selectedIndex].text} - ${reportType2.options[reportType2.selectedIndex].text}`;
})
<div id="reportDiv">
<input type="date" id="quality-fromDate">
<input type="date" id="quality-toDate">
<input id="radiobutton1" type="radio" name="radio-button">
<select class="select-columns-options-1" id="select-columns-options1">
<option value="pname">Product Name</option>
<option value="oid">Order Id</option>
<option value="qo">Quantity Ordered</option>
<option value="qp">Quantity To Produce</option>
<option value="ddd">Due Date</option>
<option value="ect">Estimated Completion Time</option>
</select>
<input id="radiobutton2" type="radio" name="radio-button">
<select class="select-columns-options-2" id="select-columns-options2">
<option value="pname">Product Name</option>
<option value="qo">Quantity Ordered</option>
<option value="qtp">Quantity To Produce</option>
</select>
<span id="link"></span>
</div>
I am trying to read the state of a checkbox to see if it is checked. I will also be reading the options on a pull down menu in html and I also want to read the state of a toggle if it is clicked. I will be using a conditional to perform actions in javascript based upon these options.
Here is the code for the checkbox and pulldown menu:
checkbox html
<input type="checkbox" id="checkItem">Item 1
pulldown menu html
<form>
Select your favorite fruit:
<select id="mySelect">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
</select>
</form>
(I am not sure how to do the toggle)
So if I check the box and select an option from the pulldown menu, I want to
execute commands in javascript using a conditional.
What is the code to create the conditional that reads if the box is checked and reads the option selected from the pulldown menu?
I think jquery is needed to do this. How do I do this?
This answered most of my question. I have not figured out and tested the toggle however.
<html>
<div class="container">
<input type="checkbox" class="checks" value ="Apple">Apple<br>
<input type="checkbox" class="checks" value ="BananaValue">Banana<br>
<input type="checkbox" class="checks" value ="Carrot">Carrot<br>
<form>
Select your favorite fruit:
<select id="mySelect" /*onchange="run();"*/>
<option value="apple">apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
</select>
</form>
<input type="submit" onclick="run()" />
<script>
function run(){
var checks = document.getElementsByClassName('checks');
var str = '';
for (i = 0;i < 3; i++){
if(checks[i].checked === true){
str += checks[i].value + " ";
}
}
alert(str);
}
</script>
</div>
</html>
I am trying to get the title attribute from a selected Option in a Select menu. I have spent over a day on this and I am seeking help. I found a couple of ways to use the value attribute but now I need to use the title attribute somewhere else on the page.
Here is my current attempt although I have been through many iterations. I have listed two possible scripts although only one will eventually be used. The first possible script might include Jquery and if it does and it can be used here, can you translate it into Javascript, as I am not good at either? Do I have the elements in the correct order?
<select id="amount_id" onclick="function()">
<option value="" disabled="disabled">Amount</option>
<option value="0" title="None">0</option>
<option value="1" title="One Quarter">1/4</option>
<option value="2" title="One Half">1/2</option>
<option value="3" title="Three Quarters">3/4</option>
<option value="4" title="All">100%</option>
</select>
<textarea id="displayTitle"></textarea>
<script>
$(document).ready(function(){
$(document).on('click','#amount_id',function(){
var result = $("option:selected",this).attr('title');
$("#displayTitle").text(result);
});
});
</script>
OR
<script>
function run(){
document.getElementById("displayTitle").value =
document.getElementById("amount_id").value;}
</script>
Thank you.
Here is a JavaScript alternative of the first code :
<select id="amount_id">
<!-- removed onclick -->
<option value="" disabled>Amount</option>
<option value="0" title="None">0</option>
<option value="1" title="One Quarter">1/4</option>
<option value="2" title="One Half">1/2</option>
<option value="3" title="Three Quarters">3/4</option>
<option value="4" title="All">100%</option>
</select>
<textarea id="displayTitle"></textarea>
<script>
document.getElementById("amount_id").addEventListener('change',function(){
var eTitle = this.options[this.selectedIndex].getAttribute('title');
document.getElementById("displayTitle").value = eTitle;
});
</script>
I have these conditional drop lists behaving on screen as expected, but I cannot get the selected values from the drop downs to output in the HTML form (I can if I don't include the javascript). Only the text inputs are outputing as per the xml result below (Company & Add1). I want the xml to contain the Location from the first drop down, and the selected city from the conditional 2nd drop down.
<body>
<form action="http://TESTPLANETPRESS:8080/ObtainQuote" method="GET" >
<fieldset>
<legend>Location</legend>
<select id="country" class="source" onchange="updateSelectTarget()">
<option value="England">England</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
</select>
<select id="England">
<option value="Birmingham">Birmingham</option>
<option value="Liverpool">Liverpool</option>
<option value="London">London</option>
</select>
<select id="France" class="hidden">
<option value="Lyon">Lyon</option>
<option value="Marseille">Marseille</option>
<option value="Paris">Paris</option>
</select>
<select id="Germany" class="hidden">
<option value="Berlin">Berlin</option>
<option value="Hamburg">Hamburg</option>
<option value="Munich">Munich</option>
</select>
<label for="Company">Company:</label><input type="text" name="Company" value="Google">
<label for="Add1">Add1:</label><input type="text" name="Add1" value="1 Nowhere Street">
</fieldset>
<input type="submit" value="Submit">
</form>
<script>
function updateSelectTarget () {
var id = this.options[this.selectedIndex].value;
var targets = this.parentNode.getElementsByTagName("select");
var len = targets.length;
for (var i = len - 1; i > 0; --i) {
if (targets[i].id == id) {
targets[i].style.display = "block";
}
else {
targets[i].style.display = "none";
}
}
}
function initChangeHandler () {
var el = document.getElementById("country");
el.onchange = updateSelectTarget;
el.onchange();
}
window.onload = initChangeHandler;
</script>
</body>
Current XML result, (Does not include the results from the two drop downs).
<?xml version="1.0"?>
-<request type="GET">
<paths count="0"/>
-<values count="2">
<Company>Google</Company>
<Add1>1 Nowhere Street</Add1>
</values>
Do you want the value attribute or the text? Based on Get selected value in dropdown list using JavaScript? (similar to the first part), .value should work for the value attribute and .text for the text that is selected.
Also, please make two different questions instead of one question with 2 questions nested inside.
I have a sample site here.
In the bottom of the document, there's a section labeled 'Potential Gen Ed TOC'.
If you open the Accordion labeled Composition, you'll see dropdown menus on the right.
As you can see, in this JavaScript, it was based on whether or not a checkbox was activated. Then the 'Potential Gen Ed TOC' would display a number based on the assigned value.
$(function($) {
var sum = 0;
$('#CourseMenu :checkbox').click(function() {
sum = 0;
$('#CourseMenu :checkbox:checked').each(function(idx, elm) {
sum += parseInt(elm.value, 10);
});
$('#total_potential').html(sum);
});
});
As you continue to check boxes throughout the different courses, a sum would be displayed.
What' I'm trying to do now, is eliminate the checkbox trigger in the JS. I've replaced them with dropdown menus that say, "Credits - Select Credit".
Whenever someone selects a value, the "Potential Gen Ed TOC" slowly increases based on that value.
I would assume that all I have to do is assign value="Any Number" and the JavaScript would pick up on that.
In the JavaScript (above), I'm having trouble accounting for pulling these values from the dropdown menus. As you can see the JS is based on checked boxes.
Once I'm able to pull values from the dropdown menu, I want to have these values add up, but never display a number higher than 72, no matter how many total transfer credits are selected.
Does that make sense?
Edit: Here is some markup to understand where I'm trying to pull the values from (dropdown menu)...
<fieldset name = Comunication>
<legend>Transfer Course Information</legend>
<label for="School Int.">School Int.</label>
<input name="School Int." type="text" size="6" maxlength="6" />
<label for="ID">ID</label>
<input name="ID" type="text" id="ID" size="8" />
<label for="Name">Name</label>
<input name="Name" type="text" id="Name" size="25" />
<label for="Grade">Grade</label>
<input name="Grade" type="text" id="Grade" size="2" />
<label for="COM1"></label>
<form id="form2" name="form2" method="post" action="">
<label for="Credits">Credits</label>
<select name="Credits" id="Credits">
<option value="0">Select Credit</option>
<option value="0.67">1 QtrCr.</option>
<option value="1.33">2 QtrCr.</option>
<option value="2.00">3 QtrCr.</option>
<option value="2.67">4 QtrCr.</option>
<option value="3.33">5 QtrCr.</option>
<option value="4.00">6 QtrCr.</option>
<option value="4.67">7 QtrCr.</option>
<option value="5.33">8 QrtCr.</option>
<option value="6.00">9 QtrCr.</option>
<option value="6.67">10 QtrCr.</option>
<option value="1">1 SemCr.</option>
<option value="2">2 SemCr. </option>
<option value="3">3 SemCr.</option>
<option value="4">4 SemCr.</option>
<option value="5">5 SemCr.</option>
<option value="6">6 SemCr.</option>
<option value="7">7 SemCr. </option>
<option value="8">8 SemCr.</option>
<option value="9">9 SemCr.</option>
<option value="10">10 SemCr.</option>
</select>
</form>
Transferrable
<input name="COM105" type="checkbox" id="COM1" />
$('#total_potential').html(Math.min(sum,72));
Will display the sum up to 72 then just 72
Here's how you would do it with select inputs:
$(function($) {
$('#CourseMenu select').change(function() {
var sum = 0;
$('#CourseMenu select').each(function(idx, elm) {
sum += parseInt(elm.value, 10);
});
$('#total_potential').html(Math.min(sum,72));
});
});
Important note
You have some serious issues with your form HTML markup. You have repeating ids in some of your elements which represents invalid markup, id attributes must be unique in a page. Also some of your inputs have the same name, which mean only one value will be submitted with the form. You can use arrays in your inputs name to submit multiple values.
how about:
if (sum <= 72) {
$('#total_potential').html(sum);
} else {
$('#total_potential').html("72");
}