Erzwingen einer Änderung im Wert des ausgeblendeten Felds vor dem Senden eines Formulars

Question

Ich versuche, den Wert eines ausgeblendeten Felds bei der Übergabe durch JavaScript zu ändern. Auf meiner Seite befinden sich zwei Schaltflächen, eine für die Rückkehr zur Homepage (index.php) und eine weitere für die Rückkehr zur ersten Seite für die Dateneingabe (addData.php). Ich versuche ein verstecktes Feld mit der ID "goHome" zu verwenden, um die Routen zu steuern. Meine Codes sind wie folgt aus:

HTML (Form nur)

<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; 
} 

Vor diesem ich viele andere Versionen versucht haben und ich refered auf diese wenigen Fragen:

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]

Aber keine der Methoden für mich gearbeitet haben. Für praktische Zwecke gibt es einen Workaround dafür, aber ich möchte wissen, ob ich diese beiden Buttons behalten möchte, wie soll mein Code geändert werden, damit der Wert "goHome" geändert werden kann, bevor das Formular abgeschickt wird? Nach vielen Versuchen bekomme ich immer noch $_POST["goHome"] = "".

Warum wird das Formular auch gesendet, bevor der Wert tatsächlich geändert wird, wenn der Code davor platziert wird?

Danke!

BTW, keine jQuery bitte.

Answer 1

Verschiedene Möglichkeiten, dies zu erreichen. Beachten Sie jedoch zuerst, dass Sie type="submit"<input> innerhalb einer <form> verwenden, und das bedeutet, dass sie das Formular unabhängig von einem onclick-Ereignis automatisch ablegen werden oder nicht.

Eine so viel wie weniger aufdringlich (an Ihrem Code) Art und Weise ist die folgende:

die einreichen Eingaben von dem Formular wie folgt herausnehmen:

Beispiel:

<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)"/> 

Ändern Sie Ihre getGoValue() und checkNSub() Funktionen wie folgt:

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; 
} 

Probieren Sie es aus.

S.S: Ein paar console.logs, so dass Sie den Wert ändern können. Kommentieren Sie checkNSub();, um sie in Ihrer Konsole zu sehen. Bedenken Sie jedoch, dass Sie ein Formular posten, was bedeutet, dass Sie eine neue Seite vom Server laden werden. Diese neue Seite wird unabhängig von Ihrem "goHome" -Wert sein. Der Wert "goHome" existiert nur, wenn Sie sich auf derselben Seite befinden. Sobald Ihr DOM "neu erstellt" wird, verlieren Sie es.

P.S.2:

• Ihre return true; innerhalb des getGoValue(); ist nicht in meinem Beispiel benötigt. Sie können es entfernen.
• die return in Ihrem onclick = "return getGoValue(true)" ist auch nicht erforderlich, und Sie können es

P.S.3 entfernen: meisten Code auf intakt zu halten Diese Antwort wird konzentriert. In Wirklichkeit, dass Sie jetzt Ihre inputs außerhalb des Formulars haben, müssen sie nicht von type="submit" sein. Sie sollten sie zu <button> mit onClick Ereignisse (oder Listeners) ändern.