Home/ Questions/Q 6168791
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T22:44:59+00:00

I’d like to write a form with a radio button that opens an optional

  • 0

I’d like to write a form with a radio button that opens an optional input text field.

e.g. radio button : Do you have a wife/husband ? If the user says yes input fields dd, mm, and yyyy appear (for wife/husband birthday day, month, and year) and correct values must be written for the form to be submitted (01 plus 12 plus 1978 are accepted but not 1a plus yy plus 1945).

If the user answers no to the question then this field has no reason to appear (no wife/husband means no wife/husband birthday) and the default values of dd, mm, yyyy are transmitted.

I know how to make a div visible with the style property on the onClick event of the radio button but I have no idea of how to make the input fields compulsory for the yes answer and optional for the no answer (actually not visible and the default values are going to be transmitted).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve found a very simple way to do this.

    My code for those of you interested :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sample</title>

</head>
<body>
<script type="text/javascript">
function aff_div(ladiv) {
  document.getElementById(ladiv).style.display = "inline";
}

function cach_div(ladiv) {
  document.getElementById(ladiv).style.display = "none";
}

function affich_conj() {
  if (document.forms.devis.votconj[0].checked == true) {
    aff_div("ssconj");
  }

  if (document.forms.devis.votconj[1].checked == true) {
    document.getElementById("jj").value = 0;
    document.getElementById("mm").value = 0;
    document.getElementById("aaaa").value = 0;
    cach_div("ssconj");
  }
}
</script>

    <form id="devis" name="devis" action="Validation-du-formulaire.php" method="post">

  <label>Do you have a wife/husband ?</label>
  <input type="radio" name="votconj" value="yes" onclick="affich_conj();">yes
  <input type="radio" name="votconj" value="no" checked="checked" onclick="affich_conj();">no

  <div id="ssconj">
    <p>
      <label>Her/his birthdate :</label>
      <select name="jj" id="jj">
        <option value="0" selected="selected">--</option>
        <option value="01">01</option>
        <option value="02">02</option>
      </select>
      <select name="mm" id="mm">
        <option value="0" selected="selected">--</option>
        <option value="01">01</option>
        <option value="02">02</option>
      </select>
      <select name="aaaa" id="aaaa">
        <option value="0" selected="selected">--</option>
        <option value="1993">1970</option>
        <option value="1992">1969</option>
      </select>
    </p>
  </div>

</form>

<script type="text/javascript">
  cach_div("ssconj");
</script>

</body>
</html>
    • 0