CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapaccordion
Milano
Milano

Reputation: 18705

How to prevent accordion toggle when click on submit input?

I can't figure out how to prevent default behaviour of accordion when I click on an icon which is a submit of POST form.

<tr data-toggle="collapse" data-target="#record_309" class="accordion-toggle even">

                            <td>
                            </td>
                            ...
                            <td class="action">                                      
<div class="col-lg-12">
    <form class="col-lg-3" action="/dashboard/settings/" method="get">
        <input type="hidden" name="product_id" value="309">
        <input style="max-width:15px;" type="image" onclick="preventAccordion(event);" src="/static/icons/alarm-1.png">
    </form>
    <form class="col-lg-3" action="/products/reset/" method="post"><input type="hidden" name="csrfmiddlewaretoken" value="<CSRFTOKEN>">
        <input type="hidden" name="product_id" value="309">
        <input style="max-width:15px;" type="image" src="/static/icons/restart.png">
    </form>    
</div>        
</td>        
</tr>

As you can see, in the first form of the last column, I'm trying to call preventAccordion(e) function to prevent showing the accordion. The problem is that preventDefault(event) is preventing form submit.

<script>
        window.preventAccordion = function(e) {
            e.preventDefault();
        }
</script>

Do you know how to prevent accordion from toggling when user clicks on this icon?

Upvotes: 3

Views: 1472

Answers (1)

K Scandrett
K Scandrett

Reputation: 16540

Use e.stopPropagation() instead.

Note that this will not prevent other handlers on the same element from running. http://api.jquery.com/event.stopPropagation

Example: http://jsfiddle.net/1o78c2os/2/

Upvotes: 1

Related Questions