堆棧內存溢出
  簡體   English   中英

表單在同一頁面上顯示結果+隨機答案

[英]form display results on same page + random answer

 原文  2014-10-10 21:15:34  7   2    javascript

問題描述

因此，我有3個問題：“您從事什么職業？”，然后選擇並提交文本，廣播和選擇之后，結果將顯示在它們旁邊。 文字和選擇，但不選擇收音機。 選擇顯示我是否具有收音機，例如if ((php.checked==false) && (asp.checked==false) && (js.checked==false)){rad.setAttribute("style", "display:inline");} ...現在，我的設置是如何顯示的，但收音機卻顯示並選擇了dont。 另外，我還需要一個包含解決方案的數組，一旦提交答案，它就會隨機顯示一個解決方案，例如“ You are a Warrior！”。 這是一個.PHP擴展名。 這是我的代碼： 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ex 2</title>
<link href="styles.css" rel="stylesheet">
<script>
function checkForm(){

    var chk = true;
    var mName = document.getElementById("txtMeth");
    var meth = document.getElementById("methMess");
    var rad = document.getElementById("radMess");
    var sel = document.getElementById("selMess");
    var php = document.getElementById("a");
    var asp = document.getElementById("b");
    var js = document.getElementById("c");
    var arr = document.getElementById("imp");

        mName.style.backgroundColor="#fff";
        meth.setAttribute("style", "display:none");
        rad.setAttribute("style", "display:none");
        sel.setAttribute("style", "display:none");


    if (mName.value=='no'){     
        document.getElementById("methMess").innerHTML = "No";
        meth.setAttribute("style", "display:inline");
        chk = false;
    }
    if (mName.value=='yes'){        
        document.getElementById("methMess").innerHTML = "Yes";
        meth.setAttribute("style", "display:inline");
        chk = false;
    }       
    if (php.value==A){
        document.getElementById("radMess").innerHTML = "Healer";
        rad.setAttribute("style", "display:inline");
        chk = false;
    }
    if (asp.value==B){
        document.getElementById("radMess").innerHTML = "Dark";
        rad.setAttribute("style", "display:inline");
        chk = false;
    }
    if (js.value==C){
        document.getElementById("radMess").innerHTML = "One with the Elements";
        rad.setAttribute("style", "display:inline");
        chk = false;
    }
    if (arr.value==1){
        document.getElementById("selMess").innerHTML = "Rifle";
        sel.setAttribute("style", "display:inline");
        chk = false;
    }
    if (arr.value==2){
        document.getElementById("selMess").innerHTML = "Bown and Arrow";
        sel.setAttribute("style", "display:inline");
        chk = false;
    }
    if (arr.value==3){
        document.getElementById("selMess").innerHTML = "Daggers";
        sel.setAttribute("style", "display:inline");
        chk = false;
    }

}

</script>
</head>

<body>
<div class="page">   
<main role="main">
<article>
    <div id="errMess" class="errMess">*Required Fields Missing</div>
      <h1>What Guild Wars 2 Profession Are You</h1>

        <div class="cssTable" style="margin-top:-25px;">
        <form method="post">
          <table>
          <tr><td colspan="3"></td></tr>
            <tr>
            <td><div align="right">Do you like to do high damage?</div></td><td width="217">
            <input id="txtMeth" name="txtMeth" type="text" size="25"></td><td ><div id="methMess" style="display:none"></div></td></tr>
            <tr>
                <td><div align="right">What best describes you?</div></td><td>
                <input id="a" type="radio" name = "group1" value="A">Healer</input>
                <input id="b" type="radio" name = "group1" value="B">Dark</input>
                <input id="c" type="radio" name = "group1" value="C">Earthling</input>               
                </td><td><div id="radMess" style="display:none"></div></td>
                </tr>
                <tr>
                <td>What weapon would you like to have?</td>
                <td>
                <select id="imp"><option value="0" selected="true">Select One</option>
                <option value="1">Rifle</option>
                <option value="2">Bow and Arrow</option>
                <option value="3">Daggers</option></select>
                </td><td><div id="selMess" style="display:none"></div></td>
                </tr>
                <tr><td colspan="3" align="right"><input type="button" class="styled-button-7" value="Send" onclick="checkForm()"/></td></tr></table></form></div></article>
                </main></div>
</body>
</html>

2 個解決方案

解決方案1
 0  2014-10-10 21:58:27

就像這樣，單選按鈕將始終具有值“ A”，“ B”或“ C”，這就是在HTML中定義它們的方式。

應該通過使用'.checked'屬性而不是通過值來檢查單選按鈕是否處於活動狀態。

請在這里查看js小提琴

我對您的代碼所做的更改是：

我更新了你的 

if (php.checked) {
    document.getElementById("radMess").innerHTML = "Healer";
    rad.setAttribute("style", "display:inline");
    chk = false;
}
if (asp.checked) {
    document.getElementById("radMess").innerHTML = "Dark";
    rad.setAttribute("style", "display:inline");
    chk = false;
}
if (js.checked) {
    document.getElementById("radMess").innerHTML = "One with the Elements";
    rad.setAttribute("style", "display:inline");
    chk = false;
}

