1 个带有 1 个输入字段和 2 个按钮的表单；需要根据使用的按钮更改输入名称答案

【问题标题】：1 form with 1 input field and 2 buttons; need input name changed depending on which button is used1 个带有 1 个输入字段和 2 个按钮的表单；需要根据使用的按钮更改输入名称
【发布时间】：2012-12-20 23:58:53
【问题描述】：

我需要一个带有单个输入字段和两个按钮的表单。

棘手的部分是我需要根据按下的按钮更改输入字段 name。

<FORM name="Form1" id="num_colis" method="post">
<INPUT TYPE="text" name="abc OR xyz" value="">
<INPUT type="button" value="Colissimo" onclick="return OnButton1();">
<INPUT type="button" value="CSUIVI" onclick="return OnButton2();">
</FORM>
<script language="Javascript">
<!--
function OnButton1()
{
    document.Form1.action = "http://www.site1.fr/suivi"    
    document.Form1.submit();             // Submit the page
    return true;
}

function OnButton2()
{
    document.Form1.action = "http://www.site2.fr/suivi"
    document.Form1.submit();             // Submit the page
    return true;
}
-->
</script>

为此，我需要：在按下 button1 时使用“INPUT TYPE="text" name="abc"，并且在按下 button1 时使用类似的“INPUT TYPE="text" name="xyz" button2 被按下。

我到处寻找无济于事的解决方案，是否有 javascript 解决方案或技巧来实现这一目标？

【问题讨论】：

你想用它实现什么？也许还有另一种方法可以做你想做的事。更改输入字段的名称听起来不是“好方法”。

标签： javascript forms button field

【解决方案1】：

使用纯 JavaScript

设置id属性为输入

<INPUT TYPE="text" id="textField" value="">


function OnButton1()
{
    document.getElementById('textField').name = 'abc';
    document.Form1.action = "http://www.site1.fr/suivi"
    document.Form1.submit(); // Submit the page

}
function OnButton2()
{
    document.getElementById('textField').name = 'xyz';
    document.Form1.action = "http://www.site2.fr/suivi"
    document.Form1.submit(); // Submit the page

}

【讨论】：

【解决方案2】：

您只需要为文本字段分配一个 id 并在函数运行时更改 id 的名称。在这里，我为输入分配了一个 ID，即“myInput”，当您单击按钮时，该函数正在更改字段 ID 为“myInput”的字段名称。

<FORM name="Form1" id="num_colis" method="post">
<INPUT TYPE="text" id="myInput" name="abc OR xyz" value="">
<INPUT type="button" value="Colissimo" onclick="return OnButton1();">
<INPUT type="button" value="CSUIVI" onclick="return OnButton2();">
</FORM>
<script language="Javascript">
<!--
function OnButton1()
{
    document.getElementById('myInput').name='abc';
    document.Form1.action = "http://www.site1.fr/suivi"    
    document.Form1.submit();             // Submit the page
    return true;
}

function OnButton2()
{
    document.getElementById('myInput').name='xyz';
    document.Form1.action = "http://www.site2.fr/suivi"
    document.Form1.submit();             // Submit the page
    return true;
}
-->
</script>

【讨论】：

【解决方案3】：

使用 jquery

<FORM name="Form1" id="num_colis" method="post">
<INPUT TYPE="text" id="name" name="abc OR xyz" value="">
<INPUT type="button" id="button1" value="Colissimo">
<INPUT type="button" id="button2" value="CSUIVI">
</FORM>
<script language="Javascript">
$('#button1').click(function() {
  $('#name').attr('name', 'abc');
});
$('#button2').click(function() {
  $('#name').attr('name', 'xyz');
});
</script>

【讨论】：

哇，我不敢相信，反应这么快！现在试试，非常感谢！

【解决方案4】：

为什么不使用隐藏的输入字段？

<INPUT TYPE="hidden" name="abc_or_xyz" value="">
<INPUT TYPE="text" name="text" value="">

...

function OnButton1()
{
    document.Form1.action = "http://www.site1.fr/suivi";    
    document.Form1.abc_or_xyz.value = "abc";
    document.Form1.submit();             // Submit the page
    return true;
}

function OnButton2()
{
    document.Form1.action = "http://www.site2.fr/suivi";
    document.Form1.abc_or_xyz.value = "xyz";
    document.Form1.submit();             // Submit the page
    return true;
}

服务器端检查请求属性abc_or_xyz，这使得可以不同地解释请求属性text。

【讨论】：

非常感谢您。我需要更改名称，而不是值，所以只需更改为 document.Form1.abc_or_xyz.name 就可以了！

【解决方案5】：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Swap</title>
<script type="text/javascript">
function abc(){
document.getElementById("name").setAttribute("name", "abc");
}
function xyv(){
document.getElementById("name").setAttribute("name", "xyv");
}
</script>
</head>

<body>
<form name="Form1" id="num_colis" method="post">
    <INPUT TYPE="text" id="name" name="abc OR xyz" value="">
    <INPUT type="button" id="button1" value="Colissimo" onclick="abc()">
    <INPUT type="button" id="button2" value="CSUIVI" onclick="xyv()">
</form>
</body>
</html>

【讨论】：