Verwenden von onclick für eine Schaltfläche senden

Question

Ich habe mehrere Senden-Schaltflächen. Soweit es die PHP betrifft, tun sie das gleiche, senden Eingabedaten an die Datenbank. Aber ich will auch etwas Javascript laufen lassen, wenn bestimmte Knöpfe angeklickt werden und ich Probleme habe.

html:

<div id="btnGroup"> 
    <input type="submit" id= "btn1" value="6 seats" onclick="myFunction()"/> 
    <input type="submit" id= "btn2" value="6 seats" onclick="myFunction()"/> 
    <input type="submit" id= "btn3" value="6 seats" onclick="myFunction()"/> 
    <input type="submit" id= "btn4" value="6 seats" onclick="myFunction()"/> 
    <input type="submit" id= "btn5" value="6 seats" onclick="myFunction()"/> 
    <input type="submit" id= "btn6" value="6 seats" onclick="myFunction()"/>  
</div> 

js:

function myFunction(){ 
    alert("button clicked"); 
} 

die Funktion ist nicht das, was ich am Ende will es ist nur etwas einfach zu testen, ob es funktioniert.

Falls dies relevant ist, funktioniert der mit den Tasten verknüpfte php einwandfrei. Sobald eine Schaltfläche angeklickt ist, gehe ich zu einer anderen Seite, die mir im Wesentlichen sagt, dass meine PHP-Befehle funktionieren. Idealerweise möchte ich, dass das Javascript vor dem PHP ausgeführt wird.

Answer 1

Sie können einen Parameter an die Funktion senden, die angeben, welche Schaltfläche Sie geklickt haben: dass

<script> 
 
function myFunction(el){ 
 
    console.log("You clicked button with id "+el.id) 
 
} 
 
</script> 
 

 
<div id= "btnGroup"> 
 
    <input type= "submit" id= "btn1" value="6 seats" onclick="myFunction(this)"/> 
 
    <input type= "submit" id= "btn2" value="6 seats" onclick="myFunction(this)"/> 
 
    <input type= "submit" id= "btn3" value="6 seats" onclick="myFunction(this)"/> 
 
    <input type= "submit" id= "btn4" value="6 seats" onclick="myFunction(this)"/> 
 
    <input type="submit" id= "btn5" value="6 seats" onclick="myFunction(this)"/> 
 
    <input type= "submit" id= "btn6" value="6 seats" onclick="myFunction(this)"/> 
 
</div>

Answer 2

$("#btn1").click(myFunction); 

So einfach. Da Sie Ihre Frage mit "jQuery" markiert haben, gehe ich davon aus, dass Sie jQuery verwenden.

Answer 3

Sie können den Benutzer nicht auf eine andere Seite umleiten und den JavaScript-Code von der ersten Seite ausführen. Sie haben 2 Möglichkeiten, führen Sie den JS-Code auf dieser Seite aus und verzögern Sie die Umleitung, um mit Ihrem Servercode (php) umzugehen oder Ihren JS-Code auf die neue Seite zu verschieben.

Zum Beispiel müssen Sie die "Eintragen" Orte in der Tasten und halten Sie die JS Aufruf entfernen:

HTML

<form id="myForm"> 
<div id="btnGroup"> 
    <input type="submit" id= "btn1" value="6 seats" onclick="myFunction()"/> 
    <input type="submit" id= "btn2" value="6 seats" onclick="myFunction()"/> 
    <input type="submit" id= "btn3" value="6 seats" onclick="myFunction()"/> 
    <input type="submit" id= "btn4" value="6 seats" onclick="myFunction()"/> 
    <input type="submit" id= "btn5" value="6 seats" onclick="myFunction()"/> 
    <input type="submit" id= "btn6" value="6 seats" onclick="myFunction()"/>  
</div> 
</form> 

JS

function myFunction(){ 
    alert("button clicked"); 
    // do your JS code here 

    // this line will trigger the submit and will send you to perform your code on the server 
    document.getElementById("myForm").submit(); 
} 

Answer 4

Ohne jquery Ich würde es so machen:

let button = document.querySelector("#btn1"); 
button.addEventListener('click', (event) => { 
    event.preventDefault(); 
    // do some code 
    window.location = "where you want to go after you run your js"; 
}); 

Sie können es so für jeden Knopf tun. Und vergessen Sie nicht, die js-Datei hinzuzufügen, fügen Sie das Ende des Html hinzu, so dass es nach dem DOM geladen wird.

Answer 5

Sie können diese Methode verwenden, um Ihre Funktion in Ihrer JavaScript-Seite auszuführen und die entsprechende Funktion wie unten gezeigt auszuführen. Die ID des Elements wird in die Klammern geschrieben. '

document.getElementById('btn1').onclick =() => { 
     myFunction(); 
    } 
    function myFunction(){ 
     alert("button clicked"); 
    }; 

`