How do I have a variable on a web page that updates when needed?

Question

I have three radio buttons. Each has a value (1, 2 or 3). Under the radio buttons, I need a number to appear that matches the value of the radio button currently selected. This must update in real time.

Currently I have something like this:

<input type="radio" Id="case" value="1" checked>
<input type="radio" Id="case" value="2">
<input type="radio" Id="case" value="3">

<script>
document.write(document.getElementById("case").value);
</script>

When the page is loaded, the javascript runs once, and prints "1". I want this number to change when I select another radio button, but I'm not sure how to do that. I'm flexible in solutions, does not have to be in javascript... any suggestions would be appreciated. I'm using Rails.

http://stackoverflow.com/questions/13152927/how-to-use-radio-on-change-event — Sam Segers, Sep 26 '15 at 19:27
do you want to active last change if page is loaded(many time)? — Sherali Turdiyev, Sep 26 '15 at 19:33

score 0 · Answer 1 · answered Sep 26 '15 at 19:32

This is done by using addEventListener. Consider the following code ::

function changeValue(event) {
    if ( event.target.getAttribute('type') == 'radio' ) {
        document.getElementById('newValue').innerHTML = event.target.value;
    }
}

document.getElementById('buttons').addEventListener( 'click', changeValue, false );

<div id='buttons'>
    <input type="radio" name="case" value="1" checked>
    <input type="radio" name="case" value="2">
    <input type="radio" name="case" value="3">
</div>
<span id='newValue'>1</span>

This should help you get started writing your code that you need.

Keep in mind to give all of your inputs the same name, not the same id. The same name keeps multiple inputs from being checked at the same time. Setting the same id to multiple elements is not the standard and could cause confusion for you.

Ren · Answer 2 · 2015-09-28T09:56:05.777

0

Also one of the possible methods:

<input type="radio" name="case" value="1" checked />Value 1<br />
<input type="radio" name="case" value="2" />Value 2<br />
<input type="radio" name="case" value="3" />Value 3<br />
<div id="radioValue">Selected value is: <span>1</span></div>


<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>

$(document).ready(function() {

    $('input[name='case']').click(function() {
        $("div#radioValue span").text($(this).val());
    });

});

</script>

edited Sep 28 '15 at 09:56

answered Sep 26 '15 at 22:10

Ren

330
6
23

Just what I needed. I have not used jquery before, but it looks like an excellent tool for client-side HTML manipulation. – user1784658 Sep 27 '15 at 16:30
@Ren, You must note that every single element in HTML must have unique id value. You cannot have same Id values in all Radio buttons. Validating HTML will show errors in that case. – vivek Sep 28 '15 at 09:48
@vivek : Didn't want to change the structure of author's original input element. However, I have changed ID => Name upon your feedback. Hopefully this or some other answer helped him fix his issues. – Ren Sep 28 '15 at 10:03

score -1 · Answer 3 · answered Sep 26 '15 at 19:38

-1

Try with the given code. May be it will be the thing you need.

<!doctype html>
<html >

<head>
    <title>content</title>

    
</head>

<body>

<input type="radio" Id="case" value="1" checked  name="a">
<input type="radio" Id="Radio1" value="2" name="a">
<input type="radio" Id="Radio2" value="3"  name="a">
    <span id="val"></span>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    
    $(function () {
        $('input[type=radio]').click(function () {
            $('#val').html($(this).val());
        })
    })

</script>

</body>
</html>

answered Sep 26 '15 at 19:38

vivek

1,595
2
18
35

This question does not have much to do with jquery – Jesse Sep 26 '15 at 20:32
Thanks. I am reading into jQuery now, and it seems to be just what I was looking for. – user1784658 Sep 27 '15 at 16:25
@Jeese, Note that the question contains "I'm flexible in solutions, does not have to be in javascript". This is why I answered it as per my preference. I know that fact that is can also be done purely with JavaScript. Anyway, Thanks – vivek Sep 28 '15 at 09:45

How do I have a variable on a web page that updates when needed?

3 Answers3