Dynamically update text from radio button

Question

I am trying to get the text within the input tags to display the status of the radio button. The code works fine except for the very first time (the onload event). When the page loads the first alert is displayed but not the second. Once I click on the other radio button (the unchecked one) and then back to the original one, I see both alerts. Can someone please help me with why this is happening? I am sure it is something stupid. Thanks

<script>
window.onload = autoSelect("rolls");

function autoSelect(theValue)
    { 
        if(theValue=="rolls")
        {
            alert("hello world");
            document.getElementById("theLabel").innerHTML=theValue;
            alert("hello World");
        }
        else
        {
            document.getElementById("theLabel").innerHTML=theValue;
        }
    }

</script>
<div >
<form action="" >
    <input type="radio" id="matRadioRolls" name="rollsOrSqFeet" value="rolls" onclick="autoSelect(this.value)" checked>Rolls<br/>
    <input type="radio" id="matRadioSqFt" name="rollsOrSqFeet" value="sqfeet" onclick="autoSelect(this.value)" >Sq Ft<br/>
</form>

<label class="productsLabel" for=rolls" id="theLabel"></label>
<input type="text" name="rolls" id="rollsMat"></button>
</div>

Might be the type: <label class="productsLabel" for="rolls" id="theLabel"></label>. Seems to work here: jsfiddle.net/xXLAd — putvande
– putvande, Commented Nov 26, 2013 at 18:23

j08691 · Accepted Answer · 2013-11-26 18:27:54Z

2

You're actually executing your function call before the window object has fully loaded. You should change the call to this:

window.onload = function(){autoSelect("rolls");}

jsFiddle example

Oh, and a small side note. You have a typo in for=rolls" (missing a set of quotes).

answered Nov 26, 2013 at 18:27

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2382321 Over a year ago

Yep I sure do. Didn't notice that. Thanks very much and works perfectly now.

Mathias · Accepted Answer · 2013-11-26 18:27:09Z

0

Just guessing here: Depends on what browser you are using. there is a chance that the browser supresses the second alert (because you clicked don't show again)

Generally: Use console.log over alert. Use the Dev Tools.

answered Nov 26, 2013 at 18:27

Mathias

2,7241 gold badge20 silver badges17 bronze badges

Collectives™ on Stack Overflow

Dynamically update text from radio button

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related