We Keep Coding

How to sync slider value with form placeholder passthrough?

Pardon as I am a newbie coder. I have a slider that outputs a value as I drag it and display it with a span tag
<div class="slidecontainer">
<input type="range" min="0" max="10" value="5" class="slider1" id="myRange1">
</div>
<h4>Score: <span id="demo1"></span></h4>
<div class="login-box">
<form action="https://sheetdb.io/api/v1/69kvuydqzi9bu" method="post" id="sheetdb-form">
<div class="user-box">
<input type="text" placeholder="Enter name of panel" name="data[Panel]" required>
</div>
<div>
<input type="text" id="txtInput1">
</div>
<ul class="actions">
<li><button type="submit">Submit Score</button></li>
</ul>
</form>
</div>
which is linked to javascript code
var slider1 = document.getElementById("myRange1");
var output1 = document.getElementById("demo1");
var input1 = document.getElementById("txtInput1");
output1.innerText = slider1.value; // Display the default slider value
input1.value = slider1.value;
// Update the current slider value (each time you drag the slider handle)
slider1.addEventListener("input1", function() {
const slider1Value = this.value;
output1.innerText = input1Value;
input.value = slider1Value;
});
slider1.oninput = function() {
output1.innerHTML = this.value;
}
because I want to pass the output of the slider value to a form tag because I want to submit the value to a googlesheet using API
everything is working, however, whenever I drag the slider the value displayed on the form placeholder is not updating. I want to sync them and update in real-time. Is this possible? Am I missing anything obvious?
Please save me. Thanks!

There was couple of mistakes, mostly in the naming of the variables, but the most important one is was inside your eventListener.
As you can see, the first element inside () should be the type of the event, not the name of the variable. So I've put change (see more info here), instead of input1.
Other changes are mostly typing errors, as I've said.
var slider1 = document.getElementById("myRange1");
var output1 = document.getElementById("demo1");
var input1 = document.getElementById("txtInput1");
output1.innerText = slider1.value; // Display the default slider value
input1.value = slider1.value;
// Update the current slider value (each time you drag the slider handle)
slider1.addEventListener("change", function() {
const slider1Value = this.value;
output1.innerText = slider1Value;
input1.value = slider1Value;
});
slider1.oninput = function() {
output1.innerHTML = this.value;
}
<div class="slidecontainer">
<input type="range" min="0" max="10" value="5" class="slider1" id="myRange1">
</div>
<h4>Score: <span id="demo1"></span></h4>
<div class="login-box">
<form action="https://sheetdb.io/api/v1/69kvuydqzi9bu" method="post" id="sheetdb-form">
<div class="user-box">
<input type="text" placeholder="Enter name of panel" name="data[Panel]" required>
</div>
<div>
<input type="text" id="txtInput1">
</div>
<ul class="actions">
<li><button type="submit">Submit Score</button></li>
</ul>
</form>
</div>

Convert a checkbox value into a live url when checked

I am creating a form where the visitor chooses items they wish to see by clicking relevant checkboxes.
At this time I have the url's of the items as the value of the checkbox and these appear when clicking a Request button.
I would like the url that appears to be live (a href etc), so they just need to click on the link as opposed to copying and pasting into a browser address.
If possible I would like to have the checkbox value to be the item, which then converts to the url onClick. This is so that a right click will not show the url which will be in a separate java file.
This is not urgent, but eventually the results will be imported into a csv/excel file at the site as opposed to sending the results as an email.
Any help would be greatly appreciated.
function displayResult() {
var se = document.getElementById("myEmailList"),
send = document.getElementById("send"),
x = document.getElementById("mySelect"),
l = [],
list = x.querySelectorAll(":checked");
for (i = 0; i < list.length; i++) {
l.push(list[i].value);
var fn = document.getElementById('item_1').value;
document.getElementById('links').value = 'https://example.com';
var fn = document.getElementById('item_2').value;
document.getElementById('links').value = 'https://bbc.co.uk';
var fn = document.getElementById('item_3').value;
document.getElementById('links').value = 'https://google.com';
var fn = document.getElementById('item_4').value;
document.getElementById('links').value = 'https://itv.com';
}
send.href = "mailto:" + l.join(", <br>");
se.innerHTML = l.join(", <br>");
}
<form>
Select items required:
<fieldset id="mySelect">
<input type="checkbox" id="item_1" name="item_1" value="item_1">
Item 1 <br>
<input type="checkbox" id="item_2" name="item_2" value="item_2">
Item 2 <br>
<input type="checkbox" id="item_3" name="item_3" value="item_3">
Item 3 <br>
<input type="checkbox" id="item_4" name="item_4" value="item_4">
Item 4 <br>
</fieldset>
<button type="button" onClick="displayResult()">Request</button>
<a id="send" href="mailto:">Send email</a>
<div id="myEmailList">
<br><br>
<textarea id="links" style="width:300px; "type="text" rows="4"></textarea>

