HTML, making a button submit data to another url?

Question

The following is my 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>

Note: Just in case someone is wondering, it is utilizing the bootstrap library.

I have the form and it POSTs to login.php but I want the button Make a new account post the same data to register.php.

Is that possible? If so, how?

score 13 · Accepted Answer · answered May 08 '13 at 07:13

13

Set action attribute of your form tag to the URL of the page to send the data to.

answered May 08 '13 at 07:13

filipko

955
5
16

i thought, and actually do, the same for all languages i've worked with, except for MS Razor pages, where it seems it doesn't work, since it posts to the same url from the browser – B. León Dec 18 '18 at 16:21
In .NET Core 3.1 at least, I'm able to set the asp-page and asp-route-... attributes on the input tag used for submission. You need to create a shell cshtml file so that url generation works. The end result is a formaction attribute that routes the form to the correct Razor page POST handler. – Roshan Manuel Mar 24 '20 at 18:33

score 9 · Answer 2 · answered May 08 '13 at 07:27

Try the following:

In HTML add an onclick event handler for Make a new account button:

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

In JavaScript:

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

If this does not work, you may try:

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

One or both of the above mentioned solution should work for you. Prefer the first approach as it is cleaner.

Please take this as a starting point not a copy-paste solution and follow the best practices for development.

Why use JS when there is an attribute in HTML that exist exactly for that? — Itay Gal, May 08 '13 at 08:13
@ItayGal, there are two submit buttons on the form. The asker wants to submit the same form to two different URLs depending on the button clicked by the user. So, **we are using the default value for action attribute for one button** and **updating action attribute on click of the second button**. — Vivek Jain, May 08 '13 at 08:45

score 7 · Answer 3 · edited Jun 20 '20 at 09:12

7

I have the form and it POSTs to login.php but I want the button Make a new account post the same data to register.php.

Is that possible?

In HTML5 it is, using the formaction attribute on the submit button.

But browser support is probably not so good yet. Could be resolved using a Polyfil that attaches click handlers to such buttons automatically and changes the action attribute of the form dynamically, though.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 08 '13 at 08:03

CBroe

91,630
14
92
150

Browser support is here: http://www.w3schools.com/tags/att_button_formaction.asp TLDR: if it's a general web site you probably can't use, but if you have a "Web Interface" to an internal or restricted users where you have more power to require recent browsers, this is the best solution. – Paulo Schreiner Mar 31 '15 at 18:44
1

@PauloSchreiner you're going to get yourself killed for using w3schools as a reference, just warning you. – FluorescentGreen5 May 12 '17 at 11:18

score 1 · Answer 4 · answered May 08 '13 at 07:14

1

<form class="form-horizontal" method="post" action="register.php">

answered May 08 '13 at 07:14

Arnaud Denoyelle

29,980
16
92
148

1

Thats not what was asked. – Rohit Gupta Mar 02 '22 at 02:48

score 0 · Answer 5 · answered Apr 01 '23 at 09:10

Just add another submit button with formaction attribute.

 <form action="/submit">

      <input type="submit" value="Submit">
      
      <input type="submit" value="Go Elsewhere" formaction="/elsewhere">
      
 </form>

For more details, you can visit this url.

HTML, making a button submit data to another url?

5 Answers5

Linked

Related