Question

我的代码如下所示：

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

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

我在寻找这个：

输入字段的名称应为＆＃34; one＆＃34;如果点击第一个按钮并且＆＃34;两个＆＃34;如果单击第二个按钮。
表单的动作应该是＆＃34;首先＆＃34;如果单击第一个按钮并且＆＃34;第二个＆＃34;如果单击第二个按钮。

因此，如果用户填写＆＃34; foo＆＃34;在文本框中按下第一个按钮，浏览器应转到http://www.example.com/one?first=foo。如果用户填写＆＃34; bar＆＃34;并按下第二个按钮，浏览器应转到http://www.example.com/two?second=bar。

Answer 1

最简单的方法是使用jQuery。

完整代码：

<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 src="//code.jquery.com/jquery-1.12.0.min.js"></script>
        <script>
            $('input[type=submit]').on('click', function (e) {
                $('input[type=text]').attr('name', $(this).attr('value'));
                $('form').attr('action', $(this).attr('formaction'));
            });
        </script>
    </body>
</html>

注1：

您需要确保您的jQuery代码位于HTML页面的底部，因此所有HTML元素在执行时都会被加载。

或者，您也可以使用$( document ).ready()：

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

注2：

如果您不想使用jQuery，请按照以下方式使用jQuery＆＃34; vanilla＆＃34; 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>

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

1 个答案:

完整代码：

注1：

注2：