dreami dreami - 7 months ago 33
HTML Question

Why aren't my onclick events working?

Here is a snippet of my code on jsfiddle.

I want the "+ Create Forum" button to show the form, "Cancel" button to reset the form and hide it, and if you want to see the form, delete "style="display: none".

I used a lot of examples out of w3schools and I have tried to use all its examples of writing a show and hide, one of the resets worked but it was a onclick="this.reset()" which wasn't what I wanted because I wanted it to hide too.

<html>
<body>
<button class="btn btn-default" type="submit" id="createform">+ Create Forum</button>
<div class="form-group" id="createForum">
<form action="forums.php" method="get" id="forumForm" style="display: none">
<label>Forum name:</label>
<input type="text" class="form-control" id="forumName">
<label>Description:</label>
<textarea class="form-control" rows="5" id="description"></textarea>
<button class="btn btn-danger" type="submit" name="create">Crear</button>
<input type="button" value="Reset Form" onclick="clearing()">
</form>
</div>
</body>

<script type="text/javascript">
$("#createform").click(function() {
$("#forumForm").show();
});

function clearing() {
document.getElementById("forumForm").reset();
}
</script>

Answer

Try this:

  
$(document).ready(function(){
 $("#createform").click(function() {
 $("#forumForm").show();
});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<html>
<body>
<button class="btn btn-default" type="submit" id="createform">+ Create Forum</button>
<div class="form-group" id="createForum">
<form action="forums.php" method="get" id="forumForm" style="display: none">
<label>Forum name:</label>
<input type="text" class="form-control" id="forumName">
<label>Description:</label>
<textarea class="form-control" rows="5" id="description"></textarea>
<button class="btn btn-danger" type="submit" name="create">Crear</button>
<input type="button" value="Reset Form" onclick="clearing()">
</form>
</div>
</body>
</html>