양식을 제출하기 전에 숨겨진 필드의 값을 강제로 변경하십시오.

Question

JavaScript로 제출시 숨겨진 필드의 값을 변경하려고합니다. 내 페이지에는 두 개의 버튼이 있습니다. 하나는 홈 페이지 (index.php)로, 다른 하나는 데이터 입력 첫 번째 페이지로 돌아 가기위한 버튼입니다 (addData.php). 나는 호랑이를 통제하기 위해 ID가 "goHome" 인 숨겨진 필드를 사용하려고합니다. 내 코드는 다음과 같습니다

:

HTML (양식 만) 나는 많은 다른 버전을 시도하고 난 다음 몇 가지 질문에 대해 참조이 전에

<form name = "addDataReal" id = "addDataReal" method = "POST" action = "addDataProc.php" onsubmit="return checkNSub()"> 
     <!-- Other items --> 
     <input type = "submit" name = "submitBtnF" id = "submitBtnF" class="shortText" style = "width: 120px;" value = "Submit + Home" onclick = "return getGoValue(true)"/> 
     <input type = "submit" name = "submitBtnR" id = "submitBtnT" class="shortText" style = "width: 120px;" value = "Submit + Next" onclick = "return getGoValue(false)"/> 
     <input type = "hidden" name = "goHome" id = "goHome" value = "" /> 
    </div> 
</form> 

자바 스크립트

function checkNSub() { 
    //form validation functions 
    //OK then return true 
    //Not then return false 
} 
function getGoValue(goHome) { 
    if (goHome) { 
     document.getElementById("goHome").value = "true"; 
    } else { 
     document.getElementById("goHome").value = "false"; 
    } 
    return true; 
} 

Set form hidden value on submit

Setting a form variable value before submitting

How to change the value of hidden input field before submitting [SOLVED]

그러나 방법 중 어느 것도 나를 위해 작동하지 않았다.

실용적인 해결 방법이 있지만이 두 단추를 유지하려면 양식을 제출하기 전에 "goHome" 값을 변경할 수 있도록 내 코드를 어떻게 수정해야합니까? 많은 시도 후에 나는 아직도 $_POST["goHome"] = ""을 얻고 있습니다.

또한 코드가 이전에 배치되었을 때 값이 실제로 변경되기 전에 양식이 제출되는 이유는 무엇입니까?

감사합니다!

Btw, 아니 jQuery하시기 바랍니다.

Answer 1

다양한 방법으로이를 수행 할 수 있습니다. 첫째, <form> 안에 type="submit"<input>을 사용하고 있으며, 이는 onclick 이벤트와 상관없이 자동으로 양식을 제출한다는 것을 명심하십시오.

같은 폼에서 제출 입력을 꺼내 :

예 :

<form name = "addDataReal" id = "addDataReal" method = "POST" action = "whatever.php"> 
     <!-- Other items --> 
     <input type = "hidden" name = "goHome" id = "goHome" value = "" /> 
    </div> 
</form> 

<input type = "submit" name = "submitBtnF" id = "submitBtnF" class="shortText" style = "width: 120px;" value = "Submit + Home" onclick = "return getGoValue(true)"/> 
<input type = "submit" name = "submitBtnR" id = "submitBtnT" class="shortText" style = "width: 120px;" value = "Submit + Next" onclick = "return getGoValue(false)"/> 

을

하나 (코드에) 덜 침입만큼 방법은 다음과 같다 getGoValue() 및 checkNSub() 기능을 다음과 같이 변경하십시오.

function checkNSub() { 
    //form validation functions 
    //OK then return true 
    //Not then return false 
    var myForm = document.getElementById('addDataReal'); 
    myForm.submit(); 
} 

function getGoValue(goHome) { 
    if (goHome) { 
     document.getElementById("goHome").value = "true"; 
     console.log(document.getElementById("goHome").value); 
     checkNSub(); 
    } else { 
     document.getElementById("goHome").value = "false"; 
     console.log(document.getElementById("goHome").value); 
     checkNSub(); 
    } 
    return true; 
} 

사용해보기.

p.s : 두 개가 console.logs이므로 변경 값을 확인할 수 있습니다. 콘솔에 표시하려면 checkNSub();을 주석으로 처리하십시오. 그럼에도 불구하고 서버에서 새 페이지를로드한다는 것을 의미하는 Form을 게시한다는 것을 명심하십시오.이 새 페이지는 "goHome"값과 관련하여 불가지론 할 것입니다. "goHome"값은 같은 페이지에있는 동안에 만 존재합니다. DOM을 "다시 만들면"잃게됩니다.

P.S.2는 :

• 귀하의 getGoValue(); 내부 return true;은 내 예에 필요하지 않습니다. 제거 할 수 있습니다. 당신의 onclick = "return getGoValue(true)"에서
• return도 필요하지 그리고 당신은 그것을

P.S.3을 제거 할 수 있습니다 이 응답은 그대로 코드의 대부분을 유지에 초점을 맞추고 있습니다. 사실 이제는 양식 외부에 inputs이 있으니 type="submit" 일 필요가 없습니다. <button>으로 바꾸고 onClick 이벤트 (또는 Listeners)로 변경해야합니다.