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..

Recommended Answers

All 2 Replies

Member Avatar for langsor

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

<html>
</head>
<style type="text/css">
.hide {
  display: none;
}
</style>
<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';
        }
      }
    }
  };
};
</script>
</head>
<body>
<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>
</form>
</body>
</html>

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

...

Awesome! Thankyou!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.