1

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

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

<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"，按下 button2 时使用类似的“INPUT TYPE="text" name="xyz" .

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

4

5 回答 5

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

}
于 2013-01-07T09:20:12.507 回答
1

您只需要为文本字段分配一个 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>
于 2013-01-07T09:22:07.560 回答
0 
<!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>
于 2013-01-07T09:26:22.307 回答
0

使用 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>
于 2013-01-07T09:16:07.757 回答
0

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

<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不同地解释请求属性。

于 2013-01-07T09:20:11.303 回答