Question

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

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

<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“，类似地”INPUT TYPE =“text”name =“xyz”按下按钮。

我到处寻找无效的解决方案，有没有一个javascript解决方案或技巧来实现这个目标？

Answer 1

使用Pure 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

}

Answer 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>

Answer 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>

Answer 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。

Answer 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>

1个表格，带1个输入字段和2个按钮;需要输入名称根据使用的按钮而改变

5 个答案: