Would anybody happen to know if it's possible to hide the value of a radio button unless it is checked, and then when it is checked display that value, and then after moving on, that value stays active, and the user can fill out the rest of the form and pass that value on with php when finished??

It's part of an invoice form and each input has a dollar amount value.. Just trying to make it so the choice they chose displays how much it costs throughout the form..

10 Years
Discussion Span
Last Post by Scooby08

That was fun ... try this, it seems to work okay

<style type="text/css">
.hide {
  display: none;
<script type="text/javascript">
window.onload = function () {
  var myform = document.getElementById('myform');
  myform.onclick = function () {
    for ( var i = 0; i < myform.length; i ++ ) {
      if ( myform[i].getAttribute('name') == 'price' ) {
        var ref = myform[i].getAttribute('value');
        if ( myform[i].checked ) {
          document.getElementById(ref).style.display = 'inline';
        } else {
          document.getElementById(ref).style.display = 'none';
<form id="myform">
  <label for="w1">Widget One</label>
  <input id="w1" value="w1h" type="radio" name="price" />
  <span id="w1h" class="hide">$9.45</span>
  <br />
  <label for="w2">Widget Two</label>
  <input id="w2" value="w2h" type="radio" name="price" />
  <span id="w2h" class="hide">$12.95</span>

Hope it helps

P.S. I keep forgetting that IE doesn't like to capture 'onchange' events for elements of a form when the handler is placed on the form element itself ... geek trivia


This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.