根据使用 JavaScript 单击哪个按钮传递隐藏字段值

Pass a hidden field value based on which button is clicked with JavaScript

提问by GSto

I have a form with two buttons, each with onclick = this.form.submit(). I have a hidden field in the form, and I would like the value of the field to be different based on which button is clicked. What would be the best way to do this?

我有一个带有两个按钮的表单，每个按钮都有 onclick = this.form.submit()。我在表单中有一个隐藏字段，我希望该字段的值根据单击的按钮而有所不同。什么是最好的方法来做到这一点？

Also, before anyone says it the answers, jQuery is not an option in this case.

此外，在任何人说出答案之前，在这种情况下 jQuery 不是一个选择。

采纳答案by geowa4

use Prototype :-)

使用原型:-)

But in all seriousness:

但说真的：

1. Add an idto the hidden field

2. Before you submit the form in each handler:

   document.getElementById("hiddenId").value = "mySpecialValue";

   //or (depending on which onclick handler you are in)

   document.getElementById("hiddenId").value = "myOtherSpecialValue";

3. Submit the form the same way you are now.

1. id向隐藏字段添加一个

2. 在每个处理程序中提交表单之前：

   document.getElementById("hiddenId").value = "mySpecialValue";

   //or (depending on which onclick handler you are in)

   document.getElementById("hiddenId").value = "myOtherSpecialValue";

3. 以与现在相同的方式提交表单。

Recommended ex:

推荐示例：

<input id="buttonA" type="button" value="do something" onclick="buttonA_clickHandler(event);"/>

<input id="buttonA" type="button" value="do something" onclick="buttonA_clickHandler(event);"/>

...

...

function buttonA_clickHandler(event) {
    document.getElementById('hiddenId').value = whatever;
    document.getElementById('theForm').submit();
}

repeat for the other button.

重复另一个按钮。

回答by Pat

Assuming you've got your hidden field setup something like so:

假设您的隐藏字段设置如下：

<input type="hidden" name="clicked_button" id="clicked_button" value=""/>

You could just set its value in a common onclick handler for your buttons:

您可以在按钮的通用 onclick 处理程序中设置其值：

function buttonClick(theButton){
    document.getElementById('clicked_button').value = theButton.name;
    return true;
}

And then your submit buttons would be:

然后您的提交按钮将是：

<input type="submit" name="save" value="Save" onclick="return buttonClick(this)"/>
<input type="submit" name="delete" value="Delete" onclick="return buttonClick(this)"/>

回答by elo80ka

1. Forgive me if the answer to this seems obvious, but why use a hidden field at all? <input type="submit" value="..." />already works; browsers will send the valueof the submit button that was clicked, along with the rest of the form data.

2. The <button type="submit" name="..." value="...">...</button>element works perfectly in Chrome/Safari/Firefox, but fails in IE7 (as Lèse majesté pointed out in his comment above); if you don't care about IE, that'd be the way to go.

3. You could also use an <input type="image" />element, just remember that the browser submits it as two fields: name.xand name.y. Also, you can't set its value, but that shouldn't be a problem if you're only interested in the presence of the field.

1. 如果这个答案看起来很明显，请原谅我，但为什么要使用隐藏字段呢？<input type="submit" value="..." />已经有效；浏览器将发送value被点击的提交按钮的 ，以及其余的表单数据。

2. 该<button type="submit" name="..." value="...">...</button>元素在 Chrome/Safari/Firefox 中完美运行，但在 IE7 中失败（正如 Lèse majesté 在上面的评论中指出的那样）；如果你不关心 IE，那就是要走的路。

3. 你也可以使用一个<input type="image" />元素，只要记住浏览器将它作为两个字段提交：name.x和name.y。此外，您不能设置它的值，但如果您只对字段的存在感兴趣，那应该不是问题。

回答by palswim

You could pass the value to which you want to set the hidden input to a function you create:

您可以将要设置隐藏输入的值传递给您创建的函数：

function handleClick(val){
    document.getElementById('HiddenInputID').value = val;
    return true;
}

and then code the buttons using the onclickto pass whichever value you'd like:

然后使用 对按钮进行编码onclick以传递您想要的任何值：

<input type="submit" name="Name1" value="Value 1" onclick="return handleClick('Value 1')"/>
<input type="submit" name="Name2" value="Value 2" onclick="return handleClick('Value 2')"/>