How do you code a button to store a specific value when selected, to be used for later?

Question

How to code a button so that when it is clicked on a certain value is stored, and then can be put in to a equation to make a prediction later on? Here is the JSfiddle link to what were working on, we are trying to code an application to predict ski injury and need some help!!!!!

http://jsfiddle.net/DYJkG/792/

Html:

<h1>Personal information</h1>
<h2>gear</h2>
<div class="toggle-btn-grp">
    <label onclick="1" id="helmet" value="1" class="toggle-btn"><input type="radio" name="group2"/>helmet</label>
    <label onclick="" class="toggle-btn"><input type="radio" name="group2"/>hat</label>
    <label onclick="" class="toggle-btn"><input type="radio" name="group2"/>nothing</label>
</div>

<h2>ability</h2>
<div class="toggle-btn-grp">
    <label onclick="" class="toggle-btn"><input type="radio" name="group2"/>beginner</label>
    <label onclick="" class="toggle-btn"><input type="radio" name="group2"/>intermediate</label>
    <label onclick="" class="toggle-btn"><input type="radio" name="group2"/>advanced</label>
</div>

<h2>snow conditions</h2>
<div class="toggle-btn-grp joint-toggle">
    <label onclick="" class="toggle-btn"><input type="radio" name="group3"/>hard packed</label><label onclick="" class="toggle-btn"><input type="radio" name="group3"/>powder</label><label onclick="" class="toggle-btn"><input type="radio" name="group3"/>ice</label>
</div>

<h2>weather</h2>
<div class="toggle-btn-grp cssonly">
    <div><input type="radio" name="group4"/><label onclick="" class="toggle-btn">clear</label></div>
    <div><input type="radio" name="group4"/><label onclick="" class="toggle-btn">partly cloudy</label></div>
    <div><input type="radio" name="group4"/><label onclick="" class="toggle-btn">snowy</label></div>
</div>

<!-- Note: empty onclick attribue is there to fix iOS labels not being clickable to their input target -->

<input type="button" id="button" value="Find your precentage!" />
<input type="button" id="button2" value="Learn more" />

Javascript:

$(".toggle-btn:not('.noscript') input[type=radio]").addClass("visuallyhidden");
$(".toggle-btn:not('.noscript') input[type=radio]").change(function() {
    if( $(this).attr("name") ) {
        $(this).parent().addClass("success").siblings().removeClass("success")
    } else {
        $(this).parent().toggleClass("success");
    }
});


var onClick = function() {
    alert("87%");
};

$('#button').click(onClick);

$('#button2').click(function() {
    alert('I have literally no idea what you selected but you should probably stay off of they hill');
});

you would store it to a data-whatever attribute. http://api.jquery.com/data/ — phillip, Jan 23 '15 at 21:25
And what is that `onclick="1"`? The `onClick` attribute is supposed to contain JavaScript code. — Siguza, Jan 23 '15 at 21:29
Putting onclick="" inline like that is considered bad practice. see the following link to understand http://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice — phillip, Jan 23 '15 at 21:49

score 1 · Answer 1 · answered Jan 23 '15 at 21:46

You can go for something like this:http://jsfiddle.net/RhnvU/3282/ This will calculate a number, you can conver this in a percentage with relative ease.

<form id="myForm">
<input type="radio" name="radioName" value="1" /> 1 <br />
<input type="radio" name="radioName" value="2" /> 2 <br />
<input type="radio" name="radioName" value="3" /> 3 <br />
</form>
<br>
<form id="myForm2">
<input type="radio" name="radioName" value="1" /> 1 <br />
<input type="radio" name="radioName" value="2" /> 2 <br />
<input type="radio" name="radioName" value="3" /> 3 <br />
</form>

<button id="click">click to calculate</button>

jQuery

$('#click').on('click', function() {
   var a =  parseInt($('input[name=radioName]:checked', '#myForm').val());
   var b =  parseInt($('input[name=radioName]:checked', '#myForm2').val());
   var sum = a+b;
    alert (sum);
});

score 0 · Answer 2 · answered Jan 23 '15 at 21:50

I did the same as @Mikey :) here you have it:

HTML:

<label><input type="radio" name="group1" value="10" id="Add" checked >1</label>
<label><input type="radio" name="group1" value="20" id="Remove">2</label>
<label><input type="radio" name="group2" value="30" id="Add" checked >3</label>
<label><input type="radio" name="group2" value="40" id="Remove">4</label>

<input type="button" id="submit" value="test"/>

JQUERY:

$('#submit').click(function() {  
    var group1 = $("input:radio[name='group1']:checked").val();
    var group2 = $("input:radio[name='group2']:checked").val();
    var total = parseInt(group1) + parseInt(group2);
    alert(total);
});

http://jsfiddle.net/afMZc/165/

How do you code a button to store a specific value when selected, to be used for later?

2 Answers2