CODEWITHSUNDEEP
jquerysemantic-ui
Dinesh
Dinesh

Reputation: 16428

Semantic UI Button click causing additional page reload

I am just exploring on the Semantic UI and I came across a button click event in a form and I have witnessed a bizarre behavior.

Demo

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <title>Semantic UI CDN</title>
    <link rel="stylesheet" href="semantic.css" />
    <script src="jquery.min.js"></script>
    <script src="semantic.js"></script>
</head>

<body style="margin:1em;">
    <!-- Your Semantic UI Code -->
    <br/><br/>

    <h1 class="ui center aligned icon header">
            First Form
    </h1>

    <form class="ui form"  style="">

        <div class="inline fields" id="ir_num_row_div">
                <div class="three wide field required">
                    <label>Name</label>
                </div>
                <div class="five wide field">
                    <input type="text" id="name" placeholder="Your good name goes here..">
                </div>
        </div>


        <div class="inline fields">
            <div class="three wide field required">
                <label>Place</label>
            </div>
            <div style="width: 290px;">
                <input type="text" placeholder="Where are you from ?">
            </div>

            <button style="margin:1em;" class="ui primary button" id="btn_validate">Validate</button>

        </div>

    </form>
    <script type="text/javascript">

        $("#btn_validate").click(function(){
            alert("you clicked me");
            // Why page reloading here ?...
        }); 

    </script>
</body>

</html>

After clicking the Validate button, the page is going for reload additionally after showing the alert messgae.

Where I am making the mistake here ?

Upvotes: 3

Views: 3986

Answers (2)

Goran Mottram
Goran Mottram

Reputation: 6304

To prevent a <button> element submitting the form, you will need to add a type="button" attribute.

An extract from <button> HTML | MDN:

type

The type of the button. Possible values are:

  • submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
  • reset: The button resets all the controls to their initial values.
  • button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
  • menu: The button opens a popup menu defined via its designated <menu> element.

Upvotes: 8

Jarred
Jarred

Reputation: 11

The button tag should be a div, according to this comment: https://github.com/Semantic-Org/Semantic-UI/issues/3493#issuecomment-182349807

Upvotes: 0

Related Questions