防止HTML中的页面重定向按钮

Question

我有几个按钮和一个提交按钮。 （简单）我的想法是使用php来接收clicked按钮的值，并仅在Submit时显示它。 在这里，我遇到一个问题，即按钮单击本身会重定向到页面并显示值（意味着它不等待提交按钮被按下）。 我遵循了这里提供的JavaScript。 但是没有用。 有什么方法可以做到这一点？

<form action="calculate.php" method="POST">

<button type="" name="btn" style="background-color:#7F77AE" value="Alf">x1</button>
<button type="" name="btn" style="background-color:#7F77AE" value="ABI">y1</button>
<button type="" name="btn" style="background-color:#7F77AE" value="APE">z1</button>

<input type="submit" value="Submit">

php部分非常简单，

 $button = $_POST['btn']; 
 echo $button;

Answer 1

将普通按钮的类型定义为“按钮”

<form action="calculate.php" method="POST">

<button type="button" name="btn" style="background-color:#7F77AE" value="Alf">x1</button>
<button type="button" name="btn" style="background-color:#7F77AE" value="ABI">y1</button>
<button type="button" name="btn" style="background-color:#7F77AE" value="APE">z1</button>

<input type="submit" value="Submit">

to use buttons here you can do something like this: 编辑：如果您绝对在这里使用按钮，则可以执行以下操作：

<script>
function select(val){
    document.getElementById("btnValueStore").value = val;
}
</script>

<form action="calculate.php" method="POST">
<button type="button" style="background-color:#7F77AE" onClick="select('Alf')">x1</button>
<button type="button" style="background-color:#7F77AE" onClick="select('ABI')">y1</button>
<button type="button" style="background-color:#7F77AE" onClick="select('APE')">z1</button>
<input type="hidden" value="" name="btn" id="btnValueStore">
<input type="submit" value="Submit">
</form>

首先，您定义一个隐藏的输入来保存最后按下的按钮的值。

select函数会将隐藏输入字段的值更改为您传递它的任何值。

为每个按钮设置“ onClick”属性，以使用相应按钮的值调用选择功能。

注意：此特定实现仅允许“选择”一个按钮（单击的最后一个按钮）-为了能够“选择”多个按钮，您将需要多个隐藏的输入字段。