radio button switches upon submission - javascript

So when I select the radio button labeled black and click the add button to display the value, the radio button labeled red get selected and that value is displayed. Heres my code:
function add() {
var total;
if (document.getElementById("btn").checked = true) {
total = 0
} else if (document.getElementById("2ndbtn").checked = true) {
total = 1;
} else {
total = 0
};
document.getElementById("show").innerHTML = total;
}
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
<h5>what color is the car?</h5>
<input type="radio" name="q1" value="0" id="btn" /> red
<input type="radio" name="q1" value="0" id="2ndbtn" /> black
<button type="button" onclick="add();">add</button>
<p id="show"></p>
<script src="questions.js"></script>
</body>
</html>

When you do this in your code:
if(document.getElementById("btn").checked = true){
total = 0
}else if(document.getElementById("2ndbtn").checked = true){
total = 1;
}else{total = 0};
You are actually setting the checked value to true, and not checking if it is true. Therefore you will have to change it to this:
if(document.getElementById("btn").checked){
total = 0
}else if(document.getElementById("2ndbtn").checked){
total = 1;
}else{total = 0};
Then it should work.

Related

Multiply output by inputs

I'm trying to create a list based off of 2 input fields. The first input will be a name and the second an integer.
What I'm trying to achieve is having the name displayed multiplied by the amount of the input integer. I have got the name to display based off the input, but have been unable to have it displayed multiple times based on the input integer.
Here's an example image of what I'm looking to achieve
<html>
<head>
<style>
input {
display: block;
}
#msgs {
margin-bottom: 24px;
}
</style>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<input type="text" value="Michael" id="name" />
<input type="text" value="5" id="count" />
<input type="button" value="add to list" id="add" />
<div id="list"> </div>
</body>
<script>
document.getElementById("add").onclick = function() {
var text = document.getElementById("name").value;
var div = document.createElement("div");
div.textContent = text;
document.getElementById("list").appendChild(div);
document.getElementById("name").value = ""; // clear the value
}
</script>
</html>
Fiddle: https://jsfiddle.net/grnct2yz/
<html>
<head>
<style>
input {
display: block;
}
#msgs {
margin-bottom: 24px;
}
</style>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<input type="text" value="Michael" id="name" />
<input type="number" value="5" id="count" />
<input type="button" value="add to list" id="add" />
<div id="list"> </div>
</body>
<script>
document.getElementById("add").onclick = function() {
var text = document.getElementById("name").value;
for(let i = 0; i < document.getElementById("count").value; i++) {
var div = document.createElement("div");
div.textContent = text;
document.getElementById("list").appendChild(div);
}
document.getElementById("name").value = ""; // clear the value
}
</script>
</html>
I have added a loop and changed the input type to number so we are sure that it's going to insert a number in the loop. Is this what you wanted?
What the code I added does is cycling a number of times equal to the number inputted and then executing the code you wrote.
for loops work this way:
you set an initial statement that is executed at the beginning of the loop, only once (let i = 0 sets a new iterable variable i),
then you set a condition that is checked before every iteration of the loop to make it run (i < document.getElementById("count").value checks that it executes up to and not more than X times, where X is the number inputted),
then you set an operation to be executed at the end of each loop (i++ increments the value of i by one).
Here is another way of doing it:
const name=document.getElementById("name"),
count=document.getElementById("count"),
list=document.getElementById("list");
document.getElementById("add").onclick = function() {
list.insertAdjacentHTML("beforeend",[...Array(+count.value)].map(s=>`<div>${name.value}</div>`).join(""))
name.value = ""; // clear the value
}
<input type="text" value="Michael" id="name" /><br>
<input type="text" value="5" id="count" /><br>
<input type="button" value="add to list" id="add" />
<div id="list"> </div>
Just your Improved code based on your needs we can achieve this in many ways.
<html>
<head>
<style>
input {
display: block;
}
#msgs {
margin-bottom: 24px;
}
</style>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<input type="text" value="Michael" id="name" />
<input type="text" value="5" id="count" />
<input type="button" value="add to list" id="add" />
<div id="list"> </div>
<script>
document.getElementById("add").onclick = function() {
var text = document.getElementById("name").value;
var count = document.getElementById("count").value;
if (parseInt(count) != 'NaN') {
var list = document.getElementById("list");
while (list.firstChild) {
list.removeChild(list.firstChild);
}
count = parseInt(count);
for (var i = 0; i < count; i++) {
var div = document.createElement("div");
div.textContent = text;
document.getElementById("list").appendChild(div);
}
}
}
</script>
</body>
</html>

