How to apply different section to a radio button - javascript

I have this project for school, to show different drop-down option for each selected radio button. I tried few JavaScript code but it wasn't working at all.
I need when clicked on Sizes radio button to show the correspondent sizes drop-down selectors.
As well for the colors. To show only colors drop-down selectors
Thank you in advance for the help.
Bellow is the code
<form>
<fieldset>
<p>
<input type = "radio"
name = "sizes"
id = "sizes"
value = ""
checked = "checked">
<label for = "sizes"> Sizes </label>
<input type = "radio"
name = "colors"
id = "colors"
value = "">
<label for = "colors"> Colors </label>
</p>
</fieldset>
</form>
<label for="small-size"> Small Size </label>
<select name="size" id="size">
<option value="1" selected> Size 1 </option>
<option value="2"> Size 2 </option>
<option value="3"> Size 3 </option>
</select>
<label for="big-size"> Big Size </label>
<select name="size" id="size">
<option value="1" selected> Size 1 </option>
<option value="2"> Size 2 </option>
<option value="3"> Size 3 </option>
</select>
<label for="dark"> Dark Colors </label>
<select name="canvas" id="canvas">
<option value="1" selected> Color 1</option>
<option value="2"> Color 2 </option>
<option value="3"> Color 3 </option>
</select>
<label for="light"> Light Colors </label>
<select name="canvas" id="canvas">
<option value="1" selected> Color 1</option>
<option value="2"> Color 2 </option>
<option value="3"> Color 3 </option>
</select>
https://jsfiddle.net/Farsoun/dw813ky2/9/

You should really show at least an attempt of some sort when posting something like this, especially with the JavaScript tag.
Anyways, to do this you would want to listen to when a user clicks on a radio button and show/hide the corresponding elements.
Here's a sample:
document.getElementById('colors').addEventListener("click", function(e){
document.getElementById("colors-selections").style.display = "block";
document.getElementById("size-selections").style.display = "none";
});
If you have more than two elements in the future, I'd recommend using an onchange so you can hide it once it's untoggled rather than hiding everything else everytime a new radio button is clicked.
If you want to use just CSS you're going to have to used the :checked attribute and hide or display another element also:
Other users already have asked about this, ex:
https://stackoverflow.com/a/50921066/4107932

Related

How to pass two user input dates through url

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>

Don't display number greater than 72

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");
}

Hide select box in IE?

I am trying to hide a drop-down using JavaScript. The following code I have gotten to work in Firefox and Chrome but testing in IE 8 it does not work.
<select name="month" id="month" onchange="monthselector_changed(this)">
<option value="1">
Jan</option>
<option value="2">
Feb</option>
<option value="3">
Mar</option>
<option value="4">
Apr</option>
<option value="5">
May</option>
<option value="6">
Jun</option>
<option value="7">
Jul</option>
<option value="8">
Aug</option>
<option value="9">
Sep</option>
<option value="10">
Oct</option>
<option selected value="11">
Nov</option>
<option value="12">
Dec</option>
</select>
I then hide it using the following code
document.getElementById("month").style.display = 'none';
Just for clarfication I am trying to hide then entire select box not an option.
$ is invalid in an ID field, so that's probably messing up IE while other browers are being more "relaxed" about the rule.
See this thread for details:
What characters are allowed in DOM IDs?
Edit: I see you're passing in this to a function call. You can use this to do the toggling without an ID. For example:
http://jsbin.com/acisof/1/edit
function monthselector_changed(elem)
{
elem.style.display = 'none';
}

Select Box option keep changing

<Select id="amount" onchange="document.formName.submit(); updateCost();">
<option id="0" value = "0"> Select amount ... </option>
<option id="1" value = "2000"> $2000 </option>
<option id="2" value = "3000"> $3000 </option>
<option id="3" value = "4000"> $4000 </option>
<option id="4" value = "5000"> $5000 </option>
</Select>
<Select id="duration" onchange="document.formName.submit(); updateCost();">
<option id="1" value="2 years"> 2 years </option>
<option id="2" value="6 years"> 6 years </option>
<option id="3" value="Lifetime"> Lifetime </option>
</Select>
function updateCost() {
var rate = 0;
if(document.formName.plan[p].checked) {
if(value('coverageUser').indexOf('Enrolled') > -1){
rate = getRate();
}
payCycle = 1;
document.formName.cost.value = formatCurr((rate) * payCycle);
}
}
I have these two select boxes and when I choose an option from first, cost is getting updated correctly. But after selecting amount, I am supposed to select duration from second selectbox where default value is 2 years. But when I change the value to 6 years, cost is updated , but the select box option does not remain to 6 years, but changes back to 2 years. How do I keep the option I selected in second select box and also update the cost correctly?
The select boxes don't keep their state because of the submit you're doing at onchange().
It will cause page reload on every change. Try remove it from both select's.
Besides that, you're using id in a wrong way: you can't have the same id twice in a same page. Try something like this:
<option value="1"> 2 years </option>
<option value="2"> 6 years </option>
<option value="3"> Lifetime </option>
When you return the page after a form submit:
Mark the user's selected options with the selected attribute:
<select id="duration">
<option value="2 years"> 2 years </option>
<option value="6 years" selected> 6 years </option>
<option value="Lifetime"> Lifetime </option>
</select>
Call updateCost() on page load:
window.onload = updateCost;
Or add it to your window.onload function if you already have one:
window.onload = function() {
...
updateCost();
};

Option list within select hiding and displaying

I have 2 drop downs, I would like to know whether there is a possibility to display and hide some of the options in second drop down based on value selected in first dropdown.
<script language="JavaScript">
function funchk(){
document.getElementById('z').style.display="block";
}
</script>
<select name="first" onchange="funchk();">
<option name="asw" value="a">sda</option>
<option name="sd" value="sd">ZZ</option>
<option name="rdf" value="afe">fe</option>
<option name="bfe" value="bfe">fe3</option>
</select> <?php echo "<br/>" ?>
<select name="second">
<option name="a" value="a">aa</option>
<option name="z" value="a" style="display:none">ZZ</option>
<option name="r" value="a" style="display:none">aa</option>
<option name="b" value="b">bb</option>
</select>
Here i would like to display the 'z' option in 2nd dropdown to be displayed when onchging value of first dropdown.
No, you can't rely on setting the CSS to show/hide <option> elements.
You'll need to remove them, or just simply disable/enable them.
function funchk() {
document.getElementsByName('z')[0].disabled = false;
}
<select name="second">
<option name="a" value="a">aa</option>
<option name="z" value="a" disabled="disabled">ZZ</option>
<option name="r" value="a" disabled="disabled">aa</option>
<option name="b" value="b">bb</option>
</select>
you have to do that with javascript
here you can find different examples how to do that.
http://www.satya-weblog.com/2008/08/javascript-remove-delete-select-option.html
http://www.plus2net.com/javascript_tutorial/list-remove.php
Make use of Document Object Model(DOM) along with Javascript Events to manipulate HTML nodes.

Categories

Resources