CODEWITHSUNDEEP
javascriptjqueryhtml
mrAnderson
mrAnderson

Reputation: 61

Using onclick for a submit button

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.

Upvotes: 2

Views: 15592

Answers (5)

dinith jayabodhi
dinith jayabodhi

Reputation: 591

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

`

Upvotes: 0

Marwan
Marwan

Reputation: 408

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.

Upvotes: 0

Itay Gal
Itay Gal

Reputation: 10834

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

Upvotes: 1

iquellis
iquellis

Reputation: 1053

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

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

Upvotes: 0

mike_t
mike_t

Reputation: 2691

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>

Upvotes: 1

Related Questions