How to call function when input value changes?

I have tried to find a way to call a function when the value of the input changes, but so far I haven't found anything. All of the things I have tried seemed to work but didn't.
Html:
var funds = 500;
document.getElementById("submit").onclick = function() {
}
function AP() {
if (document.getElementById("p").checked) {
document.getElementById("AP").innerHTML = "%";
} else {
document.getElementById("AP").innerHTML = "";
}
}
//right here I'd like the function to call.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rng Crypto</title>
</head>
<body>
<header>
<h1>Crypto ran from randomness!</h1>
</header>
<div>
<input type="radio" name="AP" id="a" onchange="AP()" checked>Absolute<input type="radio" name="AP" id="p" onchange="AP()">Percent<br>
<input type="number" id="input" HERE TO ADD THINGY>
<p id="AP" style="display:inline;"></p><br>
<button id="submit">Submit</button>
</div>
<script src="RngCrypto.js"></script>
</body>
</html>
The things that I have tried are:
<input type="number" id="input" onchange="input()">
<input type="number" id="input" oninput="input()">
<input type="number" id="input" onkeyup="input()">
document.getElementById("input").onchange=input();
document.getElementById("input").oninput=input();
const inputEle = document.querySelector("#input");
inputEle.addEventListener('input', function(e) {
console.log(e.target.value);
})
<input type="text" id="input">
Have you tried adding the 'change' event on the input element.
Edit: adding 'input' eventListener, is one more way to achieve this result.
(refer following code)
var funds = 500;
document.getElementById("submit").onclick = function() {
}
function AP() {
if (document.getElementById("p").checked) {
document.getElementById("AP").innerHTML = "%";
} else {
document.getElementById("AP").innerHTML = "";
}
}
//right here I'd like the function to call.
document.queryselector("#input").addEventlistener('change', function(e) {
console.log(e.target.value;)
})
When I got you right this is basically what you are looking for:
<input class="js-radio-button" type="radio" name="ab" value="absolute"> Absolute<br>
<input class="js-radio-button" type="radio" name="ab" value="percent"> Percent<br>
<button class="js-check-selection">CHECK</button>
<div>
<span>Result is:</span> <span id="result"></span>
</div>
in your javascript you have:
function checkSelectedRadio() {
// get your radios having the name 'ab'
const radios = document.querySelectorAll('input[type=radio][name=ab]');
// reset result container
document.getElementById('result').innerHTML = '';
// loop through the radios
for (let i = 0; i < radios.length; i += 1) {
// check for each radio if it was selected
if (radios[i].checked) {
// set the value of the selected radio to your result container
document.getElementById('result').innerHTML = `Value: ${radios[i].value}`;
// if you need more logic:
if (radios[i].value === 'absolute') {
// do something here if 'absolute' was checked
} else if (radios[i].value === 'percent') {
// do something here if 'percent' was checked
}
}
}
}
// get your button to check radio status like this or fire the function above by your onchange handler
const checkButton = document.querySelector('.js-check-selection');
checkButton.addEventListener('click', checkSelectedRadio);
EDIT after reading your comment:
To detect change of your input field it works like this:
<input type="number" id="input" value="1">
In your JS:
const field = document.querySelector('#input');
function inputCheck() {
console.log('input changed');
// or do something else
}
field.addEventListener('change', inputCheck);

How to create 3 links to define and one to erase

