2014-03-30 2 views
-1

두 가지 양식을 사용해야하며 드롭 다운 목록의 선택 항목과 관련된 것이 필요합니다.선택 상자 옵션에서 javascript 호출

대신이 코드 (아래쪽의 원래 코드)를 시도했지만 여전히 작동하지 않습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까!?

<!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="[email protected]" /></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="[email protected]" /></td> 
      <td><input type="hidden" name="CCAddress" value=" " /></td> 
      <td><input type="hidden" name="Subject" value="Comments" /></td> 
      </tr> 

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

나는 자바 스크립트를 사용하여 양식을 호출하는 모든 종류의 방법을 시도했다. 위의 수수께끼는 단지 나의 최근 시도입니다. 또한 document.write와 몇 가지 다른 작업을 시도해 보았습니다. 양식을 별도의 js 파일에 저장하고 이러한 방식으로 호출하려고했지만 중요한 단계가 누락되어 있으며 그 내용을 파악할 수 없습니다.

도움을 주시면 감사하겠습니다.

답변

0

두 양식간에 큰 차이는 없습니다. 어쩌면 하나의 양식 만 가질 수 있고 선택 상자의 onchange 이벤트로 속성 값을 변경할 수 있습니다.

일반적인 예를 들어 plunker으로 남겨 둡니다. 희망이 도움이됩니다.

우수 사례를 보려면 HTML5 가이드를 읽어 보는 것이 좋습니다.

+0

사실, 두 양식이 거의 동일합니다. 두 양식을 숨기고 선택한 옵션을 선택할 때 선택한 양식 만 웹 사이트에 표시해야합니다. – user3479073

+0

두 개의 독립된 양식을 사용하려는 경우에 대비하여 다른 [plunker] (http://plnkr.co/edit/m3hIP4DVrvAKkSUkbiEi?p=preview)를 만들었습니다. – nigal

관련 문제