Javascript 按钮是否可以更改输入文本的名称和表单的操作？_Javascript_Html_Forms

Javascript 按钮是否可以更改输入文本的名称和表单的操作？

javascript html forms

Javascript 按钮是否可以更改输入文本的名称和表单的操作？,javascript,html,forms,Javascript,Html,Forms,我的代码如下所示： <form method="get"> <input type="text"> <input type="submit" formaction="one" value="first"> <input type="submit" formaction="two" value="second"> </form> 我要找的是：如果单击第一个按钮，则输入字段的名称应为“1”，如果单击第二个

我的代码如下所示：

<form method="get">
    <input type="text">

    <input type="submit" formaction="one" value="first">
    <input type="submit" formaction="two" value="second">
</form>

我要找的是：

如果单击第一个按钮，则输入字段的名称应为“1”，如果单击第二个按钮，则输入字段的名称应为“2”
如果单击第一个按钮，则窗体的操作应为“第一”，如果单击第二个按钮，则窗体的操作应为“第二”

因此，如果用户在文本框中填写“foo”并按下第一个按钮，浏览器应转到

http://www.example.com/one?first=foo

。如果用户填写“bar”并按下第二个按钮，浏览器应转到

http://www.example.com/two?second=bar

最简单的方法是使用jQuery

完整代码：


$（'input[type=submit]'）。在（'click'，函数（e）{
$（'input[type=text]'）.attr（'name'，$（this.attr（'value'））；
$（'form'）.attr（'action'，$（this.attr（'formaction'））；
});

注1：您需要确保jQuery代码位于HTML页面的底部，以便在执行时加载所有HTML元素

或者，您也可以使用：


$（文档）.ready（函数（）{
$（'input[type=submit]'）。在（'click'，函数（e）{
$（'input[type=text]'）.attr（'name'，$（this.attr（'value'））；
$（'form'）.attr（'action'，$（this.attr（'formaction'））；
});
});

注2：如果您不喜欢使用jQuery，以下是如何使用“香草”JavaScript执行相同操作：

<html>
    <head>
    </head>
    <body>
        <form method="get">
            <input type="text">
            <input type="submit" formaction="one" value="first">
            <input type="submit" formaction="two" value="second">
        </form>
        <script>
            Array.prototype.slice.call(document.querySelectorAll("input[type=submit]")).forEach(function(btn) {
                btn.addEventListener("click", function(e) {
                    document.querySelector("input[type=text]").setAttribute('name', e.target.value);
                    e.target.form.action = e.target.getAttribute('formaction');
                });
            });
        </script>
    </body>
</html>


Array.prototype.slice.call（document.queryselectoral（“输入[type=submit]”）{
btn.addEventListener（“点击”，函数（e）{
document.querySelector（“输入[type=text]”）.setAttribute（'name'，e.target.value）；
e、 target.form.action=e.target.getAttribute（'formaction'）；
});
});

我想你搞错我了。我想通过“文本名称”说的是，我想得到

1？first=input

或

2？second=input

我认为我的英语不够。。。我想得到

one？第一个=用户输入的文本

或者

two？第二个=用户输入的文本

@betseg：我想我知道你的意思。我刚刚又更新了我的答案。试试那个代码，让我知道这是不是你想要的！很抱歉，刚才的评论。我试了最后一个，但没用。它保持为“一”或“二”，没有名称或输入。@betseg：如果我理解正确，我给你的代码应该完全符合你的要求。如果没有，请解释你想要什么和你得到什么之间的区别。另外，你可以设置一个演示，这样我就可以调试你的代码了吗？

<html>
    <head>
        <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
        <script>
            $( document ).ready(function() {
                $('input[type=submit]').on('click', function (e) {
                    $('input[type=text]').attr('name', $(this).attr('value'));
                    $('form').attr('action', $(this).attr('formaction'));
                });
            });
        </script>
    </head>
    <body>
        <form method="get">
            <input type="text">
            <input type="submit" formaction="one" value="first">
            <input type="submit" formaction="two" value="second">
        </form>
    </body>
</html>

<html>
    <head>
    </head>
    <body>
        <form method="get">
            <input type="text">
            <input type="submit" formaction="one" value="first">
            <input type="submit" formaction="two" value="second">
        </form>
        <script>
            Array.prototype.slice.call(document.querySelectorAll("input[type=submit]")).forEach(function(btn) {
                btn.addEventListener("click", function(e) {
                    document.querySelector("input[type=text]").setAttribute('name', e.target.value);
                    e.target.form.action = e.target.getAttribute('formaction');
                });
            });
        </script>
    </body>
</html>