Using onclick for a submit button

Question

I have multiple submit buttons. As far as the php is concerned, they do the same thing, send input data to database. But i want to also run some javascript when specific buttons are clicked and i am having trouble.

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

the function is not what i want in the end it is just something simple to test if it works.

in case this is relevant, the php associated with the buttons works fine. Once a button is clicked, i go to another page that essentially tells me that my php commands worked. Ideally I' want the javascript to run before the php.

• Death-is-the-real-truth: But i want to also run some javascript when specific buttons are clicked-> what is some javascript mean here? . BTW you can use jQuery easily
• mrAnderson: a javascript function. my php that is associated with the buttons works fine i just want to also run a js function along with the php
• Itay Gal: If you're redirecting the user to another page then your javascript code won't run, as it's relevant to the page it resides
• mrAnderson: I was wondering that may be the case, thanks for confirming

Answer 1

You can send a parameter to your function which identify which button you clicked:

<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

You can't redirect the user to another page and run the javascript code from the first page. You have 2 options, run the JS code in that page and delay the redirection in order to handle your server code (php) or to move your JS code to the new page.

For example, you need to remove the "submit" type from your buttons and keep the JS call:

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 3

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

Simple as that. As you tagged your question with "jQuery", I assume, that you are using jQuery.

• mike_t: you should specify that jQuery is needed for this code to work
• iquellis: mrAnderson tagged his question with "jQuery".
• mike_t: overlooked the tag, sorry, was assuming by his code only

Answer 4

Without jquery I would do it like this:

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

You can do it like this for every button. And don't forget to add the js file add the end of the html so it runs after the DOM has loaded.

Answer 5

you can use this method to run your function in your JavaScript page and run relevant function as shown below . the id of the element is written inside the brackets . '

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

`