드롭 다운 상자에서 양식 기본 채우기

드롭 다운 상자에서 값을 선택하면 다른 필드가 채워지는 도구를 구축하고 있습니다. 만약 (a)가 선택되었다고 가정하면 2 3과 4가 양식으로 표시됩니다 하지만 (b)가 선택되면 필드 2 3 4뿐만 아니라 추가 필드 5와 6도 추가됩니다. 현재 2 필드 3과 4와 2 필드 1과 2 3 4 5와 2 양식 중 하나를 가지고 작업하고 있습니다. 및 6. 드롭 다운 목록 (a 또는 b)에서 값 선택에 따라 두 가지 양식이 표시되거나 숨겨집니다.드롭 다운 상자에서 양식 기본 채우기

그러나 예상대로 수행되지 않습니다.

HTML은

<html> 
<head> 
<title>My Page</title> 
</head> 
<body> 
<center><h1>URL Builder</h1></center> 
<div align="center"> 
<select id ="Type1" name="Aoldropdown"> 

<option value="Fixed">Fixed Ad Units</option> 
<option value="Scrolled">Scrolled Ad Units</option> 
<option value="Custom">Custom Ad Units</option> 
</select> 
<form name="Aolform" id ="aol1" action="/URLBuilder/URLRetriever" method="GET"> 

<select name="Sizedropdown"> 
<option value="300x1050">300x1050</option> 
<option value="300x600">300x600</option> 
<option value="300x250">300x250</option> 
<option value="728x90">728x90</option> 
<option value="970x250">970x250</option> 
<option value="320x50">320x50</option> 
<option value="768x90">768x90</option> 
<option value="1024x90">1024x90</option> 

</select> 

<br></br> 
    Base URL:<input type="text" name="baseURL"><br> 
    Title Number:<input type="text" name="titleNo"><br> 
    Placement ID: <input type="text" name="placementId"><br> 
    Flight ID: <input type="text" name="flightId"><br> 
    <input type="submit" value="Retrieve URL"> 
<!-- input type = "submit" Value ="Select URL Type"--> 
</div> 
</form> 
<form name="Aolform2" id ="aol2" action="/URLBuilder/URLRetriever" method="GET"> 

<select name="Sizedropdown"> 
<option value="300x1050">300x1050</option> 
<option value="300x600">300x600</option> 
<option value="300x250">300x250</option> 
<option value="728x90">728x90</option> 
<option value="970x250">970x250</option> 
<option value="320x50">320x50</option> 
<option value="768x90">768x90</option> 
<option value="1024x90">1024x90</option> 

</select> 

<br></br> 
    Placement ID: <input type="text" name="placementId"><br> 
    Flight ID: <input type="text" name="flightId"><br> 
    <input type="submit" value="Retrieve URL"> 
<!-- input type = "submit" Value ="Select URL Type"--> 
</div> 
</form> 
<script type ="text/javascript"> 
var forms = document.forms['Aolform']; 
//console.log(forms); 
//console.log(forms.elements); 
document.getElementById("Type1").addEventListener("onchange",onDropDownChange,true); 

if(document.getElementById("Type1").value =='Custom'){ 

    document.getElementById('aol1').style.visiblity='visible'; 
    document.getElementById('aol2').style.visibility='hidden'; 


     } 
    else 
     { 
     document.getElementById('aol2').style.visibility='visible'; 
     document.getElementById('aol1').style.visibility='hidden'; 

     } 

</script> 
</body> 
</html>

날이 문제를 해결 도와주세요입니다. 내가 할 수있는 다른 방법이 있습니다.

감사 자치

출처

2014-01-08 Swaraj Chhatre

체크 아웃 this fiddle을 확인하십시오. 몇 가지 변경을 한 후 onchange 대신 change을 사용합니다. 또한 당신은 존재하지 않는 기능 onDropDownChange()를 참조하고, 그래서 나는 그 안에 당신의 상태를 뒀다 : 나는 또한 이렇게 style.display 대신 style.visibility의를 사용하는 기능을 변경

function onDropDownChange() { 
    if (document.getElementById("Type1").value == 'Custom') { 
     document.getElementById('aol1').style.display = 'none'; 
     document.getElementById('aol2').style.display = 'block'; 
    } else { 
     document.getElementById('aol2').style.display = 'none'; 
     document.getElementById('aol1').style.display = 'block'; 
    } 
}

위의 간격을하지 않아도 두 번째 양식이 표시됩니다.

출처

2014-01-08 17:38:38 Goose

APache 톰캣에 전체 웹 응용 프로그램이 렌더링 될 때 우려되는 것은 두 가지 양식을 보여줍니다. 다른 것들을 선택할 때만 두 양식 중 하나가 차단/표시됩니다. 두 가지 양식 DropDown의 입력에 따라 양식 중 하나가 채워집니다. –

두 폼을 처음에 숨기고 싶다면, 각'form' 태그에'display : none'의 스타일을 지정하십시오. – Goose

그래서 내가 한 것은 두 가지 양식에 대한 것입니다. 나는 style = "display : none"을 추가했습니다. 그러나 값을 변경하면 어떤 forms도 보지 않을 것입니다. 양식은 모두 숨겨져 있습니다. –

네, 당신이 원하는 것을 할 수있는 많은 방법이 있습니다,하지만 난 당신이 지금까지 무엇을했는지에 따라 똑바로 대답을거야. 이벤트 OnChange에 의해 조건부가 트리거되지 않으므로 스크립트가 올바르지 않습니다. 다음과 같이 시도하십시오.

document.getElementById("Type1").onchange = function() { 
    if(document.getElementById("Type1").value =='Custom'){ 
     document.getElementById('aol1').style.visiblity='visible'; 
     document.getElementById('aol2').style.visibility='hidden'; 
    } 
    else 
    { 
     document.getElementById('aol2').style.visibility='visible'; 
     document.getElementById('aol1').style.visibility='hidden'; 
    } 
}

"if"조건의 동작을 확인하여 실제로 원하는지 확인해야합니다.

출처

2014-01-08 17:33:22 LcSalazar

드롭 다운 상자에서 양식 기본 채우기

답변

관련 문제