2011-07-20 6 views
0

オプションの入力テキストフィールドを開くラジオボタンを含むフォームを作成したいと思います。オプションの入力テキストフィールドを開くラジオボタンを使用してhtmlフォームを作成します。

ラジオボタン:夫/夫がいますか?ユーザーが「はい」と答えた場合は、妻/夫の誕生日の誕生日、月、年の入力フィールドdd、mm、yyyyが表示され、フォームの提出用に正しい値を記入する必要があります(01プラス12プラス1978が受け入れられますが、1aプラスyyプラス1945)。

このフィールドにnoと答えた場合、このフィールドは表示されません(妻/夫は妻/夫の誕生日を意味しません)。デフォルト値のdd、mm、yyyyが送信されます。

私は、ラジオボタンのonClickイベントのstyleプロパティでdivを表示する方法を知っていますが、私は入力フィールドを必須答えとして強制する方法はありません。デフォルト値は送信されます)。

+0

が値を持つ目に見えないフィールドを使用する必要がありますか?質問に明確ではありません... – Subdigger

+0

@Subdiggerはい彼らはデフォルト値(ddプラスmmプラスyyyy)を持つ必要がありますが、それは簡単であり、それは主要な問題ではありません。 – Bruno

+0

「はい」とオプションの「いいえ」の入力はどういう意味ですか?この問題を選択するか無線で解決しますか? – Subdigger

答えて

2

を書くことでいっぱいになっていない場合だけ送信を無効にします。

興味を持ってあなたのそれらのための私のコード:

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

クリックイベントの後に表示されるclass = "required"のカスタム入力フィールドを作成します。しかし、ラジオをクリックする前に入力した場合は、入力にが必要なクラス名を追加するだけです。

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

を必要なクラス名で入力要素を検証:次のようID =「テスト」を持つ要素に新しいクラスを追加することができます。

必要に応じて要素を無効/有効/表示/非表示にすることができます。

を必要なクラスであなたの入力は完全に私はこれを行うには非常に単純な方法を見つけたreturn false;

+0

あなたの答えはありがとうJQueryを避けることを好みます。 – Bruno

関連する問題