Develop Reference

Loader pops up and hangs when there is a form error on page submission

I am currently using this javascript to popup a loader when I click the submit button. The loader works fine when there is no form error and shows the response after waiting. However, the loader keeps spinning when there is a form input error popup and the request does not get submitted to backend but loader keeps spinning infinitely.
<div id="loader" class= "lds-dual-ring hidden overlay" >
<div class="lds-dual-ring hidden overlay"> </div>
<div class="loadcontent"><div><strong>Working on your request...it may take up to 2 minutes.</strong></div></div>
</div>
$('#submitBtn').click(function () {
$('#loader').removeClass('hidden')
// $('#loader').html('Loading').addClass('loadcontent')
// $("#loading").html("Loading");
})
</script>```
Here is the line where the pattern is being matched and form validation is being done upon clicking submit.
<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 eg. 1/1/48 or 2/1/16" pattern="^[12]/1/(?:[1-3]\d|4[0-8]|[1-9])$" required=true %}
{% endifequal %} </div>
</div>
How can I make this loader script run only when there is no form input error? I am using Django, Javascript, html and I am a beginner in JS.

I asked so many people for the solution but I guess no one was able to understand this without looking at the complete and hence no one provided solution, finally here is the solution:
my javascript was getting triggered on the "click" event, instead I had to change it to the "submit" event for my form id. That's it!!
so my new javascript code looks like:
$('#configForm').submit(function () {
$('#loader').removeClass('hidden')
console.log("HERE LOADER")
// $('#loader').html('Loading').addClass('loadcontent')
// $("#loading").html("Loading");
})
</script>
That's all, that's the solution.

Two submit buttons, one is always hidden, how to hit enter and use the correct submit button

BEGINNING OF EDITED*** Updated function, however, hitting "enter" doesn't trigger the second submit button. Also adding this line of code:
document.getElementById('btn-default').removeAttribute("disabled");
in case the user wants to switch back to the original search button instead.
END OF EDIT ***
I have two submit buttons, the first one is the default for a general input search box. However, if the user clicks on the "Advance" link it will hide the general search input along with the submit button. And display the "Advance" submit button. When hitting enter it will default to the first submit button. Is there a way to detect when a submit button is hidden, to use the submit button that is displayed? Here is part of my code below:
FORM:
<form id='searchGroup' class='form-inline mt-2 mt-md-0' action='test.php' method='POST'>
<div class="col-md-5" id="defaultDisplay" >
<input class='form-control mr-sm-2' type='text' placeholder='' aria-label='Search' name='SearchAll' autofocus='autofocus'>
<!-- STANDARD SEARCH BUTTON -->
<input id='btn-default' class='btn btn-default my-2 my-sm-0' type='submit' name='SearchStd' value='Search'/>
</div>
<div class="collapse" id="collapseExample">
<!-- MULTIPLE INPUTS HERE -->
<!-- ADVANCED SEARCH BUTTON -->
<input class='btn btn-primary' type='submit' name='SearchAdv' value='Search'/>
</div>
</form>
FUNCTION to display div:
<script>
function switchVisible() {
if (document.getElementById('defaultDisplay')) {
if (document.getElementById('defaultDisplay').style.display == 'none') {
document.getElementById('defaultDisplay').style.display = 'block';
document.getElementById('btn-default').removeAttribute("disabled");
}
else {
document.getElementById('defaultDisplay').style.display = 'none';
document.getElementById('btn-default').setAttribute("disabled", "disabled");
}
}
}
</script>

One thing you could do is to just create two forms, one for basic search and one for advanced search. Then toggle the display between the two. It's a small, negligible redundancy that would fix this issue without resorting to JavaScript workarounds.
Alternatively, just use one form for both simple and advanced, and only having one submit button. Treat your form as an advanced form to begin with. A "simple search" would simply be an advanced search with empty advanced fields.

Any input or button on the form with TYPE="submit" will be linked to the ENTER key.
Notably in your case, if two such inputs have the TYPE="submit", the first one will be triggered on enter keypress.
One solution could be to set the DISABLED attribute on the one you do not want to trigger on ENTER keypress.
According to your requirement, you want the 'Advanced' submit button to be disabled to begin with, so edit your HTML to include the disabled property like this:
<input class='btn btn-primary' type='submit' name='SearchAdv' value='Search' disabled="disabled" />
Then, when you execute the code to show the 'Advanced' section, add the Disabled attribute to the 'default' section submit button:
document.querySelector('input[name="SearchStd"]').setAttribute('disabled','disabled');
while at the same time removing the DISABLED attribute from the 'advanced' section's button:
document.querySelector('input[name="SearchAdv"]').removeAttribute('disabled','disabled');
At this stage, I should mention I have noticed that your JavaScript code is working in a slightly different manner to how I understand your app to work:
It seems you are saying for each toggle "if the DEFAULT search is display block (shown), set display none (hide it), otherwise if it is not shown, show it"
I'm pretty sure you planned to be toggling the Advanced section, not the Default section (as the Default is shown by DEFAULT!). So assuming this is true and assuming you already made the HTML change mentioned above, AND assuming you've made a CSS change so that #collapseExample has display NONE to begin with... you'd want you JS like this:
<script>
function switchVisible() {
if (document.getElementById('collapseExample')) {
if (document.getElementById('collapseExample').style.display == 'none') {
document.getElementById('collapseExample').style.display = 'block';
document.querySelector('input[name="SearchStd"]').setAttribute('disabled','disabled');
document.querySelector('input[name="SearchAdv"]').removeAttribute('disabled','disabled');
}
else {
document.getElementById('collapseExample').style.display = 'none';
document.querySelector('input[name="SearchStd"]').removeAttribute('disabled','disabled');
document.querySelector('input[name="SearchAdv"]').setAttribute('disabled','disabled');
}
}
}
</script>
There are some ways to improve this by the way, for example you could look into "caching elements" so you don't have to repeat the getElementById's, and you could add IDs to the actual inputs which is considered good practice when manipulating unique elements, but to keep it simple and answer your actual question, this is my answer. Good luck!

Why won't the change in CSS styling caused by JavaScript remain after script finishes running?

Edit: Title makes more sense now.
I'm currently writing basic CRUD functionality using a popular web framework. In the edit section of my app, I have a 'Delete' button. When the button is clicked, I want a div containing text and two more buttons to appear, giving me the option to continue with the deletion. The delete functionality is handled by the framework, which is working just fine.
(I hate that inline CSS as much as you do, but bear with me, makes it easier for illustration purposes)
My HTML:
<style type='text/css'>
#overlay {
visibility: hidden; }
</style>
<form method='POST' action='', enctype='multipart/form-data'> {% csrf_token %}
{{form.as_p}}
<input type='submit' name='save' value='Save post'/>
<button onclick='toggleDeletion()'>Delete</button>
<div id='overlay'>
<p>Are you sure you want to delete this post? It‘ll be lost forever...</p>
<form method='POST' enctype='multipart/form-data'> {% csrf_token %}
<input type='submit' name='yes' value='Yes' />
<button onclick='toggleDeletion()'>No</button>
</form>
</div>
</form>
My JavaScript:
function toggleDeletion() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == 'hidden') ? 'hidden' : 'visible';
}
When I click the first 'Delete' button it works for about a half a second; the overlay div becomes visible. However it then vanishes, and doesn't come back. I'm relatively fresh to JavaScript, though not programming in general, and I am assuming there's some nuance of the language I'm completely missing out on. It doesn't appear to be looping through the function continuously, nor does it break. It just runs fleetingly. That or a stupid typo that's making me look like a fool.

You click the button
The JavaScript runs and modifies the DOM loaded into the browser
The form submits (because you clicked a submit button)
The browser loads a new page (which doesn't have the changes you made to the DOM with JS because they were only local)
If you don't want to submit the form when you click the button, don't use a submit button. Add type="button".

When your form submits, the page refreshes and you thus need to reapply the js/css changes on document load... or submit using AJAX and change the input type from submit to button / or return false on clicking the submit button.

How to set focus on text box whenever it appears on the screen

I've made a web application That starts from a specific amount and every time a donation is made it counts down and shows how much is needed. And at one time I might have about 10-20 of these counting down and I am always creating new ones. Now when I am doing that it would be nice that when I click the button it automatically focuses on the text field for ease of use. however I can't quite get that to work.
The window to set the countdown is shown using angularjs dialogs/modals. This means that when I click the a button it writes code onto the page that shows the dialog/modal and when I submit it it is removed from the page completely.
The first time around when I click the button it focuses on the text box and I can type the number and press enter and it's submitted, now I want to create a new one. I click the button, up comes the modal but now I have to grab the mouse, move it to the input and click it. Waste of time and not user friendly.
What I'm asking is for a way to have it focus on the text field when using modals every time I click the button.
here's the window:
<form name="formCountdown" novalidate class="css-form">
<div modal="showCountdownModal" close="showCountdownModal = false" options="opts" ng-cloak>
<div class="modal-header">
<h4>Enter Countdown Amount</h4>
</div>
<div class="modal-body">
<input id="focusbox" type="number" min="1" autofocus required ng-model="countDownAmount" name="countDownAmount" ui-keypress="{13:'setCountdown()'}" select-on-focus />
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary cancel" ng-disabled="formCountdown.$invalid" ng-click="setCountdown()">Set</button>
</div>
</div>
</form>
I've tried using autofocus, and that works fine the first time you press the button after loading the page. but the second and up it does not.
I've also tried using this jquery code with no luck:
<script>
$("#focusbtn").click(function() {
$("#focusbox").focus();
});
</script>
And now I am completely lost and would really love it if someone could help me out here.

Edit: forgot to put in the timeout, to make sure the browser is ready!
add the following line to your setCountDown() function:
$timeout(function (){
document.querySelector('#focusbox').focus();
},0)
You need to inject the $timeout in your controller
That will probably do the trick!
However, this will work, but dom manipulation should be done in a directive!

I copied your posted code together with the script and it works just fine. I'm not sure if I understood the problem but the autofocus works well in my end. Autofocus is present after the page has loaded or refreshed and even after the button has been clicked. Of course the autofocus will be removed if a click outside the input text has been triggered.
Morever, I think Autofocus is an attribute by HTML5. You might want to include in your HTML or maybe it is just a browser compatibility issue.
You can test or check if autofocus is supported by your browser at http://html5test.com/.
Hope this help somehow.
EDIT:
Try this on your script.
$(document).ready(function() {
$(".modalName").on('shown', function() {
$(this).find("[autofocus]:first").focus();
});
});

How to create an HTML button that show more text same page

I'm working with html and javascript. My problems is, in one webpage a show a plot and a few button. When the user press any of this button I need show 3 or 4 options but in the same page without switching pages.
Below is my code
<form action="MyPage">
<button type="submit" value="More Options">
</form>
redirect to an other page.What I can do?

First of all, get rid of type="submit". That's what's causing the page to do stuff you don't want. The second thing is to add an onclick handler. It should return false to avoid behavior like "submit". The variable 'this' will pass the button to your function, which you might need in that code. Then fill in the body of addMoreStuff() with your code to, well, add more stuff!
<form action="MyPage">
<button onclick="addMoreStuff(this); return false; ">More Options</button>
</form>
<script type="text/javascript">
function addMoreStuff(button) {
/* your code here */
}
</script>

Drop the form (use the button alone), and look into jQuery. It's extremely easy to use, and it'll help you quickly build code your application.
HTML
<button type="submit" value="More Options" id="more">
JavaScript (jQuery)
// run "add_options" when someone clicks on the button
jQuery('button#more').on('click', add_options)
function add_options() {
//code here to add more options
}