Why submit didn't work in my jquery script?

Question

I find out the reason. It's my miss to add code on an old. I didn't notice an existing form is there from the very beginning and mistakenly add anther form in it. I keep the original content.

My html and script is like below. It's using Django and it's a Django template but I think this is a issue not related to Django. It displays a list of dir or files(if any) which are arranged in ul and li elements. When I click on any list item(li element), I expect it will trigger a submit. I can saw the alert() window, but I didn't see the post request from the server side. I have a similar snippet in another place of my project and that works, but this don't. I can't think out what I had missed?

<form id="id_f_sel" action="{% url 'integratedTest:addCase' %}" method="post">
        {% csrf_token %}
        <input type="hidden" id="id_f_clked" name="f_clked" value="">
            <ul id="id_dirlist">
                {%for item in dirs %}
                    <li><img src="{% static 'image/folder.png' %}" alt="unclicked folder image">
                    <span class="caret">{{item}}</span></li>
                {%endfor%}
            </ul>
        
            <ul id="id_flist">
                {%for item in files %}
                    <li><img src="{% static 'image/file.png' %}" alt="file image">
                    <span class="caret">{{item}}</span></li>
                {%endfor%}
            </ul>            
        </form>

<script>  
    $(document).ready(function() {    
        $('li').on('click', function() { 
          clk_val = $(this).text()  
          alert(clk_val)
          $('#id_f_clked').val(clk_val)  
          $('#id_f_sel').submit()          
        });
    });
</script>

The browser dev windows networks tab is very clean. It seems no request is sent out. Some lines "[Violation] 'click' handler took 1272ms" I can't understand.

Answer 1

I would try to use a <input type="submit"> instead of using a li with a click function. Or try to prevent your form from being submitted and then trigger the function.

Follow the documentation!

https://api.jquery.com/submit/