locked
Difference between input type BUTTON and SUBMIT RRS feed

  • Question

  • User-1188570427 posted

    I have the follow code setup.

    What is the difference between type="submit" and type="button"?

    When do you use one or the other?

    <form id="formEndItemPermissionGroupViewThree">
                <div class="row">
                    <hr />
                    <div class="end-item-import-button-container-pull-right">
                        <input type="button" id="btnView" value="View" class="btn btn-block m-b-2 btn-info" role="button" />
                    </div>
                </div>
    </form>

    Monday, March 16, 2020 10:19 PM

Answers

  • User-1330468790 posted

    Hi, tvb2727,

     

    When do you use one or the other?

    It depends on your purpose.

    In your code, if you want to submit the form to your server, you should use "Submit"

    However, if you want to do something from client side by clicking the "Button", the input type "Button" is the choice.

    Note that if you bind the "Button" with a proper ajax function , you can submit (generally we say post) the content of the form either.

     

    Difference:

    • <input type="submit"/> button will submit the form - which contains this button - when users click on it. Of course, you can stop this process by javascript.
    • <input type="button"/> button will not submit the form. It does nothing by default until you bind a javascript function on the click event (other events work as well but here we focus on difference with submit).

     

    Let's take an example from tutorial and I made a little change on the code: 

    https://www.w3schools.com/html/html_forms.asp

    Markup:

    <form action="/action_page.php">
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname" value="John"><br>
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname" value="Doe"><br><br>
      <input type="submit" value="Submit">
    <input type="button" value="Button"> </form>

    Result:

      

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 17, 2020 1:36 AM

All replies

  • User-1330468790 posted

    Hi, tvb2727,

     

    When do you use one or the other?

    It depends on your purpose.

    In your code, if you want to submit the form to your server, you should use "Submit"

    However, if you want to do something from client side by clicking the "Button", the input type "Button" is the choice.

    Note that if you bind the "Button" with a proper ajax function , you can submit (generally we say post) the content of the form either.

     

    Difference:

    • <input type="submit"/> button will submit the form - which contains this button - when users click on it. Of course, you can stop this process by javascript.
    • <input type="button"/> button will not submit the form. It does nothing by default until you bind a javascript function on the click event (other events work as well but here we focus on difference with submit).

     

    Let's take an example from tutorial and I made a little change on the code: 

    https://www.w3schools.com/html/html_forms.asp

    Markup:

    <form action="/action_page.php">
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname" value="John"><br>
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname" value="Doe"><br><br>
      <input type="submit" value="Submit">
    <input type="button" value="Button"> </form>

    Result:

      

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 17, 2020 1:36 AM
  • User-1188570427 posted

    Hi, tvb2727,

     

    When do you use one or the other?

    It depends on your purpose.

    In your code, if you want to submit the form to your server, you should use "Submit"

    However, if you want to do something from client side by clicking the "Button", the input type "Button" is the choice.

    Note that if you bind the "Button" with a proper ajax function , you can submit (generally we say post) the content of the form either.

     

    Difference:

    • <input type="submit"/> button will submit the form - which contains this button - when users click on it. Of course, you can stop this process by javascript.
    • <input type="button"/> button will not submit the form. It does nothing by default until you bind a javascript function on the click event (other events work as well but here we focus on difference with submit).

     

    Let's take an example from tutorial and I made a little change on the code: 

    https://www.w3schools.com/html/html_forms.asp

    Markup:

    <form action="/action_page.php">
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname" value="John"><br>
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname" value="Doe"><br><br>
      <input type="submit" value="Submit">
      <input type="button" value="Button">
    </form> 

    Result:

      

    Hope this can help you.

    Best regards,

    Sean

    This is great, Sean!

    Tuesday, March 17, 2020 1:44 AM