admin管理员组文章数量:1326315
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 mands worked. Ideally I' want the javascript to run before the php.
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 mands worked. Ideally I' want the javascript to run before the php.
Share Improve this question edited Dec 12, 2017 at 13:30 mrAnderson asked Dec 12, 2017 at 13:24 mrAndersonmrAnderson 611 gold badge2 silver badges7 bronze badges 4-
1
But i want to also run some javascript when specific buttons are clicked
-> what issome javascript
mean here? . BTW you can use jQuery easily – Death-is-the-real-truth Commented Dec 12, 2017 at 13:26 - 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 – mrAnderson Commented Dec 12, 2017 at 13:28
- 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 – Itay Gal Commented Dec 12, 2017 at 13:32
- I was wondering that may be the case, thanks for confirming – mrAnderson Commented Dec 12, 2017 at 13:34
5 Answers
Reset to default 1You 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>
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();
}
$("#btn1").click(myFunction);
Simple as that. As you tagged your question with "jQuery", I assume, that you are using jQuery.
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.
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");
};
`
本文标签: javascriptUsing onclick for a submit buttonStack Overflow
版权声明:本文标题:javascript - Using onclick for a submit button - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742204547a2432570.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论