从选择框选项中调用javascript

时间:2014-03-30 21:15:54

标签: javascript html drop-down-menu event-handling selection

我需要使用两个表单,并从下拉列表中调用与选择相关联的表单。

我尝试了这个(原始代码在底部)但它仍然无效。我究竟做错了什么!?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>ASchmick form assignment</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href="alschmick2.css" rel="stylesheet" type="text/css" />

</head>

<body>
  <h1>Contact Me</h1>

  <h2>I'd love your feedback!</h2>

  <h3>Please choose what you would like to do:</h3>
  <p>
    <select size="1" name="choose" id="mySelect" on change="changeForm()">  
      <option value="review">Submit a review of the site</option>
      <option value="question">Submit a question</option>
    </select>
  </p>

<script>
 function changeForm() {
  var form = document.getElementById('myForm');
  var select = document.getElementById('mySelect');
  var p = document.getElementById('myScript');

  if (select.value == 'question') {
    p.innerHTML = '<script src="question.js"></script>';
    form.action = 'http://cdlwebsysdev.esc-atsystems.net/wsd/form-to-email.php';
  } else {
    p.innerHTML = '<script src="review.js"></script>';
    form.action = 'http://cdlwebsysdev.esc-atsystems.net/wsd/form-to-email.php';
  }
  }
</script>

</body>

</html>

原始问题: 根据用户从下拉菜单中选择的选项,我希望显示特定的表单。我遗漏了一些元素或变量或定义,我无法弄明白!

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

   <head>
      <title>Dynamic HTML and Form Validation assignment</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <link href="alschmick2.css" rel="stylesheet" type="text/css" /> 
   </head>

   <body>
     <h1>Contact Me</h1>

     <h2>I'd love your feedback on my site or for you to submit a problem that I can help solve!</h2>

     <h3>Please choose what you would like to do:</h3>
     <p>
        <select size="1" name="choose" id="choose">
             <option value="review" >Submit a review of the site</option>
             <option value="question" >Submit a question</option>
        </select>
     </p>

<script type="text/javascript" > 
        if (onchange.choose="review")
        { 
         <form name="review" id="review" method="post" action="http://cdlwebsysdev.esc-atsystems.net/wsd/form-to-email.php">
           <table>
             <tr>
             <td>Name: </td>
             <td><input type="text" name="CustName" id="CustName" size="50" /></td>
             </tr>

             <tr>
             <td>Street: </td>
             <td><input type="text" name="CustStreet" id="CustStreet" size="50" /></td>
             </tr>

             <tr>
             <td>City: </td>
             <td><input type="text" name="CustCity" id="CustCity" size="25" /></td>
             </tr>

             <tr>
             <td>State: </td>
             <td><input type="text" name="CustState" id="CustState" size="5" /></td>
             </tr>

             <tr>
             <td>Zip: </td>
             <td><input type="text" name="CustZip" id="CustZip" size="15" maxlength="10" value="#####-####" /></td>
             </tr>

             <tr>
             <td>E-mail: </td>
             <td><input type="text" name="CustEmail" id="CustEmail" size="50"/></td>
             </tr>

             <tr>
             <td>Phone: </td>
             <td><input type="text" name="CustPhone" id="CustPhone" size="20" maxlength="12" value="###-###-####" /></td>
             </tr>

             <tr>
             <td>Do you want to be contaced by email or telephone?<br />
             <input type="checkbox" name="Email" id="Email" value="yes" /> Email<br />
             <input type="checkbox" name="Telephone" id="Telephone" value="yes" /> Telephone<br /> 
             </td>
             </tr>

             <tr>
             <td colspan="2">Please describe your problem:<br />
             <textarea rows="10" cols="60" name="CustComment" id="CustComment">Please let me know your thoughts!</textarea></td>
             </tr>

             <tr>
             <td>From: </td>
             <td><input type="text" name="FromAddress" size="50" /></td>
             </tr>

             <tr>
             <td><input type="submit" value="Submit" /></td>
             <td><input type="reset" /></td>
             <td><input type="hidden" name="ToAddress" value="alschmick@roadrunner.com" /></td>
             <td><input type="hidden" name="CCAddress" value=" " /></td>
             <td><input type="hidden" name="Subject" value="Comments" /></td>
             </tr>

            </table>
          </form>
         }
        </script>

<script type="text/javascript" >
        if (onchange.choose="question")
        {
        <form name="question" id="question" method="post" action="http://cdlwebsysdev.esc-atsystems.net/wsd/form-to-email.php"> /*------- this form allows user to submit a question----------*/
          <table>
             <tr>
             <td>Name: </td>
             <td><input type="text" name="CustName" id="CustName" size="50" /></td>
             </tr>

             <tr>
             <td>Street: </td>
             <td><input type="text" name="CustStreet" id="CustStreet" size="50" /></td>
             </tr>

             <tr>
             <td>City: </td>
             <td><input type="text" name="CustCity" id="CustCity" size="25" /></td>
             </tr>

             <tr>
             <td>State: </td>
             <td><input type="text" name="CustState" id="CustState" size="5" /></td>
             </tr>

             <tr>
             <td>Zip: </td>
             <td><input type="text" name="CustZip" id="CustZip" size="15" maxlength="10" value="#####-####" /></td>
             </tr>

             <tr>
             <td>E-mail: </td>
             <td><input type="text" name="CustEmail" id="CustEmail" size="50"/></td>
             </tr>

             <tr>
             <td>Phone: </td>
             <td><input type="text" name="CustPhone" id="CustPhone" size="20" maxlength="12" value="###-###-####" /></td>
             </tr>

             <tr>
             <td>Do you want to be contaced by email or telephone?<br />
             <input type="checkbox" name="Email" id="Email" value="yes" /> Email<br />
             <input type="checkbox" name="Telephone" id="Telephone" value="yes" /> Telephone<br /> 
             </td>
             </tr>

             <tr>
             <td colspan="2">Please describe your problem:<br />
             <textarea rows="10" cols="60" name="CustComment" id="CustComment">Please describe your problem or question.</textarea></td>
             </tr>

             <tr>
             <td>From: </td>
             <td><input type="text" name="FromAddress" size="50" /></td>
             </tr>

             <tr>
             <td><input type="submit" value="Submit" /></td>
             <td><input type="reset" /></td>
             <td><input type="hidden" name="ToAddress" value="alschmick@roadrunner.com" /></td>
             <td><input type="hidden" name="CCAddress" value=" " /></td>
             <td><input type="hidden" name="Subject" value="Comments" /></td>
             </tr>

            </table>
          </form>
        }
        </script> 
      </body>
    </html> 

我已尝试过各种方法使用java脚本调用表单。上面的乱语只是我最近的尝试。我还尝试过document.write和其他一些东西,以及将表单保存在单独的js文件中并尝试以这种方式调用它们,但我错过了重要的步骤,我无法弄清楚它们是什么。

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:0)

两种形式之间没有太大差异。也许您只能使用一个表单并使用选择框的onchange事件更改属性值。

我给你留下一个plunker的例子。希望它有所帮助。

我建议您阅读HTML5指南,了解一些最佳做法。