fishercoder fishercoder - 3 months ago 19
Javascript Question

django javascript behaving oddly

I've a button called "Add new usage", basically, when user clicks it, it'll display the form, a pretty simple behavior, but I don't understand how it always triggers the action in the form underneath it, I'm very confused, here's my code:

<div class="row">
<p style="padding-left: 0.5cm;">
<button id="create_new_spa" class="btn btn-small btn-primary"
onclick="javascript:show_create_new_usage_form();" type='submit'
onclick="this.disabled=true">
Add new usage
</button>
</p>
</div>
<div class="row" id="create_new_usage_form" style="display:none">
<form method="post" action="/purchasing/item_info_spa_details_update/">
</form>
</div>


And here's my js code:

{% block jquery2 %}
function show_create_new_usage_form() {
$("#create_new_usage_form").show();
}{% endblock %}


So, I was expecting to click the "Add new usage" button, then the form shows up, however, now it displays form instantly, and following that, instantly within in like 20 ms, it quickly goes to action in the form, doesn't allow the user to see the form, and then quickly hides the form again.

I cannot see anything wrong with the code, please help!
Thanks a lot!

Answer

The show() function of jquery is used to reveal an element for a given time (default 400ms). See documentation here:

http://api.jquery.com/show/

You could e.g. use:

.css( "display", "inline" )

to show the form on click and then hide it with a dedicated function that is called via action.