2017-12-22 5 views
0

이 코드는 수신 거부 양식 용이며 초기 시작시 확인란을 선택했는지 여부를 토글해야하며 사용자 선택에 따라 값을 변경해야합니다.텍스트 상자의 값을 변경하는 JavaScript

기본적으로 저는 이메일 플랫폼을 통해 HTML에 값을 전달하고 있습니다. 값이 I 인 경우 확인란과 값 I가 선택되어야합니다. 값이 O이면 확인란을 선택하지 않고 O 값을 지정하면 안됩니다.

데이터가 Google 이메일 플랫폼으로 다시 전달되도록하려면 값을 캡처하기 위해 숨겨진 입력을 사용해야하며, 그렇지 않으면 실제로 I 또는 O를 돌려 보내지 않습니다.

내가 머리에 태그로이 자바 스크립트 (HTML 이메일)

var initValue = function() { 
    var permStat = document.getElementById("emailPref").value 
    if(permStat === "I"){ 
     document.getElementById("checkbox").checked = true; 
    } else { 
     document.getElementById("checkbox").checked = false; 
    } 
    } 
    var changeValue = function(){ 
    var optValue = document.getElementById("checkbox").value; 
    if(optValue === "I"){ 
     document.getElementById("checkbox").value = "O"; 
     document.getElementById("emailPref").value = "O"; 
     document.getElementById("checkbox").checked = false; 
    } else { 
     document.getElementById("checkbox").value = "I"; 
     document.getElementById("emailPref").value = "I"; 
     document.getElementById("checkbox").checked = true; 
    } 
    } 

스타일을 전환하기위한 눈에 보이는 라벨 (사용 CSS 전용)

<input type="checkbox" id="checkbox" name="emailPerm" value="$EMAIL_PERMISSION_STATUS_$" onload="initValue();" onclick="changeValue()"> 
<label class="toggle" for="checkbox"></label> 

숨겨진 입력, 이메일 플랫폼에 데이터를 다시 전달하는 입력

<input type="hidden" id="emailPref" name="EMAIL_PERMISSION_STATUS_" value="$EMAIL_PERMISSION_STATUS_$"> 

추가 정보는 로딩에

내가 가치로,이로 나타납니다 (이는 "O"값이 될 것이다) :이 상태 후, 클릭에

enter image description here

, 값은 "O"로 설정되고 스타일은 동일하게 유지됩니다. 두 번째 클릭에 값이 제대로 "I"와 디스플레이로 돌아갑니다 :

enter image description here

**이 명백한 실수 인 경우 I는 일반적으로 HTML 이메일에 있지만 이후 자바 스크립트를 사용할 수 없기 때문에 내가 미리 사과 이것은 기술적으로 방문 페이지로 표시되며 작동합니다.

감사합니다.

+0

서버의 데이터로 숨겨진 입력을 설정하는 경우 동일한 데이터에 따라 선택되는 입력을 간단하게 만들 수 없습니까? – zfrisch

+0

@zfrisch 예, initValue 함수가 수행하고자하는 작업입니다. 그것은 그것의 가치를 끌어 당기고 _supposed_는 체크의 가치를 조정하는 것이지만 그것은 그렇지 않습니다. –

답변

1

onload은 확인란의 유효한 속성이 아닙니다. 이 때문에 귀하의 initValue은 절대 실행되지 않습니다. 요소 아래에 스크립트 태그를 추가하십시오.

<script> 
// self executing function here 
(function() { 
    initValue(); 
})(); 
</script> 
관련 문제