Develop Reference

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>

Show options from select when match

I’m struggling to show some options when u type a match and others if you don’t. I'm new in coding in general.
I just cant make it work how I want.
test html:
<input class="form-control input-lg email" type="email"
name="useremail[]" required />
<select class="form-control" name="youchoose[]" required>
<option value=""></option>
<optgroup class="groupa" label="Group A">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</optgroup>
<optgroup class="groupb" label="Group B">
<option value="option4">option4</option>
<option value="option4">option5</option>
</optgroup></select>
<br><br>
<hr>
<br>
<input class="form-control input-lg email" type="email"
name="useremail[]" required />
<select class="form-control" name="youchoose[]" required>
<option value=""></option>
<optgroup class="groupa" label="Group A">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</optgroup>
<optgroup class="groupb" label="Group B">
<option value="option4">option4</option>
<option value="option4">option5</option>
</optgroup></select>
the js:
$('.email').on("input", function(){
$("optgroup.groupa").toggle(/hotmail/ig.test(this.value) )
var _this = $(this);
if ( _this.val() == 0 )
$('optgroup.groupa').show();
else {
$('optgroup.groupb').hide();
$('optgroup.' + _this.val()).show();
}
});
How is this working? I'm to noob.
How can I avoid when you input in input1, input2 changes also? I’m going to have lots of inputs since I add them dynamically and you can have 1 row or tons of rows.
How do I keep select hidden until match/or not match is inputted? I don’t want to show options since u can pick them before you input something in the box.
Thanks

How can I avoid when you input in input1, input2 changes also? I’m
going to have lots of inputs since I add them dynamically and you can
have 1 row or tons of rows.
Your code didn't produce this issue, but both of your inputs are identical which is likely related to your question here. Give your second input different attributes to distinguish it from the first.
<input class="input2" type="text" name="input2" required />
How do I keep select hidden until match/or not match is inputted? I
don’t want to show options since u can pick them before you input
something in the box.
The solution below should provide the logic you need. It's a pretty odd use case, but you're describing displaying or toggling a group of options based on matching user input.
jQuery .on() is an event handler. Get the user input by accessing event.target.value inside the handler and conditionally show or hide what you need.
Run the below code and type "Group A" into the input. Then, you'll see the options for group A appear in the select list. When the input no longer matches, those options are hidden again. I've checked the user input against the group label here to illustrate. You can adjust the logic and what elements to target as needed.
<input
class="form-control input-lg email"
type="email"
name="useremail[]"
required
/>
<select class="form-control options" name="youchoose[]" required>
<option value=""></option>
<optgroup hidden class="groupa" label="Group A">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</optgroup>
<optgroup hidden class="groupb" label="Group B">
<option value="option4">option4</option>
<option value="option4">option5</option>
</optgroup>
</select>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script>
$('.email').on('input', function (event) {
$('optgroup').each(function () {
console.log(event.target.value);
if (this.label === event.target.value) {
console.log('match');
$(this).removeAttr('hidden');
} else {
$(this).attr('hidden', true);
}
});
});
</script>

How to apply different section to a radio button

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

How do I show option title from select menu in another spot

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>

Disable/enable text field and list box as per value selected in list box

Disable/enable text field and list box as per user selected value from parent list box.
Condition:
if user don't know programming then list box and text box must disable.
However it is not working, I know I am missing something.only Javascript please
function check()
{
//if(document.drop_list.choice[1].checked){
if(document.getElementById("mt").value === 'N'){
document.getElementById("no").disabled=true;
document.getElementById("txt").disabled=true;
}else{
document.getElementById("no").disabled=false;
document.getElementById("txt").disabled=false;
}
}
<form name="drop_list" action="listbox-validation-demock.php" method="post" id='f1'>
Do you want to learn Web programming languages ?
<select name="Category" id="mt" onChnage="check()">
<option value='Y'>Y</option>
<option value="N">N</option>
</select>
<br /><br />
<select name="Category" id="no">
<option value=''>Select One</option>
<option value="PHP">PHP</option>
<option value="ASP">ASP</option>
<option value="JavaScript">JavaScript</option>
<option value="HTML with design">HTML</option>
<option value="Perl">Perl</option><option value="MySQL">MySQL</option></select>
<br /><br />
Age<input type="text" size="20" id="txt">
</form>

It should have been :
<select name="Category" id="mt" onChange="check()">

Your script works, the only problem is a typo:
<select name="Category" id="mt" onChnage="check()">
-----------------------------------^^^-------------