The document added another 3 link given in such a way that three links define three fruit and the fourth to erase selections
How do I do that?
<html>
<head>
<script language="javascript">
<!--
function FruitBox() {
window.document.myform.fruit[].checked = true;
}
function clearall() {
for (var p = 1; p < 3; p++) {
var x = window.document.myform.fruit("value");
for (var i = 0; i < 4; i++)
x[i].checked = false;
}
}
//-->
</script>
</head>
<body>
<from name="myform">
<input type="radio" name="fruit" onclick="window.document.myform.fruit.value='oranges'">oranges & Tangerines <br>
<input type="radio" name="fruit" onclick="window.document.myform.fruit.value='bananas'">bananas <br>
<input type="radio" name="fruit" onclick="window.document.myform.fruit.value='peaches'">peaches,Nectarines & Palmus <br> To select Oranges click here
<input type="reset" Value="Sterge" onClick=" clearall()" />
</from>
</body>
</html>
You misspelled tag form
you need to pass something to the function
you need to access that something
the reset will reset the form. No need to call a function
since you use form access there is no need to address the form from the top of the document but there is ALSO no need to set the value of the fruit on click
if you give each radio an ID, you can have a <label for="oranges">Click here to select oranges</label> instead of a link
<html>
<head>
<script language="javascript">
function FruitBox(idx) {
window.document.myform.fruit[idx].checked = true;
return false; // cancel the link - preventDefault can be used too
}
/* NOT needed
function clearall() {
for (var p = 1; p < 3; p++) {
var x = window.document.myform.fruit("value");
for (var i = 0; i < 4; i++)
x[i].checked = false;
}
}
*/
</script>
</head>
<body>
<form name="myform">
<input type="radio" name="fruit">oranges & Tangerines <br>
<input type="radio" name="fruit">bananas <br>
<input type="radio" name="fruit">peaches,Nectarines & Palmus <br>
To select Oranges click here
<input type="reset" Value="Sterge" />
</from>
</body>
</html>

Change div content by clicking a word/link with Javascript

