CODEWITHSUNDEEP
javascripthtmlcssweb
user1257724
user1257724

Reputation:

How to send an HTML form POST request using the HTML button tag?

As of now, I have a user-input structure where the user provides their username/password then clicks either "login" or register" which then ends a post request with that information.

<form action="{% url 'users:login' %}" method = "post">
    Username: <input type="text" name="username"><br>
    Password: <input type="password" name="passwd"><br>
    <input type="submit" name="login" value="Log In">
    <input type="submit" name="adduser" value="Add User">
</form>

What I want is to replace the two submit buttons with tags, i.e.:

<form class="control-group" action="{% url 'users:login' %}" method = "post">
     <input type="text" placeholder="Username" name="username">
     <input type="password" placeholder="Password" name="passwd">
     <button class="button-style">Login</button>
     <button class="button-style">Register</button>
 </form>

But I'm unsure how to, for example, send the form's POST request with the correct information (username, password, type (login or register)) as I do in the first example.

Upvotes: 0

Views: 3039

Answers (4)

balai
balai

Reputation: 11

Yes by default the button submits the form. If this does not happen just use

<button type="submit">Login</button>

Upvotes: 0

Quentin
Quentin

Reputation: 944159

Clicking the buttons will submit the form.

If you want to distinguish which button was clicked, give them names and values, just as you did in the first example.

<button class="button-style" name="login" value="Log In">Login</button>

Upvotes: 0

Labib Ismaiel
Labib Ismaiel

Reputation: 1340

there are multiple ways to do so, first your code should work, because the button should submit by default, if not you can do <button type="submit">login</button>, if still does not work, you can use an onclick="myfunction()" and let the function handle the data, but may I ask why do you want to change it? if the reason is styling I am sure you know you can style that with just a class="myClass"

Upvotes: 0

AMDG
AMDG

Reputation: 975

You can use a bit a javascript.

Here is what you have to do :

  • Register a trigger on each button
  • in the triggers :
    • Change the action url
    • Send the form

You should also register a trigger on form validation, and call one of the two trigger defined previously.

Upvotes: 1

Related Questions