解決方案2
 0  2014-10-10 22:54:23

所以...我不得不重命名所有內容，因為我一直感到困惑。 不要只是將其上交或完全復制它……您的老師可能會知道您沒有這樣做。 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ex 2</title>
<link href="styles.css" rel="stylesheet">

<style>td { height:25px }</style>
<script>

function checkForm() {

   var high   = document.getElementById('high');      // mName
   var desc   = document.getElementsByName('desc');   // group1
   var weapon = document.getElementById('weapon');    // imp

   // console.log(high);
   // console.log(desc);
   // console.log(weapon);

   // get the checked radio button value to be used later
   var desc_value;  
   for(var i=0; i<desc.length; i++){ 
      if (desc[i].checked) desc_value = desc[i].value;
   }

   var error = false;
   if (!high.value) {
      // if you need to do validation for Yes/No, do it here 
      document.getElementById('errMess').innerHTML = 'high damage missing'; 
      error = true; 
   }
   else if (!desc_value) {
      document.getElementById('errMess').innerHTML = 'desc missing'; 
      error = true; 
   }
   else if (!weapon.value) {
      document.getElementById('errMess').innerHTML = 'weapon missing'; 
      error = true; 
   }

   if (!error) {
      document.getElementById('errMess').innerHTML = ''; 

      // do you like to do high damage?
      high.style.background = '#fff';
      high.style.display    = 'none';
      var highMess = document.getElementById('highMess');
          highMess.innerHTML = high.value;
          highMess.setAttribute('style', 'display:inline');  

      // what best describes you?
      var desc_val;
      var desc_msg = document.getElementById('descMsg');
          desc_msg.setAttribute('style', 'display:inline'); 
          desc_msg.innerHTML = desc_value; 
      for(var i=0; i<desc.length; i++){    
         // loop through the radio button group to hide the parent <span>
         desc[i].parentNode.setAttribute('style', 'display:none'); 
      }

      // what weapon would you like to have? 
      weapon.style.display = 'none';
      var weapon_val = weapon.options[weapon.selectedIndex].value;
      var weapon_msg = document.getElementById('weaponMsg');
          weapon_msg.innerHTML = weapon_val;
          weapon_msg.setAttribute('style', 'display:inline'); 
   }
}

</script>
</head>

<!-- this sets the selected option to being out of range (aka blank/empty) -->    
<body onload="document.getElementById('weapon').selectedIndex = -1;">

<div class="page">
<main role='main'>
<article>
   <div id='errMess' class='errMess' style='font-weight:bold; height:26px'></div>
     <h1>What Guild Wars 2 profession are you.....?</h1>
      <div class='cssTable' style='margin-top:-25px;'>
      <form method='post'>
        <table>
         <tr><td colspan='3'></td></tr>
         <tr>
            <td><div align='right'>Do you like to do high damage?</div></td>
            <td width='217px'><input id='high' name='high' type='text' size='25'/></td>
            <td><div id='highMess' style='display:none'></div></td>
         </tr>
         <tr>
            <td><div align='right'>What best describes you?</div></td>
            <td>
               <!-- i added spans outside of the <input/> so you could hide the text easily, too -->
               <span><input id='healer'    type='radio' name='desc' value='healer'>Healer</input></span>
               <span><input id='dark'      type='radio' name='desc' value='dark'>Dark</input></span>
               <span><input id='earthling' type='radio' name='desc' value='earthling'>Earthling</input></span>
            </td>
            <td><div id='descMsg' style='display:none'></div></td>
         </tr>
         <tr>
            <td>What weapon would you like to have?</td>
            <td>
               <select id='weapon' name='weapon'>
                  <option value='rifle'>Rifle</option>
                  <option value='bow_arrow'>Bow and Arrow</option>
                  <option value='daggers'>Daggers</option>
               </select>
            </td>
            <td><div id='weaponMsg' style='display:none'></div></td>
         </tr>
         <tr>
            <td colspan='3' align='right'><input type='button' class='styled-button-7' onClick='checkForm()' value='Submit'/></td>
         </tr>
         </table>
      </form>
      </div>
   </div>
</article>
</main>
</body>
</html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 提交表單，使用腳本處理信息，並在同一頁面上顯示結果 使用jQuery延遲表單輸入並在延遲后在同一頁面上顯示結果 無法使用 php 和 javascript 在同一頁面上顯示表單結果 如何在同一頁面的特定部分顯示Flask表單結果 如何獲取 javascript 中表單的值並計算值並在同一頁面顯示答案？ 輸出表單在同一頁面上顯示 如何在同一頁面上顯示javascript結果 JS：提交表單並在同一頁面上呈現結果 在同一頁面的表格中顯示復選框和表單數據 我想在同一個html頁面中從一種形式轉換為另一種形式，例如問題答案測驗頁面
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM