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命令有效。理想情况下，我希望javascript在php之前运行。

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

match

这很简单。当你用“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文件添加html的结尾，以便在DOM加载后运行。

Answer 5

您可以使用此方法在JavaScript页面中运行您的函数并运行相关功能，如下所示。元素的id写在括号内。＆＃39;

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

`

使用onclick提交按钮

5 个答案: