送信ボタンにonclickを使用する

Question

複数の送信ボタンがあります。 phpに関しては、同じことをして、入力データをデータベースに送ります。しかし、私はまた、特定のボタンがクリックされ、私は問題を抱えているときにいくつかのjavascriptを実行したい。

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

機能は、私は最終的に動作するかどうかをテストするための簡単なだけで何かで欲しいものではありません。

この場合、ボタンに関連付けられたphpは正常に動作します。一度ボタンをクリックすると、基本的に私のPHPコマンドが働いていることを伝える別のページに行きます。理想的には私はPHPの前にjavascriptを実行したい。

Answer 1

あなたがクリックされたボタンを識別あなたの関数にパラメータを送信することができます。そのよう

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

シンプル。 "jQuery"であなたの質問にタグを付けると、私はあなたがjQueryを使用していると仮定します。

Answer 3

ユーザーを別のページにリダイレクトして、最初のページからjavascriptコードを実行することはできません。 2つのオプションがあります。そのページでJSコードを実行し、サーバーコード（PHP）を処理したりJSコードを新しいページに移動するためにリダイレクトを遅らせます。

たとえば、あなたがあなたのボタンから "送信" タイプを削除し、JSコールを維持する必要があります。

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

なしjquery私はこのようにそれを行うだろう：

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

すべてのボタンでこのようにすることができます。そして、jsファイルを追加して、DOMのロード後に実行するように、htmlの終わりを追加することを忘れないでください。

Answer 5

このメソッドを使用すると、JavaScriptページで関数を実行し、以下に示すような関連する関数を実行できます。要素のidは角括弧の中に書かれています。 「

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

`