In an HTML form, can I have a button only be visible/selectable based on the value of a checkbox?

Question

I am trying to create a form for my company's website. I am letting a customer selectively donate to my company upon download of a piece of software. If they check a box, I'd like a "Donate" button to appear with code to go to my third party store (I know how to do this), and if they don't select the checkbox, then I'd like a different button to appear that will link them to the download of the software (I also can do this).

I would prefer to stick to PHP, Javascript, and HTML. I do not have immediate access to anything like asp.net.

Thanks!

Answer 1

Yes. Just toggle the value of button.style.display between 'none' and '' with JavaScript.

Answer 2

<input id="my_check_box" type="checkbox" onclick="handleCheckChange()" onchange="handleCheckChange()" />

<input id="my_donate_button" type="submit" style="display: none" value="Donate now!" />

<script type="text/javascript">
  function handleCheckChange() {
    var my_donate_button = document.getElementById("my_donate_button");
    if (document.getElementById("my_check_box").checked) {
      my_donate_button.style.display = '';
    } else {
      my_donate_button.style.display = 'none';
    }
  }
  // Browsers may pre-check the box if the user re-loads the page,
  // so call this to make sure the page is consistent.
  handleCheckChange(); 
</script>

Answer 3

ya u can do it.. create a javascript function named like

function check_button() { if(document.getElementById('checkbox_id').value=="checkbox_value") { document.getElementById('button_id').style.display="block"; } else { document.getElementById('button_id').style.display="none"; } }

call this function in checkbox html code