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.
<!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 ?
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.
The button tag should be a div, according to this comment: https://github.com/Semantic-Org/Semantic-UI/issues/3493#issuecomment-182349807