How to create 3 links to define and one to erase - javascript

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>

Related

Output a radio button in a webpage

I'm trying to input the value of the checked radio button as one of a functions parameres (here sign). This is my code:
<!DOCTYPE html>
<html>
<head>
<script src="proj4js/lib/proj4js/lib/proj4js-compressed.js"></script>
</head>
<body>
<script>
function func1 (x,y, sign){
var z=(x+y)*sign
document.getElementById("Z").innerHTML = z;
}
</script>
<form >
first input:<br>
<input id="Y" type="text" y="Y" value=85>
<br>
second input:<br>
<input id="X" type="text" x="X" value=15>
<br>
<input type="radio" name="hem" value=1 id = "N" >north
<input type="radio" name="hem" value=-1 id = "S" >south
The Answer:<br>
<input id="Z" type="text" z="Z" >
<br><br>
</form>
<button type="button" onclick="func1(Number(document.getElementById('X').value),Number(document.getElementById('Y').value), ?? )"> try it </button>
I don't know what to put instead of ?? ? The sign determines if sign is positive or negative.
make input elements as
<form id="demoForm">
first input:<br>
<input id="Y" type="text" value=85>
<br>
second input:<br>
<input id="X" type="text" value=15>
<input type="radio" name="hem" value="1" id="N" >north
<input type="radio" name="hem" value="-1" id ="S" >south
The Answer:<br>
<input id="Z" type="text" z="Z" >
</form>
<script>
function getRadioVal(form, name) {
var val;
// get list of radio buttons with specified name
var radios = form.elements[name];
// loop through list of radio buttons
for (var i=0, len=radios.length; i<len; i++) {
if ( radios[i].checked ) { // radio checked?
val = radios[i].value; // if so, hold its value in val
break; // and break out of for loop
}
}
return val; // return value of checked radio or undefined if none checked
}
var val = getRadioVal( document.getElementById('demoForm'), 'hem' );
alert(val); //you can pass this value as parameter
</script>
The simple way would be to write a helper function to collect your paramters and then call your function from this function.
You could use jQuery to get the value of the checked
$('input[name=hem]:checked').val()
Just need to make sure that the form you're using has an id. Then you wouldn't have to pass to the function just get the value directly from the form in your function.
<script>
function func1 (x,y){
var sign = $('input[name=hem]:checked').val();
var z=(x+y)*sign;
document.getElementById("Z").innerHTML = z;
}
</script>
<!DOCTYPE html>
<html>
<head>
<!--
<script src="proj4js/lib/proj4js/lib/proj4js-compressed.js"></script>
-->
</head>
<body>
<form >
first input:<br>
<input id="Y" type="text" y="Y" value=85>
<br>
second input:<br>
<input id="X" type="text" x="X" value=15>
<br>
<input type="radio" name="hem" value="1" id="N" >north</input>
<input type="radio" name="hem" value="-1" id="S" >south </input>
The Answer:<br>
<input id="Z" type="text" z="Z" >
<br><br>
</form>
<button type="button" onclick="func1(Number(document.getElementById('X').value),Number(document.getElementById('Y').value), getAppropriateValue() )"> try it </button>
<script>
function func1 (x,y, sign){
var z=(x+y)*sign
document.getElementById("Z").value = z;
}
function getAppropriateValue(){
var result = 0;
var checkboxN = document.getElementById('N');
var checkboxS = document.getElementById('S');
if(checkboxN && checkboxN.checked) result = 1;
if(checkboxS && checkboxS.checked) result = -1;
return result;
}
</script>
You can entirely take off third param and can output sign based on radio checked property.
<script>
function func1 (x,y) {
var z=(x+y);
if(document.getElementById("N").checked) {
z= z*1;
}elseif(document.getElementById("N").checked) {
z=z*-1;
}
document.getElementById("Z").value = z;
}
</script>

Save and restore settings on Chrome

I have
options.html
<html>
<head>
<meta charset="utf-8">
<title>Options</title>
<script src="js/options.js"></script>
</head>
<body>
<p>
<input type="checkbox" name="checkbox" id="checkbox">
<label for="checkbox">Test</label></p>
<p>
<label for="textfield">Filter:</label>
<input type="text" name="textfield" id="textfield">
</p>
<p>Select type:</p>
<p>
<label>
<input type="radio" name="RadioGroup1" value="True" id="RadioGroup1_0">
Radio</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="False" id="RadioGroup1_1">
Radio</label>
</p>
<p>
<button id="BtnSave">Save</button>
<button id="BtnRestore">Restore</button>
<br>
</p>
</body>
</html>
options.js
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("BtnSave").addEventListener("click", ButtonSave);
document.getElementById("BtnRestore").addEventListener("click", ButtonsRestore);
});
function ButtonSave() {
var ... = document.getElementById('...').checked;
chrome.storage.sync.set({...: ...}, function() {
});
}
function ButtonsRestore() {
chrome.storage.sync.get(likesColor, function (retVal) {
});
}
How save: CheckBox status, value in Edit and RadioGroup ItemIndex?
How restore: CheckBox (Checked := True), Edit (Text := 'bla-bla') and RadioGroup (ItemIndex := 1)?
Thanks!
The "checked" property of both checkboxes and radio buttons will let you see if they are selected:
console.log(document.getElementById(id).checked)
You can also use this to programmatically set them, e.g.
document.getElementById(id).checked = true
For text boxes, their current value is in the value property:
console.log(document.getElementById(id).value)
and likewise can be set:
document.getElementById(id).value = "whatever"
Solved
function save_options() {
var elements = document.getElementsByName('RadioGroup1');
for (i = 0; i < elements.length; i++) {
if (elements[i].checked) {
localStorage.setItem("RadioGroup1", elements[i].value);
break;
}
}
}
function restore_options() {
var elements = document.getElementsByName('RadioGroup1');
var num = localStorage.getItem("RadioGroup1");
elements[num].checked = true;
}

DOM event clearing text values

I'm writing a JS code to calculate a final grade given some individual grades and output the result in the html page but when I trigger the event and function it outputs a wrong answer for a split second then immediately disappears along with the values entered into the text box.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Problem 2</title>
<script src="grades.js" type="text/javascript"></script>
</head>
<body>
<h1>Grade Calculator</h1>
<form id ="myForm">
<div id="assignments">
HW <input type="text" size="1"/> / <input type="text" size="1"/><br/>
HW <input type="text" size="1"/> / <input type="text" size="1"/><br/>
HW <input type="text" size="1"/> / <input type="text" size="1"/>
</div>
<div>
<input type="checkbox" /> Curve +5?
</div>
<div id="resultsarea">
<p>
<!--add buttons here -->
<button id="comp">Compute</button>
<button id="clr">Clear</button>
</p>
<!-- add results here -->
</div>
</form>
</body>
</html>
JS:
window.onload = pageLoad;
function pageLoad()
{
var cbutton = document.getElementById("comp");
cbutton.onclick = compute;
}
function compute()
{
var values = document.getElementsByTagName("input");
var marks = 0;
var total = 0;
for (var i=0; i < values.length; i++)
{
if(values[i].type == "text")
{
if (i%2 == 0)
marks += parseInt(values[i].value);
else
total += parseInt(values[i].value);
}
}
var result = Math.round(marks/total);
document.writeln(result);
}

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