フォームを送信する前に非表示フィールドの値を強制的に変更する

Question

投稿時に非表示フィールドの値をJavaScriptで変更しようとしています。私のページには2つのボタンがあり、1つはホームページ（index.php）に戻り、もう1つはデータ入力用の最初のページ（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> 

Javascriptを

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]

しかし、方法のどれも私のために働いていませんでした。

実用的な解決策がありますが、私はこれらの2つのボタンを保持したいのですが、"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();をコメントアウトしてコンソールに表示してください。それにもかかわらず、サーバーから新しいページをロードすることを意味するフォームを投稿していることに注意してください。この新しいページは、あなたの「goHome」値には無関心です。 「goHome」の値は、同じページにいる間のみ存在します。あなたのDOMが "再作成"されると、あなたはそれを失います。

P.S.2：

• getGoValue();内部のあなたのreturn true;は私の 例では必要ありません。削除することができます。あなたのonclick = "return getGoValue(true)"で
• returnも必要ありません であり、あなたはそれを

P.S.3を削除することができます この回答は、そのままあなたのコードのほとんどを保つことに焦点を当てています。現時点ではinputsをフォームの外に持っている必要はありません。type="submit"の場合は<button>に変更し、onClickイベント（またはListeners）に変更する必要があります。