ウェブフォームの要素に基づいて段落を自動的に生成

同じページの両方のフォームの選択に基づいて段落のリアルタイムプレビューを作成しようとしています。私はこのコードを使って作業しています。ウェブフォームの要素に基づいて段落を自動的に生成

<script type="text/javascript"> 

function yesnoCheck() { 
    if (document.getElementById('yesCheck').checked) { 
     document.getElementById('ifYes').style.display = 'block'; 
    } 
    else document.getElementById('ifYes').style.display = 'none'; 

} 

</script> 
Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"><br> 
    <div id="ifYes" style="display:none"> 
     If yes, where: <input type='text' id='yes' name='yes'><br> 
     When? <input type='text' id='acc' name='acc'> 
    </div>

私はwisingだ結果が事前に準備された段落になり、それがフォームの下部に表示され、上記のオプションの選択に基づいて変更されることです。「はい」を選択した場合と同様に、これが表示されます。

X氏は、「午前8時」

でと「いいえ」は、この意志を選択した場合は、 'ロンドンの中に存在するであろう表示されます。

X氏が支援するために、事前に欠席

おかげだろう。

出典

2017-01-17 Ashonko

私は、これはこれはあなたの条件


 

 
function yesnoCheck() { 
 
    if (document.getElementById('yesCheck').checked) { 
 
     document.getElementById('ifYes').style.display = 'block'; 
 
     document.getElementById('targetDiv').innerHTML="" 
 
    } 
 
    else { 
 
    document.getElementById('targetDiv').innerHTML="Mr. X will be absent"; 
 
    document.getElementById('ifYes').style.display = 'none'; 
 
    document.getElementById('yes').value="" 
 
    document.getElementById('acc').value="" 
 
    } 
 

 
} 
 
function showResult(){ 
 
\t var yes=document.getElementById('yes').value 
 
    var acc=document.getElementById('acc').value 
 
    if(yes!="" && acc!=""){ 
 
     document.getElementById('targetDiv').innerHTML="Mr. X will be present in '"+yes+"' at '"+acc+"'" 
 
    } 
 
    else{ 
 
    alert("Input are blank") 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"><br> 
 
    <div id="ifYes" style="display:none"> 
 
     If yes, where: <input type='text' id='yes' name='yes'><br> 
 
     When? <input type='text' id='acc' name='acc'> 
 
     <button type="button" onclick="showResult()">Show Result</button> 
 
    </div> 
 
    <div id="targetDiv"></div> 
 

 
</body> 
 
</html>

出典

2017-01-17 17:42:37

次のことを試してみてください。

<html> 
     <head> 
     </head> 
     <body> 
      Yes <input type="radio" onclick="yesnoCheck();" name="yesno" id="yesCheck"> No <input type="radio" onclick="yesnoCheck();" name="yesno" id="noCheck"><br> 
     <div id="ifYes" style="display:none"> 
      If yes, where: <input type='text' onchange="onLocationChange();" id='yes' name='yes'><br> 
      When? <input type='text' id='acc' onchange="onTimeChange();" name='acc'> 

      <div> 
       Mr. X will be present 
       <span id="location" style="display: none;"></span> 
       <span id="time" style="display: none;"></span> 
      </div> 
     </div> 
     <div id="ifNo" style="display:none"> 
      Mr. X will be absent 
     </div> 

     <script> 
     function onLocationChange(){ 
      var value = document.getElementById('yes').value; 
      if (value) { 
       document.getElementById('location').style.display = 'inline'; 
       document.getElementById('location').innerHTML = ' in ' + value; 
      } 
      else { 
       document.getElementById('location').style.display = 'none'; 
      } 

     } 

     function onTimeChange(){ 
      var value = document.getElementById('acc').value; 

      if (value) { 
       document.getElementById('time').style.display = 'inline'; 
       document.getElementById('time').innerHTML = ' at ' + value; 
      } 
      else { 
       document.getElementById('time').style.display = 'none'; 
      } 

     } 
     function yesnoCheck() { 

      if (document.getElementById('yesCheck').checked) { 
       document.getElementById('ifYes').style.display = 'block'; 
       document.getElementById('ifNo').style.display = 'none'; 
      } 
      else { 
       document.getElementById('ifYes').style.display = 'none'; 
       document.getElementById('ifNo').style.display = 'block'; 
      } 


     } 
     </script> 
     </body> 
    </html>

出典

2017-01-17 17:13:18

申し訳ありませんが、私は実際の下部に段落を自動生成するために望んでいることを望みますフォームは、上記のフォームの選択に基づいています。 – Ashonko

今すぐ試してください。欠席の段落は選択なしで表示されます...コードを入力したユーザーの変更イベントが必要な場合はお知らせください –

これは本当に役立つでしょう。誰かが「はい」と「場所」と「時間」を選択したときのように。 – Ashonko

ウェブフォームの要素に基づいて段落を自動的に生成

答えて

関連する問題