CODEWITHSUNDEEP
formshtml
Bruno
Bruno

Reputation: 9017

Create an html form with a radio button that opens an optional input text field

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

Upvotes: 0

Views: 6939

Answers (2)

Bruno
Bruno

Reputation: 9017

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>

Upvotes: 2

Kaisar
Kaisar

Reputation: 49

Create a custom input field with class="required" that appears after the click event. But if you put the input before clicking the radio just add a class name required to the input. you can add a new class to an element with id="test" as following :

$(document).ready(
      function(){
             $('#testRadio').click(function(){
                  $('test').addClass("required");
      });
});

now validate the input element with class name required.

You can disable/enable or show/hide the element as needed!!!

Just disable the submission if your inputs with class required are not in perfectly filled up by writing return false;

Upvotes: 0

Related Questions