如何使用JavaScript在條件下使用JavaScript嵌入HTML表單

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>form</title> 
<link href="MyStyle.css" rel="stylesheet" type="text/css"> 
</head> 

<body class="form"> 
<h1>Application Form</h1> 


<form class="fdmain" method="post" id="form2" name="form2" action=> 
    <p> 
    <label for="textfield">Name:</label> 
    <input type="text" name="stdname" id="tfname"> 


    </p> 
    <p>Father Name: 
    <input type="text" name="fname" id="tffathername"> 
    </p> 
    <p> 
    <label for="email">Email:</label> 
    <input type="email" name="email" id="email"> 
    </p> 
    <p> 
    <label for="tel">Tel:</label> 
    <input type="tel" name="tel" id="tel"> 
    </p> 
    <p>Select Application Type: 
     <select name="appselect" id="appselect" onchange="myfunc()"> 
     <option value="" selected>Select Here </option> 
     <option value="Course_Application">Course Application</option> 
     <option value="Acc_State">Statement of Account</option> 
     <option value="Invite">Invitation</option> 
     <option value="Complain_Application">Complain</option> 
     <option value="SA_Applications">Student Affair Application</option> 
    </select> 
    </p> 

    <script type="application/javascript"> 
    function myfunc(){ 
     var Appread = document.forms[0].appselect.value; 
     if(Appread.localeCompare("Course_Application")==0) 
     { 
      document.write("<p>"); 
      document.write("<label>"); 
      document.write("<input type='radio' class='CARadio' name='CAType' value='drop' id='CAType_0'>"); 
      document.write("Drop</label>"); 
      document.write("<br>"); 
      document.write("<label>"); 
      document.write("<input type='radio' class='CARadio' name='CAType' value='withdraw' id='CAType_1'>"); 
      document.write("Withdraw</label>"); 
      document.write("<br>"); 
      document.write("<label>"); 
      document.write("<input type='radio' class='CARadio' name='CAType' value='other' id='CAType_2'>"); 
      document.write("Other</label>"); 
      document.write("<br>"); 
      document.write("</p>"); 
      document.write("</p>"); 
      document.write("<p>If Other Please Specify:</p>"); 
      document.write("<p>"); 
      document.write("<textarea name='txfdCApp' id='txtCAP'></textarea>"); 
      document.write("</p>"); 
      } 

    } 
    </script> 



    <p>Application Details:</p> 
    <p> 
    <textarea name="textarea" id="textarea" rows="10" cols="30" ></textarea> 
    </p> 
    <p> 
    <input name="submit" type="submit" id="submit2" formmethod="POST" value="Submit"> 
    </p> 
    <p>&nbsp;</p> 

</form> 



</body> 
</html>

我只做了第一個選擇選項的代碼。但是我在myfunc中編寫的部分代碼會在另一個窗口中打開。我想以某種方式進行編碼，即對於每個特定選項，附加代碼將在選擇標記結束後和附加信息標記之前的同一表單上打開。如何使用JavaScript在條件下使用JavaScript嵌入HTML表單

我在做什麼錯。

來源

2015-11-16 Ahmed Rik

是否可以接受這些額外的隱藏字段，並在需要時然後簡單地告訴他們？ – laylarenee

歡迎來到SO！當您遇到代碼問題時，請嘗試在以下結構中發佈您的問題：您正在嘗試執行的操作 - 您嘗試過的操作 - 哪些操作不起作用以及操作不起作用。它可以幫助我們幫助你！ –

我也認爲有一個隱藏的窗體，只是使其可見會更簡單。 –

我會建議將您的所有條件必需的字段爲div。然後使用JavaScript來確定是否顯示div或不。這消除了手動創建HTML節點的需求，這可能很麻煩。

如果用戶多次在選擇列表中選擇相同的選項，您還需要考慮其影響......它將不斷添加節點，這是不好的。

相關的代碼片段：

<div id='extra_questions' style='display: none; background-color: #0094ff;'> 
     <!-- add radio buttons or whatever here --> 
     Question #1<br /> 
     Question #2<br /> 
     Etc.<br /> 
    </div> 

    <script type="application/javascript"> 
     function myfunc() { 
      var Appread = document.forms[0].appselect.value; 
      if (Appread.localeCompare("Course_Application") == 0) { 
       document.getElementById('extra_questions').style.display = 'block'; 
      } else { 
       document.getElementById('extra_questions').style.display = 'none'; 
      } 
     } 
    </script>

來源

2015-11-16 14:08:51 laylarenee

讓我試試我會回覆你 –

這樣的運氣呢？ – laylarenee

是的！它工作得非常好，足以滿足我的目的。謝謝 –

你正在倒退。 :-)

您正在使用document.write編寫代碼。你認爲這個代碼在哪裏？

（請記住，JavaScript是當你選擇一個選項改變執行。）

末的文件？（我已經設定了它的標籤）

將「活」元素添加到頁面的正確方法是創建新的DOM元素。

它在開始時可能看起來令人望而生畏，但要一試身手。

我建議從這裏開始（並避免W3Schools的）：

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

來源

2015-11-16 13:58:45

試試這個。

在</select>標記後添加此標記。

<option value="SA_Applications">Student Affair Application</option> 
</select> 
</p> 
<div id="ApplicationTypeResult"></div>

然後，保存爲testresult.html在同一個文件夾中。

<p><label><input type='radio' class='CARadio' name='CAType' value='drop' id='CAType_0'>Drop</label><br> 
<label><input type='radio' class='CARadio' name='CAType' value='withdraw' id='CAType_1'>Withdraw</label><br> 
<label><input type='radio' class='CARadio' name='CAType'>Other</label><br></p> 
<p>If Other Please Specify:</p> 
<p><textarea name='txfdCApp' id='txtCAP'></textarea></p>

然後試試這個。

function myfunc() { 
    var Appread = document.forms[0].appselect.value; 
    if(Appread.localeCompare("Course_Application")==0) { 
     document.getElementById("ApplicationTypeResult").innerHTML = '<object type="text/html" data="testresult.html"></object>'; 
}

如果通過

function myfunc() { 
    var Appread = document.forms[0].appselect.value; 
    if(Appread.localeCompare("Course_Application")==0) { 
     $("#ApplicationTypeResult").load("testresult.html"); 
}

希望這有助於使用jquery會更容易，請改變你的DIV ID名稱爲任何你可能需要並注意路徑名。無論您可能保存文件。

預期的行爲將會是這樣（簡單）。

來源

2015-11-16 14:01:52

如果你可以請指定。我試過了，但它不起作用。這給了我一個錯誤。 –

你得到了什麼錯誤？ –

它很好用！謝謝你馬克！ –

如何使用JavaScript在條件下使用JavaScript嵌入HTML表單

回答

相關問題