CODEWITHSUNDEEP
javascriptjqueryhtmlevents
Stanislav Mayorov
Stanislav Mayorov

Reputation: 4452

jQuery button event handler doesn't change content

Why can't this click event change text in #output? But it changes text in #output if I write button tag outside form tag.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<form>
    <button id="compressStart">Start</button>
</form>
<p id="output"></p>
<script src="js/jquery-2.2.3.js"></script>
<script src="js/test.js"></script>
</body>
</html>

JS

"use strict";

$(function () {
    $("#compressStart").click(getDecompressInput);

});

function getDecompressInput() {
    $("#output").text('Hello');
}

Upvotes: 1

Views: 60

Answers (1)

Satpal
Satpal

Reputation: 133403

Since you are using <button></button> element inside the form, its default behavior is to submit the form.

If you want button not to sumbit the form, then set the attribute type as button

<button type="button" id="compressStart">Start</button>

Upvotes: 3

Related Questions