Loader pops up and stops running: form error when page is submitted
P粉216203545
2023-09-04 10:52:57
<p>I'm currently using this javascript to pop up a loader when the submit button is clicked. When there are no form errors, the loader works fine and displays the response after waiting. However, when a form input error pops up, the loader keeps spinning and the request is not submitted to the backend, but the loader spins infinitely. </p>
<pre class="brush:php;toolbar:false;"><div id="loader" class= "lds-dual-ring hidden overlay" >
<div class="lds-dual-ring hidden overlay"> </div>
<div class="loadcontent"><div><strong>Your request is being processed... It may take up to 2 minutes. </strong></div></div>
</div></pre>
<pre class="brush:php;toolbar:false;">$('#submitBtn').click(function () {
$('#loader').removeClass('hidden')
// $('#loader').html('Loading').addClass('loadcontent')
// $("#loading").html("Loading");
})
</script>```
This is the line of code that matches the pattern and does the form validation when submit is clicked. </pre>
<pre class="brush:php;toolbar:false;"><div class="form-group">
<div class="form-control"style="padding: 0;">
{% ifequal field.name 'Port' %}
{% render_field field class="rowforinput marginforfields form-control" style="height: 23px; margin-left: 0; margin-right: 0" title=" For example: 1/1/48 or 2/1/ 16" pattern="^[12]/1/(?:[1-3]\d|4[0-8]|[1-9])$" required=true %}
{% endifequal %} </div>
</div></pre>
<pre class="brush:php;toolbar:false;">How can I make this loader script only run when there are no form input errors? I'm working with Django, Javascript and html and I'm a beginner in JS. </pre></p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I asked many people for the solution, but I guess no one could understand the problem without seeing the full code, so no one offered a solution, and finally this was the solution:
My javascript code fires on the "click" event and I need to change it to the "submit" event to accommodate my form id. That's it! !
So my new javascript code is as follows:
$('#configForm').submit(function () { $('#loader').removeClass('hidden') console.log("HERE LOADER") // $('#loader').html('Loading').addClass('loadcontent') // $("#loading").html("Loading"); }) </script>That's it, that's the solution.