So, you want the form to send the user to the relevant places?
<form>Select your place:
<fieldset id="mySelect">
<input type="checkbox" value="https://www.bbc.co.uk">Item 1
<br>
<input type="checkbox" value="https://google.com">Item 2
<br>
<input type="checkbox" value="email3#domain.com">Item 3
<br>
<input type="checkbox" value="email4#domain.com">Item 4
<br>
</fieldset>
...
</form>

How can you show a radio button selection on a refreshed page

I am new to coding and I apologise if my English is bad. I have a group of radio buttons and when I clicked it, It shows my tables but filtered for the selection. So if maths is selected from the 3, only the records with maths will be shown then I can export or print this data. but the problem is that when I selection maths it unchecks the radio so the export button cant be pressed because there is no button selected.
Is there any way to keep the button selected?
I try to use localStorage.setItem("radio", value); but this did not work too
my html and script:
<div>
<input type="radio" name="download" id="1" value="/mathsrecord"/>Math <br />
<input type="radio" name="download" id="2" value="/englishrecord"/>English <br />
<input type="radio" name="download" id="2" value="/accountingrecord"/>Acc <br />
<input type="radio" name="download" id="3" value="/all"/>All <br />
</div>
<button type="button" class="btn btn-primary" id="download" value="download">Export to Excel</button>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$('input[type="radio"]').on('click', function() {
window.location = $(this).val();
localStorage.setItem("radio", value);
});
</script>
<script>
var radio_1 = document.getElementById('1');
var radio_2 = document.getElementById('2');
var radio_3 = document.getElementById('3');
var button = document.getElementById('download');
button.onclick = downloadFile;
function downloadFile() {
if(radio_1.checked) {
window.open("/exportmath/excel");
}else if(radio_2.checked) {
window.open("/exporteng/excel");
} else if(radio_3.checked) {
window.open("/exportacc/excel");
}
}</script>

You need to set the value back to radio button after reloading a page.
Like this
var itemValue = localStorage.getItem("radio");
if (itemValue !== null) {
$("input[value=\""+itemValue+"\"]").click();
}

showing the result of multiply two input value in a div called result

I just want to show the result in this div ,i tried to use nodeValue instead value and call the finalCalc fun in js file but it show nothing when i click on the button.
var billValue=document.getElementById("dollars").value,
peopleValue=document.getElementById("people").value,
theResult=document.getElementById("result"),
calculateButton=document.getElementById("calculateButton");
function calculateTip(x,y){
var reso=x*y;
theResult.innerHTML=reso;
}
function finalCalc() {
calculateTip(billValue,peopleValue);
}
<form>
<label>how much was your bill?</label>
<label for ="dollars">$</label>
<input value ="0" type="text" id="dollars" placeholder="Bill Amount ">
<br>
<label for="people">How many people are sharing the bill?</label>
<input value ="0" type="text" id="people">
<button type="button" id="calculateButton" onclick()="finalCalc()">CALCULATE</button>
<div id="result"></div>
</form>

onClick is written as onClick="" instead of onclick()="", reworked your code a little, hope this helps.
var billValue = document.getElementById("dollars").value,
peopleValue = document.getElementById("people").value,
theResult = document.getElementById("result"),
calculateButton = document.getElementById("calculateButton");
function calculateTip(x, y) {
return x * y;
}
function finalCalc() {
theResult.innerHTML = calculateTip(billValue, peopleValue);
}
<button type="button" id="calculateButton" onClick="finalCalc()">CALCULATE</button>

Javascript Radiobutton Group Validation

I would like your help to develop a javascript function to validate if one of the following radiobutton group (IDType) is selected and which value is checked and view error message in (ValidationError) division in case no radio button selected ??
<td>
<div>
<span>
<input type="radio" name="IDType" id="IDType" value="IDtype1"/>
ID Type 1
<input type="radio" name="IDType" id="IDType" value="IDtype2"/>
ID Type 2
</span>
<div id="ValidationError" name="ValidationError">
</div>
</div>
</td>
Thanks for your help.....

First of all, as said my collegues, you cannot have the same id ("IDType") for both your radio buttons.
Here is a solution with javascript only, without any jquery.
<html>
<head>
<script type="text/javascript">
function Validate() {
var radios = document.getElementsByName('IDType')
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
alert("Selected Value = " + radios[i].value);
return true; // checked
}
};
// not checked, show error
document.getElementById('ValidationError').innerHTML = 'Error!!!';
return false;
}
</script>
</head>
<body>
<form>
<div>
<span>
<input type="radio" name="IDType" value="IDtype1"/>
ID Type 1
<input type="radio" name="IDType" value="IDtype2"/>
ID Type 2
</span>
<div id="ValidationError" name="ValidationError">
</div>
</div>
<input type="submit" value="Submit" onclick="return Validate();" />
</form>
</body>
</html>

function validateRadioButtons(){
var radio = $('input:radio[name="IDType"]:checked');
if(radio.length == 0)//no buttons selected
{
$('ValidationError').text("you haven't selected any buttons!");
return;
}
$('ValidationError').text(radio.val()+' is selected');
}
ps: in order for this to work, you should consider using unique id's for dom elements. you cannot have the same id ("IDType") for both your radio buttons.