I am basically trying to have a word (page 2) be clickable and act as a link to display different div content. When they select option 2, then click the next button, they should be able to click "Page 2" test and cause that to display the id="test1" (Choice 1, Page 1) content. I have tried a few variables but haven't been able to get any to work. The best I could do is get it to take you back to the choice options, but I'd like to eliminate any users error and just go straight to the first page of the choice they should have made.
Any help would be grateful. And sorry, JQuery is not an option.
<!DOCTYPE html>
<html>
<center>
<head>
<title>Test2</title>
<script>
function formReset()
{
document.getElementById("home").innerHTML ="";
document.getElementById("main").style.display = 'block';
document.getElementById("1").checked = false;
document.getElementById("2").checked = false;
}
function nextPage()
{
if (document.getElementById("1").checked == true){
document.getElementById("home").innerHTML = document.getElementById("test1").innerHTML;
document.getElementById("main").style.display = 'none';
}
else
if (document.getElementById("2").checked == true){
document.getElementById("home").innerHTML = document.getElementById("test2").innerHTML;
document.getElementById("main").style.display = 'none';
}
return true;
}
function otherPage()
{
switch (document.getElementById('home').innerHTML)
{
case document.getElementById("test2").innerHTML:
(document.getElementById("home").innerHTML = document.getElementById("choice2_page2").innerHTML)
break;
}
}
</script>
</head>
<body>
<h1>This is a test of the radio buttons</h1>
<br />
<div>
<form>
<div id="home"></div>
<div id="main">
<input type="radio" name="grp1" id="1">1<br>
<input type="radio" name="grp1" id="2">2<br>
<br />
<input type="button" name="button" value="Next" onClick="nextPage()">
</div>
</form>
</div>
<div name="test1" id="test1" style="display:none"><!-- Display this content -->
<h2>Choice 1<br>Page 1</h2>
<input type="button" value="Reset" id="reset_form" onClick="formReset()">
</div>
<div name="test2" id="test2" style="display:none">
<h2>Choice 2<br>Page 1</h2>
<input type="button" value="Next" id="page_choice" onclick="otherPage()">
<input type="button" value="Reset" id="reset_form" onClick="formReset()">
</div>
<div name="choice2_page2" id="choice2_page2" style="display:none">
<h2>You should have chose<br><b>Choice 1</b></h2><!-- When clicked, this "Choice 1" should display the contents of id="test1" (Choice 1, Page 1)-->
<input type="button" value="Reset" id="reset_form" onClick="formReset()">
</div>
</body>
</center>
</html>
Okay, I think this is what you want, it may be a bit big, but it's a full solution for your problem, I guess. Mainly, you have some pages, the user may choose, which page to see first, but then you force the user to see all next pages one by one till the end. At least, it's what I did here.
You may add as much text pieces (pages) as you like in textContent array, just check that you have a corresponding number of radio buttons.
<html>
<head></head>
<body>
<div id="mainDiv" style="text-align: center">
<div id="textDiv"></div>
<div id="radioDiv">
<input type="radio" id="rad1" name="radGrp"><label for="rad1">1</label><br>
<input type="radio" id="rad2" name="radGrp"><label for="rad2">2</label><br>
<input type="radio" id="rad3" name="radGrp"><label for="rad3">3</label><br>
<input type="radio" id="rad4" name="radGrp"><label for="rad4">4</label><br>
<input type="radio" id="rad5" name="radGrp"><label for="rad5">5</label><br>
</div>
<div id="btnDiv">
<input type="button" id="btn" value="show"><br>
</div>
</div>
<script type="text/javascript">
/*here we push the onclick attribute in js, so the code is unobtrusive*/
document.getElementById("btn").onclick = function(){formContent();};
var radios = document.getElementsByName("radGrp"),
idCurrent = 0,
firstRun = true,
textContent = [
"<h3>option 1</h3><p>here is the text of option 1 :(</p>",
"<h3>option 2</h3><p>here is the text of option 2 :)</p>",
"<h3>option 3</h3><p>here is the text of option 3!</p>",
"<h3>option 4</h3><p>here is the text of option 4 :-D</p>",
"<h3>option 5</h3><p>here is the text of option 5 :-P</p>"
];
function hideDivs(){
document.getElementById("textDiv").style.display = "block";
document.getElementById("radioDiv").style.display = "none";
document.getElementById("btn").value = "next";
firstRun = false;
}
function restoreDivs(){
idCurrent=0;
document.getElementById("textDiv").style.display = "none";
document.getElementById("radioDiv").style.display = "block";
document.getElementById("btn").value = "show";
firstRun = true;
}
/*function to find the id of a checked radio from the group*/
function findChecked(){
for (var i=0; i<radios.length; i++) {
if (radios[i].checked) idCurrent = radios[i].id;
}
/*since the id is in text, we cut the first part and leave*/
/*just the number*/
idCurrent = parseInt(idCurrent.slice(3));
}
/*actual function*/
function formContent(){
if (idCurrent == 0) findChecked();
if (firstRun) {
hideDivs();
}
/*pushing into textDiv values from textContent array, which*/
/*is your pages content*/
document.getElementById("textDiv").innerHTML = textContent[idCurrent - 1];
if (idCurrent<radios.length) {
idCurrent++;
/*changing the button value if the current piece of text*/
/*is the last one*/
} else if (idCurrent == radios.length) {
idCurrent++;
document.getElementById("btn").value = "finish!";
/*if there is no more text, we just restore everything to*/
/*the initial state*/
} else {
restoreDivs();
idCurrent = 0;
}
}
</script>
</body>
</html>
I think this is what you may be looking for
function showPage(id)
{
document.getElementById(id).style.display = 'block';
}
Choice 1
Ok, so here I've added consequent steps, that can be split into some categories (here: 3), if you select a step from some category, you will just read it. Hope that helps ;)
<html>
<head></head>
<body>
<div id="mainDiv" style="text-align: center">
<div id="textDiv"></div>
<div id="radioDiv">
<input type="radio" id="rad1" name="radGrp"><label for="rad1">1. reinstall os (step 1)</label><br>
<input type="radio" id="rad2" name="radGrp"><label for="rad2">2. reinstall os (step 2)</label><br>
<input type="radio" id="rad3" name="radGrp"><label for="rad3">3. reinstall os (step 3)</label><br>
<input type="radio" id="rad4" name="radGrp"><label for="rad4">4. reinstall os (step 4)</label><br>
<input type="radio" id="rad5" name="radGrp"><label for="rad5">5. watering a plant (step 1)</label><br>
<input type="radio" id="rad6" name="radGrp"><label for="rad6">6. watering a plant (step 2)</label><br>
<input type="radio" id="rad7" name="radGrp"><label for="rad7">7. reading alphabet (step 1)</label><br>
<input type="radio" id="rad8" name="radGrp"><label for="rad8">8. reading alphabet (step 2)</label><br>
<input type="radio" id="rad9" name="radGrp"><label for="rad9">9. reading alphabet (step 3)</label><br>
<input type="radio" id="rad10" name="radGrp"><label for="rad10">10. reading alphabet (step 4)</label><br>
</div>
<div id="btnDiv">
<input type="button" id="btn" value="show"><br>
</div>
</div>
<script type="text/javascript">
document.getElementById("btn").onclick = function(){formContent();};
var radios = document.getElementsByName("radGrp"),
idCurrent = 0,
planCurrent,
firstRun = true,
instructions = [
[0,1,2,3], /* your instruction plans */
[4,5], /* this is the second plan (with index = 1) and it has steps 5 and 6 */
[6,7,8,9] /* this is the third plan (with index = 2) and it has steps 7, 9, 9 and 10 */
],
textContent = [
"<h3>reinstall os (step 1)</h3><p>download .iso from torrent</p>",
"<h3>reinstall os (step 2)</h3><p>burn it to a cd of usb</p>",
"<h3>reinstall os (step 3)</h3><p>change bios settings</p>",
"<h3>reinstall os (step 4)</h3><p>boot, install, enjoy</p>",
"<h3>watering a plant (step 1)</h3><p>pour some water into a flask</p>",
"<h3>watering a plant (step 2)</h3><p>water the plant, enjoy</p>",
"<h3>reading alphabet (step 1)</h3><p>read letter \"a\"</p>",
"<h3>reading alphabet (step 2)</h3><p>read letter \"b\"</p>",
"<h3>reading alphabet (step 3)</h3><p>read letter \"c\"</p>",
"<h3>reading alphabet (step 4)</h3><p>read all the other letters, enjoy</p>"
];
function hideDivs(){
document.getElementById("textDiv").style.display = "block";
document.getElementById("radioDiv").style.display = "none";
document.getElementById("btn").value = "next";
firstRun = false;
}
function restoreDivs(){
document.getElementById("textDiv").style.display = "none";
document.getElementById("radioDiv").style.display = "block";
document.getElementById("btn").value = "show";
idCurrent=0;
firstRun = true;
}
/*function to find the id of a checked radio from the group*/
function findChecked(){
for (var i=0; i<radios.length; i++) {
if (radios[i].checked) idCurrent = radios[i].id;
}
idCurrent = parseInt(idCurrent.slice(3))-1;
}
/*find which plan checked id belongs*/
function findPlan(){
for (var m=0;m<instructions.length;m++){
for (var n=0;n<instructions[m].length;n++){
if (instructions[m][n] == idCurrent) planCurrent = m;
}
}
}
/*actual function*/
function formContent(){
if (firstRun) {
findChecked();
findPlan();
hideDivs();
}
/*pushing into textDiv values from textContent array, which is your pages content*/
document.getElementById("textDiv").innerHTML = textContent[idCurrent];
/*check that we read just the current plan*/
if (idCurrent < instructions[planCurrent][instructions[planCurrent].length - 1]){
idCurrent++;
} else if (idCurrent == instructions[planCurrent][instructions[planCurrent].length - 1]) {
idCurrent++;
document.getElementById("btn").value = "finish!";
} else {
restoreDivs();
}
}
</script>
</body>
</html>

