Develop Reference

Enable bootstrap 4 'spinner' after submit button on HTML form (Flask)

What i'm after doing is
a) show the regular submit button
b) when you hit submit, the spinner version appears
c) the form submits and my Flask code goes to the database call.
d) then when the database call is finished it shows the result on a new page.
I'm okay with A, C and D..... they work right now, but I can't fathom out the spinner switch bit.
I've been trying and failing miserably to get all sorts of javascript copied and pasted from a whole host of stackoverflow searches.
Most have some JS function like on('click', function..... but I don't know where to place that in the HTML....
Could I do some CSS container swap trick?
Apologies for being a newb!!
Here's my little form and buttons.
<form class = "js-battery-form" action="/home" method="POST">
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text form-control-sm" for="battery_size">Battery size</label>
</div>
<select class="custom-select custom-select-sm" id="battery_size", name="battery_size">
<option value="1.2">1.2kWh</option>
<option value="2.4">2.4kWh</option>
<option value="3.6" selected>3.6kWh</option>
<option value="4.8">4.8kWh</option>
<option value="7.2">7.2kWh</option>
</select>
</div>
<button type="submit" id="btn" class="btn btn-primary btn-sm btn-block" >Submit Query</button>
<button class="btn btn-primary btn-sm btn-block">Submit Query
<span class="spinner-border spinner-border-sm"></span>
</button>
</form>```

this worked for me. Altered slightly though as for some reason i couldn't get the spinner to spin:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
$(document).ready(function() {
$("#btnFetch").click(function() {
// disable button
$(this).prop("disabled", true);
// add spinner to button
$(this).html(
`<i class="fa fa-spinner fa-spin"></i> Loading`
);
$("#batteryform").submit();
});
});
</script>

Think i've solved this one for anyone interested.
https://jsfiddle.net/zarch/2w6Lnp4m/3/
So I sorted a working spinner in JS Fiddle (see above) using $(document).ready(function(), but it wouldn't fire on my webpage.
I've got my JS at the end of my HTML at the bottom of the page, so it turns out you need to load the JS before the $(document).ready(function() .
So I moved the src="https://code.jquery.com/jquery-3.4.1.slim.min.js" etc to BEFORE the $(document).ready(function()
Then I hit another problem, the spinner worked but the form never submitted. It just sat there spinning forever.
So I added an id tag to the form "battery-form" and then made a submit call at the end of the $(document).ready(function()
$("#battery-form").submit();
Hope this helps someone out.

Submit form after search button is pressed using bootstrap

<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Filter</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>electronics</li>
<li>movies</li>
<li class="divider"></li>
<li>All</li>
</ul>
</div>
<form method="POST" name="form" action="#">
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="text" class="form-control" name="x" id="query" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</span>
</form>
</div>
</div>
</div>
</div>
ISSUE
Everytime I press Go button; I redirect to same page; which I want however by drop down acts funky; like it doesn't replace the 'filter' button with appropriate choosen filter inside dropdown-menu when after the form gets submitted. Here's the code for that. However before I press go button it works as expected. What could be happening?
<script>
$(document).ready(function(e){
$('.search-panel .dropdown-menu').find('a').click(function(e) {
e.preventDefault();
var param = $(this).attr("href").replace("#","");
var concept = $(this).text();
$('.search-panel span#search_concept').text(concept);
$('.input-group #search_param').val(param);
});
});
</script>
JS FIDDLE: https://jsfiddle.net/0e37tvyx/

There is nothing wrong in this. Your fiddle code works fine for all UI change operations. But because your form supports POST method, all your form parameters are submitted as POST request. You have three possible options (may be more than that too) to preserve the state of last chosen filters:
Use ajax request instead of form submit with entire page refresh. In this way you will have to add content from server response in your page; that is search results.
If your content is generating dynamically. I mean to say you are using PHP / JSP / ASP / Any Other Templating Library, you can use that, to update the HTML code based upon the search request, i.e. search_param request param.
The other way is use cookies. When user changes the option in front end preserve the filter option search_param in cookies. And on ready state of document; read those saved cookies if exists or fallback to default option all if not already stored in cookies.
Check out the fiddle for cookie based implementation. Not that I have added cookies plugin of jQuery.
https://jsfiddle.net/ksbora/3w6k171f/2
Note: Cookies has size limitations too and cross site origination restrictions. So, be careful which option you choose.

Javascript: Repeatedly Auto Refresh Webpage with an ON-OFF Buttons

I would like to use Javascript to auto-refresh my webpage while users can choose to turn on/turn off the auto-refresh function with two different buttons (Please be aware that the buttons are using <label> and <input> tag). I have tried my best to write the code but I still do not know how to link up these two codes so that it can function correctly.
Also, if user choose the buttons of auto-refresh ON, I want to keep auto refresh continuously after its first load instead of just auto refreshing only once.
Would you please help me to correct my codes, please? Thank you.
The code for ON and OFF buttons (two individual buttons):
<div class="page-header-actions" data-toggle="buttons" role="group">
<label class="btn btn-outline btn-primary active">
<input type="radio" name="options" autocomplete="off" value="autorefreshoff" checked />
<i class="icon wb-check text-active" aria-hidden="true"></i> Auto Refresh OFF
</label>
<label onClick="startrefreshon" class="btn btn-outline btn-primary">
<input type="radio" autocomplete="off" value="autorefreshon" />
<i class="icon wb-check text-active" aria-hidden="true"></i> Auto Refresh ON
</label>
</div>
The code for auto-refresh function:
<script type='text/javascript'>
setTimeout(function(){
window.location.reload(1);
}, 5000);
</script>

Here are a few things you need to do:
Both the input type="radio" should have same name.
Give the 'auto refresh on' button an ID, so that you can reference it easily in JavaScript code (say auto-refresh-checkbox).
Write a reload function that checks if the checkbox is checked
code:
function reloadPage(){
var refreshEnabled = document.getElementById('auto-refresh-checkbox');
if(refreshEnabled.checked) {
window.location.reload(1);
}
}
Then call this function via setInterval
setInterval(reloadPage, 5000);
PS: The checked "auto refresh" radio will lose it's value on page reload, so you might have to save the value using localStorage or something else.

Can't run function from button onClick

I'm trying to run a function from a button onClick event and for some really strange reason, it doesn't want to work.
I want to get the function to run from the button with the onClick attribute of "all()" however it doesn't work but when I changed it to an anchor with a href attribute of "javascript:all()" it worked?
Html:
<div id="content">
<input id="heroes" type="text" class="form-control" id="tokenfield-typeahead" />
<button id="all" onClick="all()">Select/Deselect All</button>
<button id="random" onClick="random()">Random</button>
<!-- Example Link to Prove Point -->
Example: Select/Deselect All
</div>
jsfiddle: http://jsfiddle.net/spedwards/2T9TA/
Can anyone tell me why this isn't working? If need be, I'll make a javascript click event instead but I'd rather not.

Not sure why its not working, but I tried changing you all name function to allt and it worked:
<a onclick="allt()">Example: Select/Deselect All</a>
function allt() {
//your code
}

I believe you will need a type attribute in your tag. So, try this:
<button id="all" type="button" onClick="all()">Select/Deselect All</button>

Bootstrap 3 radio button correct syntax

So I have been in the process of migrating my current project from Bootstrap 2.3 to Bootstrap 3 which has had some major structural changes particularly to due with radio buttons. Currently I have
HTML:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input id="emViewMacsButton" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton" name="options" type="radio">Settings
</label>
</div>
Script Code:
$('#emViewMacsButton').on('click',emViewMacs());
$('#emViewTagsButton').on('click',emViewTags());
$('#emViewSettingsButton').on('click',emViewSettings());
My problem lies in that I have setup my program that each of the different radio buttons must access a different function to display table data. The .on('click') function returns nothing. I've also tried $('input[name=options]') but the active attribute isn't set for any of the radio buttons on the returned piece of HTML .
What would be the correct structure for this ?

http://jsbin.com/uwezip/1/edit
when passing a function ( myFunction() ) into another function callback, just remove the ()
$(function(){ // DOM is now ready to be manipulated
$('#emViewMacsButton').on('change',emViewMacs);
$('#emViewTagsButton').on('change',emViewTags);
$('#emViewSettingsButton').on('change',emViewSettings);
});