【问题标题】:HTML, making a button submit data to another url?HTML,使按钮将数据提交到另一个网址?
【发布时间】:2013-05-08 07:11:07
【问题描述】:

以下是我的 HTML:

<form class="form-horizontal" method="post">
        <div class="control-group">
            <label class="control-label" for="inputEmail">Email</label>
            <div class="controls">
                <input type="text" id="inputEmail" placeholder="Email">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="inputPassword">Password</label>
            <div class="controls">
                <input type="password" id="inputPassword" placeholder="Password">
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <label class="checkbox">
                    <input type="checkbox"> Remember me
                </label>
                <button type="submit" class="btn btn-success">Sign in</button>
                <button class="btn btn-primary"> Make a new account </button>
            </div>
        </div>
    </form>

注意:以防万一有人想知道,它正在使用引导程序 图书馆。

我有表单,它会发布到 login.php,但我希望按钮 Make a new accountsame 数据发布到 register.php。

这可能吗?如果有,怎么做?

【问题讨论】:

    标签: html


    【解决方案1】:

    form 标记的action 属性设置为要将数据发送到的页面的URL。

    【讨论】:

    • 我认为并且实际上对我使用过的所有语言都一样,除了 MS Razor 页面,它似乎不起作用,因为它从浏览器
    • 至少在 .NET Core 3.1 中,我可以在用于提交的输入标签上设置 asp-page 和 asp-route-... 属性。您需要创建一个 shell cshtml 文件,以便 url 生成工作。最终结果是将表单路由到正确的 Razor 页面 POST 处理程序的 formaction 属性。
    【解决方案2】:

    尝试以下方法:

    在 HTML 中为 Make a new account 按钮添加 onclick 事件处理程序:

    <form class="form-horizontal" method="post" id="myform">
            <div class="control-group">
                <label class="control-label" for="inputEmail">Email</label>
                <div class="controls">
                    <input type="text" id="inputEmail" placeholder="Email">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputPassword">Password</label>
                <div class="controls">
                    <input type="password" id="inputPassword" placeholder="Password">
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <label class="checkbox">
                        <input type="checkbox"> Remember me
                    </label>
                    <button type="submit" class="btn btn-success">Sign in</button>
                    <button class="btn btn-primary" onclick="javascript:register()"> Make a new account </button>
                </div>
            </div>
        </form>
    

    在 JavaScript 中:

    function register() {
        this.action = 'register.php';
        return true;
    }
    

    如果这不起作用,您可以尝试:

    function register() {
        var frm = document.getElementById("myform");
        frm.action = 'register.php';
        return true;
    }
    

    上述解决方案中的一个或两个都适合您。更喜欢第一种方法,因为它更干净。

    请以此为起点,而不是复制粘贴解决方案,并遵循最佳开发实践。

    【讨论】:

    • 当 HTML 中有一个属性正好存在时,为什么要使用 JS?
    • @ItayGal,表单上有两个提交按钮。提问者希望根据用户单击的按钮将相同的表单提交到两个不同的 URL。因此,我们使用一个按钮的动作属性的默认值在点击第二个按钮时更新动作属性
    【解决方案3】:

    我有表单,它会发布到 login.php,但我想要按钮 Make a new account 发布相同的数据到 register.php。

    这可能吗?

    在 HTML5 中,在提交按钮上使用 formaction 属性。

    但是浏览器支持可能还不是很好。可以使用 Polyfil 来解决,该 Polyfil 自动将点击处理程序附加到此类按钮并动态更改表单的 action 属性。

    【讨论】:

    • 浏览器支持在这里:w3schools.com/tags/att_button_formaction.asp TLDR:如果它是一个通用网站,您可能无法使用,但如果您有一个内部或受限用户的“Web 界面”,您有更多需要最新浏览器的能力,这是最好的解决方案。
    • @PauloSchreiner 你会因为使用 w3schools 作为参考而被杀,只是警告你。
    【解决方案4】:
    <form class="form-horizontal" method="post" action="register.php">
    

    【讨论】:

    • 问的不是这个。
    猜你喜欢
    • 2016-02-01
    • 1970-01-01
    • 2016-11-20
    • 1970-01-01
    • 1970-01-01
    • 2021-09-04
    • 2016-03-29
    • 1970-01-01
    • 2017-01-21
    相关资源
    最近更新 更多