how to sum radio button values only one time?

I am using this code to sum values from multiple radio buttons :
$(document).ready(function(){
var total = 50000;
$("input[type=radio]").change(function(){
$("input[type=radio]:checked").each(function(){
if (isNaN($(this).val())) {
total = total;
}
else
total += parseFloat($(this).val());
});
$(".price_amount").text(total);
});
});
the problem is that when user click on a radio button in a group and then select another radio button in that group the new value will be add to this, i want to only add one of the values to the total value.
for example in this group :
<div>
<input type="radio" value="0" name="markuptype" class="pack_radio" checked="checked"><h4>W3C Valid HTML 4.01</h4>
<span class="pack_price">-</span>
</div>
<div>
<input type="radio" value="5000" name="markuptype" class="pack_radio"><h4>W3C Valid XHTML 1.0 Transitional</h4>
<span class="pack_price">5,000</span>
</div>
<div>
<input type="radio" value="15000" name="markuptype" class="pack_radio"><h4>W3C Valid XHTML 1.0 Strict</h4>
<span class="pack_price">15,000</span>
</div>
when first time a user select seconed radio the 5000 will be add to total price, but if he change it to third option, 15000+5000 will be add to total, i want to have only one of them !
The problem seems, to me, that the total var is declared out of the scope of the change callback. This will cause the closure of the change callback to contain the total variable, so it's value will be persisted across subsequent change calls.
If declare the total within this callback, you should be fine:
$("input[type=radio]").change(function(){
var total = 5000; // => declared locally, so initialized at each change.
$("input[type=radio]:checked").each(function(){
if (isNaN($(this).val())) {
total = total;
}
else
total += parseFloat($(this).val());
});
$(".price_amount").text(total);
});
I wrote a simple example demonstrating this recently (although I did it without using jQuery).
Just store the value you add, and then subtract it from the total before adding a new one.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>Radio Test</title>
</head>
<body>
<form action="" method="get" id="myForm">
<fieldset id="myRadioGroup">
<legend>Radios</legend>
<div>
<label> <input type="radio" value="0" name="add" checked> 0 </label>
</div>
<div>
<label> <input type="radio" value="20" name="add"> 20 </label>
</div>
<div>
<label> <input type="radio" value="30" name="add"> 30 </label>
</div>
</fieldset>
<div id="total">45</div>
</form>
<script type="text/javascript">
(function () {
var group = document.forms.myForm.elements.add;
var currentValue = function currentValue () {
for (var i = 0, j = group.length; i < j; i++) {
if (group[i].checked) {
return Number(group[i].value);
}
}
};
var oldValue = currentValue();
var total = document.getElementById('total').firstChild;
var update = function update () {
var current = currentValue();
total.data = Number(total.data) - oldValue + current;
oldValue = current;
};
for (var i = 0, j = group.length; i < j; i++) {
group[i].onchange = update;
}
}());
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div>
<input type="radio" value="0" name="markuptype" class="pack_radio" checked="checked"><h4>
W3C Valid HTML 4.01</h4>
<span class="pack_price">-</span>
</div>
<div>
<input type="radio" value="5000" name="markuptype" class="pack_radio"><h4>
W3C Valid XHTML 1.0 Transitional</h4>
<span class="pack_price">5,000</span>
</div>
<div>
<input type="radio" value="15000" name="markuptype" class="pack_radio"><h4>
W3C Valid XHTML 1.0 Strict</h4>
<span class="pack_price">15,000</span>
</div>
</body>
<script type="text/javascript">
$(function()
{
$('input:radio').change(function()
{
var total = 50000;
$('input:radio:checked').each(function()
{
if (isNaN(this.value))
total = total;
else
total += parseFloat(this.value);
});
$('.price_amount').text(total);
});
});
</script>
</html>

Categories

Resources