|
Thanks Richard, this is how the inputs and the dropdown are laid out but can be changed if it makes it easier to get to the result I need.  I have tried the code you have given me but still nothing in the dropdown. (All I get is level 1, level 2 etc)
<div class='payroll-container row p-5'>
<form action ="overheads5.html" method
= "get" name = "payrate" id =
"payrate"> Payrate
<br/>
Level 1
<input type = "text" name =
"level-1" id = "level-1" />
<br/>
Level 2
<input type = "text" name =
"level-2" id = "level-2" />
<br/>
Level 3
<input type = "text" name =
"level-3" id = "level-3" />
<br/>
Level 4
<input type = "text" name =
"level-4" id = "level-4" />
<br/>
Level 5
<input type = "text" name =
"level-5" id = "level-5" />
<br/>
Level 6
<input type = "text" name =
"level-6" id = "level-6" />
<br/>
<input type = "submit"/>
<div class='dropdown-container row p-4'>
<select>
<option class = 'dropdown'>level-1</option>
<option class = 'dropdown'>level-2</option>
<option class = 'dropdown'>level-3</option>
<option class = 'dropdown'>level-4</option>
<option class = 'dropdown'>level-5</option>
<option class = 'dropdown'>level-6</option>
</select></div>
|
|
|
|
|
Based on that markup and the querystring from your previous message, this should work:
const searchParams = new URLSearchParams(location.search);
for (const [key, value] of searchParams) {
let element = document.getElementById(key);
if (element) {
element.value = value;
}
else {
console.warn("Unknown element:", key, element);
}
}
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Thanks Richard,
I'm thinking it's probably me as the code below still gives me nothing. Assuming it should post to the dropdown I already have?
<script>
const searchParams = new URLSearchParams(location.search);
for (const [key, value] of searchParams) {
let element = document.getElementById(key);
if (element) {
element.value = value;
}
else {
console.warn("Unknown element:", key, element);
}
}
</script>
|
|
|
|
|
Ah, no, sorry. I thought you were trying to put the values into the text inputs.
Given a select list:
<div class='dropdown-container row p-4'>
<select>
<option class='dropdown'>level-1</option>
<option class='dropdown'>level-2</option>
<option class='dropdown'>level-3</option>
<option class='dropdown'>level-4</option>
<option class='dropdown'>level-5</option>
<option class='dropdown'>level-6</option>
</select>
</div> and the URL: overheads5.html?level-1=10&level-2=20&level-3=30&level-4=40&level-5=&level-6=
then something like this should work:
const searchParams = new URLSearchParams(location.search);
const elements = document.getElementsByClassName("dropdown");
let index = 0;
for (const [key, value] of searchParams) {
let element = elements[index];
element.text = value;
index++;
} Demo[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Richard, thankyou so much it, works. It shows as per the example 10,20,30 in the drop down.
I assume it would be difficult to show the level and value or just the level and the value somewhere else(hidden) so that the values can get used in the calculations?
I know I could do that in Excel but I'm still at the start of the learning curve here.
|
|
|
|
|
If you change element.text to element.value, the value won't be shown, but it will be what's used when the form is submitted.
Updated demo[^]
<option> - HTML: Hypertext Markup Language | MDN[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
modified 15-Jun-20 15:13pm.
|
|
|
|
|
Thanks Richard, I think I confused you there. Sorry.
So once the inputs are pulled from the 1st page to the 2nd and put into the dropdown I either need to call them somehow so as to use them in a calculation or just have them somewhere else so that when eg level 1 is selected (and showing) all the figures in my form would have £10 added to them (the maths part of that is what you have given me knowledge on before so I should get that once I get the numbers) Thanks again.
|
|
|
|
|
I messed up the updated demo link. If you set the value rather than the text, the value won't be shown, but you can access it for your calculations.
If you add an event listener for the "changed" event, you can update your calculations with the selected value:
Updated updated demo[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Can anyone point me in the right direction with this please?
I have these inputs and below a function to give me the hours open, except it doesn't. I've tried putting the function in online checkers and all is okay according to them but it doesn't calculate.
Thanks in advance.
<div class='col-sm-2 mb-2'>
<input type='text' id='opening-time' class='form-control' data-calc='openingTime' value='00.00' tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='closing-time' class='form-control' data-calc='closingTime' value='00.00' tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='hoursOpen' class='form-control form-output' data-calc='hoursOpen' value='00.00'readonly tabindex='-1'>
</div>
</div>
$(function(){
$("#closingTime").keyup(function(){
var openingTime = $("#openingTime").val();
var closingTime = $("#closingTime").val();
$("hoursOpen").html(closingTime-openingTime);
})
})
|
|
|
|
|
Your keyup call is not using the id of the HTML element. It should be:
$("#closing-time").keyup(function(){
|
|
|
|
|
Thanks for replying Richard. I have made the change you gave me but still not getting it to return a value. I'm still searching for my "lightbulb moment" with these functions.
|
|
|
|
|
Try adding a return statement (with an associated value) at the end of the function.
|
|
|
|
|
Thanks Richard,
not sure what I have done wrong here as still not giving a value for hours open.
$(function(){
$("#closing-time").keyup(function(){
var openingTime = $("#openingTime").val();
var closingTime = $("#closingTime").val();
$("hoursOpen").html(closingTime-openingTime);
return hoursOpen.html;
|
|
|
|
|
$("hoursOpen")
should probably be
$("#hoursOpen")
If you can read this, you don't have WingDings installed
|
|
|
|
|
Estys Thanks,
I think from other replies I am on the wrong track. 
|
|
|
|
|
You have not declared hoursOpen anywhere. And what about the previous statement, does that not set the value in the html? If so why are you trying to return a value?
|
|
|
|
|
Hi Richard, thanks.
I thought I had cobbled something together that would work from the lessons I saw and looking at other code. As I say there must be a lighbulb moment I am missing.
|
|
|
|
|
|
NB: If your users are entering hours and minutes, your calculation is going to be wrong.
For example, 09:45 to 10:15 should be 0.5 hours, but "10.15" - "09.45" will return 0.7000000000000011.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hi Richard, thanks for replying.
I noticed that when I was searching for answers to my initial problem, nothing is ever easy it seems.
The function I was trying to create would be used elsewhere but as yet I still can't get it to return a value.
|
|
|
|
|
Try something like this:
$(function(){
var parseMinutes = function(value){
var parts = value.split(/[.:]/g);
switch (parts.length) {
case 1: {
return parseFloat(parts[0]) * 60;
}
case 2: {
var hours = parseFloat(parts[0]);
var minutes = parseFloat(parts[1]);
return (hours * 60) + minutes;
}
default: {
return 0;
}
}
};
var formatMinutes = function(minutes){
var hours = Math.floor(minutes / 60);
minutes %= 60;
return hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0');
};
var updateHoursOpen = function(){
var openingTime = $("#opening-time").val();
var closingTime = $("#closing-time").val();
var openingMinutes = parseMinutes(openingTime);
var closingMinutes = parseMinutes(closingTime);
var minutesOpen = closingMinutes - openingMinutes;
if (minutesOpen < 0) {
minutesOpen += 1440;
}
var hoursOpen = formatMinutes(minutesOpen);
$("#hoursOpen").val(hoursOpen);
return hoursOpen;
};
$("#opening-time, #closing-time").keyup(updateHoursOpen);
});Demo[^]
NB: padStart doesn't work in Internet Explorer. But since even Microsoft agree that IE isn't a browser[^], it's usually safe to ignore it these days.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Richard, thankyou so much for that, weirdly I'm still not getting a value for hours open.
Sticking my head in the oven is starting to look appealing. 
|
|
|
|
|
Richard, my apologies. It has oft been said "there are none so blind as them that cannot see"
Your code does work, I just wasn't looking at it correctly. 
Is there a way I can make it work for each day from the same code or would it need that code for each day?
Thanks for your help so far.
|
|
|
|
|
I'm not sure what you mean by "each day"? Do you mean you have multiple sets of inputs for opening time, closing time, and hours?
You can't use the same ID for multiple elements in the same HTML document. You'll need to find a different way of identifying the elements, and linking the three <input> elements for a given day together. For example, you could use the class attribute:
<div class="opening-day">
<p>Monday</p>
<p>
<label>
Opening:
<input type='text' class='opening-time' value='00:00'>
</label>
</p>
<p>
<label>
Closing:
<input type='text' class='closing-time' value='00:00'>
</label>
</p>
<p>
Result:
<input type='text' class='hours-open' value='00:00' readonly>
</p>
</div>
var updateHoursOpen = function($div){
var openingTime = $div.find(".opening-time").val();
var closingTime = $div.find(".closing-time").val();
var openingMinutes = parseMinutes(openingTime);
var closingMinutes = parseMinutes(closingTime);
var minutesOpen = closingMinutes - openingMinutes;
if (minutesOpen < 0) {
minutesOpen += 1440;
}
var hoursOpen = formatMinutes(minutesOpen);
$div.find(".hours-open").val(hoursOpen);
return hoursOpen;
};
$(".opening-day").on("keyup", ".openingtime, .closing-time", function(){
var $div = $(this).closest(".opening-day");
updateHoursOpen($div);
}); Demo[^]
.find() | jQuery API Documentation[^]
.closest() | jQuery API Documentation[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hi Richard, thanks so much.
Yes basically the page has all 7 days, a check box if open that day and input boxes for opening and closing hours and the hours open.
I will use the code above. thankyou.
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
