2013-03-22 3 views
0

나는 사용자가 선택한 것에 따라 결과를 표시하는 양식을 만들었습니다. if 문을 함께 넣어 특정 값을 선택할 때 데이터 시트 1을 출력하려고합니다. 누군가가 525과 134과 290을 선택할 때 다른 여기에 나에게 시트 (3)를주고 내 코드 나에게 시트 1을주고 싶다 : 사전에성명서가 정의되지 않은 결과를내는 경우

<form name="test" id="test""> 
    <label for="select1">Height in (mm)</label> 
     <select name="division-select" id="height"> 
     <option label="Please Select"></option> 
      <option value="525">525 or less</option> 
      <option value="645">645 or less</option> 
      <option value="1265">up to 1265</option> 
      <option value="1270">more than 1265</option> 
     </select> 
     <label for="select1">Width in (mm)</label> 
     <select name="division-select" id="width"> 
     <option label="Please Select"></option> 
      <option value="134w">134 or less</option> 
      <option value="190w">190 or less </option> 
      <option value="290w">290 or less</option> 
      <option value="328w">328 or less</option> 
      <option value="420w">420 or more</option> 
     </select> 
     <Br> 
     <br> 
     <label for="select1">Depth in (mm)</label> 
     <select name="division-select" id="depth"> 
     <option label="Please Select"></option> 
      <option value="134d">134 or less</option> 
      <option value="190d">190 or less </option> 
      <option value="290d">290 or less</option> 
      <option value="328d">328 or less</option> 
      <option value="420d">420 or more</option> 
     </select> 
     <br><br> 
     <h2>Or select by load</h2> 
     <label for="select1">Load in (kN)</label> 
     <select name="division-select" id="load"> 
      <option label="Please Select"></option> 
      <option value="2-5">2.5 or less</option> 
      <option value="5">5 or less </option> 
      <option value="10">10 or less</option> 
      <option value="25">25 or less</option> 
      <option value="50">50 or more</option> 
     </select> 
     <br> 
     <p><input type="button" onclick="calculate();" value="Find your Datasheet" /><input type="button" onclick="formReset()" value="Reset form"></p> 

</form> 
<div id="result"> 
</div> 
<script type="text/javascript"> 
function calculate() { 
    var height = document.getElementById('height').value; 
    var width = document.getElementById('width').value; 
    var depth = document.getElementById('depth').value; 
    var load = document.getElementById('load').value; 
    if (document.getElementById("height").value == "") { 
     var heightmsg = "Please select your sample's height."; 
     document.getElementById("result").innerHTML = heightmsg; 
     return false; 
    } 
    if (document.getElementById("width").value == "") { 
     var widthmsg = "Please select your sample's width."; 
     document.getElementById("result").innerHTML = widthmsg; 
     return false; 
    } 
    if (document.getElementById("depth").value == "") { 
     var depthmsg = "Please select your sample's depth."; 
     document.getElementById("result").innerHTML = depthmsg; 
     return false; 
    } 
    if (height === "525" && width === "134" && depth === "290") { 
     if (height === "525" && width === "290" && depth === "134") { 
      var str = '<a href="#">Download your Datasheet 1</a>'; 
     } else { 
      var str = '<a href="#">Download your Datasheet 3</a>'; 
     } 
    } else if (height == 1270) { 
     var str = "This configuration is beyond the standard range of top-load testers. Please contact Mecmesin Sales to discuss ways to meet your requirements."; 
    } 
    document.getElementById("result").innerHTML = str; 
} 

function formReset() { 
    document.getElementById("test").reset(); 
} 
</script> 

감사합니다.

+1

작동하지 않는 기능은 무엇입니까? – Bergi

+0

높이 525와 너비 134, 높이 290을 선택하면 정의되지 않은 결과가 나타납니다. ( – Codeninja

답변

3

너비와 깊이 값의 끝은 w와 d (예 : <option value="190d">)이지만 if 조건 (if (height === "525" && width === "134" && depth === "290"))에서는 확인하지 않습니다. 이 같은 값 밖으로 w와 D를 가지고 :

<select name="division-select" id="width"> 
    <option label="Please Select"></option> 
    <option value="134">134 or less</option> 
    <option value="190">190 or less</option> 
    <option value="290">290 or less</option> 
    <option value="328">328 or less</option> 
    <option value="420">420 or more</option> 
</select> 

jsFiddle example

사이드 참고 :이 사실이 될 수 없을 것으로 보인다 조건이 있습니다

if (height === "525" && width === "134" && depth === "290") { 
    if (height === "525" && width === "290" && depth === "134")... 
+0

어떻게하면됩니까? 테스트 한 결과 데이터 시트 1을주는 대신 데이터 시트 3을주는 이유는 무엇입니까? – Codeninja

+0

방금 ​​추가 한 메모를 참조하십시오. – j08691

+1

고마워요. 지금은 이해가됩니다. – Codeninja

1
if (height === "525" && width === "134" && depth === "290") { 
    if (height === "525" && width === "290" && depth === "134") { 

은 의미가 없습니다. 첫 번째 조건이 참이면 두 번째 조건은 결코 될 수 없습니다. 난 당신이 또한 당신의 <option> 태그의 값이 wd 접미사되는 것을 알, 그래서 그들은 접미사가없는 숫자와 동일하지 않습니다

if (height === "525" && width === "290" && depth === "134") 
    var str = '<a href="#">Download your Datasheet 1</a>'; 
else if (height === "525" && width === "134" && depth === "290") 
    var str = '<a href="#">Download your Datasheet 3</a>'; 
else if (height == 1270) 
    var str = "This configuration is beyond the standard range of top-load testers. Please contact Mecmesin Sales to discuss ways to meet your requirements."; 

을 원하는 것 같아요.

+0

답장을 보내 주셔서 감사합니다. 그것은 정확했지만 불행히도 나는 둘 다 선택할 수 없습니다 : P – Codeninja

0

if 문이 너무 많아서 세 개의 선택 입력 (폭, 높이, 깊이)에서 모든 옵션에 대해 별도의 링크를 지정하려는 경우 4x5x5 = 100 if 문으로 끝납니다. 이 문제를 해결하는 가장 쉬운 방법은 모든 값과 특화된 링크가있는 mysql 데이터베이스를 만드는 것이다. XML 또는 JSON 배열을 사용할 수도있다.

빈 선택 입력 검증을 위해 다음을 사용할 수 있습니다 JSON의 예를 들어

var height = document.getElementById('height'), 
    width = document.getElementById('width'), 
    depth = document.getElementById('depth'), 
    load = document.getElementById('load'), 
    result = document.getElementById('result'), 
    arr = [height, width, depth], 
    error = "Please select your sample's "; 

for (var i = 0; i < arr.length; i++) { 
    var t = arr[i].id; 
    if (arr[i].value == "") result.innerHTML = error + t; 
    return false; 
} 

는 jsfiddle에 데모 here를 참조하십시오.

관련 문제