Develop Reference

How to display another element when hover disabled button?

I have a disabled button and I want to display a message in the other side of the page (NOT A CHILD ELEMENT) when I hover this button. How to do that? I already tried using jquery and CSS but it doens't work:
#deleteManagerWarning{
display: none;
color: red;
float: right;
}
#disabledCloseBtn:hover + #deleteManagerWarning{
display: block;
}
and
$("#disabledCloseBtn").hover(function(){
$("#deleteManagerWarning").css("display", "block");
});
This is the html button:
<button type="submit"
class="btn-close"
id="disabledCloseBtn"
name="disabledCloseBtn"
disabled
aria-label="Close">
This is the html message:
<span id="deleteManagerWarning">Unable to delete Manager</span>

If the two elements are far separated from each other in the markup, CSS won't help you-- you need a relationship like descendent or adjacent. In this case, your jQuery would be working if the button were not disabled:
$(document).ready(() => {
$("#disabledCloseBtn").hover(function(){
console.log('hover');
$("#deleteManagerWarning").css("display", "block");
});
});
#deleteManagerWarning {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button type="submit" class="btn-close" id="disabledCloseBtn" name="disabledCloseBtn" aria-label="Close">
Close
</button>
</div>
<div>
<p>Dummy content</p>
<p>Dummy content</p>
<p>Dummy content</p>
<span id="deleteManagerWarning">Unable to delete Manager</span>
</div>
However, it appears that jQuery does not (or cannot) fire the hover event for a disabled button-- the following example is exactly the same as the first except the button is disabled:
$(document).ready(() => {
$("#disabledCloseBtn").hover(function(){
console.log('hover');
$("#deleteManagerWarning").css("display", "block");
});
});
#deleteManagerWarning {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button type="submit" class="btn-close" id="disabledCloseBtn" name="disabledCloseBtn" disabled aria-label="Close">
Close
</button>
</div>
<div>
<p>Dummy content</p>
<p>Dummy content</p>
<p>Dummy content</p>
<span id="deleteManagerWarning">Unable to delete Manager</span>
</div>
In this case, you have a few alternative options you can employ:
Fake the disabled state on the button: reduce the opacity, remove click handlers, make sure you update the ARIA messaging to report the button as disabled. (You could also fake the button entirely using a <div> and wiring up all the accessibility and interactivity, but this would be much more difficult and to a similar effect). This may actually be more accessible, because a disabled button isn't focusable by keyboard.
Use a different hover target: Instead of the button, try using the wrapper around the button, or float something invisible over the button.
Here is an example faking the disabled state:
$(document).ready(() => {
$("#disabledCloseBtn").hover(
function() {
$("#deleteManagerWarning").css("display", "block");
},
function() {
$("#deleteManagerWarning").css("display", "none");
},
);
});
#deleteManagerWarning {
display: none;
}
.disabled {
opacity: 0.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button type="submit" class="btn-close disabled" id="disabledCloseBtn" name="disabledCloseBtn" aria-label="Close">
Close
</button>
</div>
<div>
<p>Dummy content</p>
<p>Dummy content</p>
<p>Dummy content</p>
<span id="deleteManagerWarning">Unable to delete Manager</span>
</div>
Just make sure you are figuring out a way to communicate that it is disabled to assistive technologies -- and remember, content that is popping into the existence on the other side of the page probably needs to be appropriately announced to screen readers.

Problem
It appears that JavaScript and jQuery do not detect disabled tags (I learned something today).
CSS has no problem:
Figure I
<button class='A'>A</button>
<output class='A'>HELLO WORLD!</output>
Figure II
button.A:hover:disabled + output.A {
display: inline-block;
}
/* 👍 */
Figure III
$('button.A').hover(enter, exit)
// OR
document.querySelector('button.A').addEventListener('mouseenter', enter);
document.querySelector('button.A').addEventListener('mouseleave', exit);
/* 👎 */
If you need to use jQuery or JavaScript you'll need to wrap the disabled button in another tag (See Example C and D). Note, the JavaScript portion of Figure III is slightly different than the JavaScript in Example D. In Figure III the events used are "mouseenter" and "mouseleave" which are the equivalent of the jQuery .hover() method. In Example D the events "mouseover" and "mouseout" were used because Example D was setup to delegate the events which requires bubbling in which "mouseenter" and "mouseleave" do not do. At the bottom of this answer are links to everything either discussed or demonstrated.
Solutions
CSS: A combination of :hover, :disabled, and sibling combinators (+ and ~). If given the exact HTML layout, I could assist you in obtaining the exact selector. If it's too much HTML, a link to a Plunker, Pen, or Fiddle will be fine.
From what I already know, I believe the general sibling combinator will work (see Example B)
OR
jQ/JS: Wrap the disabled button in another tag and target that instead.
/**
* Example C - button wrapper (jQuery)
*/
$("button.C, menu.C").hover(jQEnter, jQExit);
function jQEnter(e) {
/* DEMO =------------------= */
console.clear();
console.log(this.tagName);
/* =-----------------------= */
$("output.C").show();
}
function jQExit(e) {
$("output.C").hide();
}
/**
* Example D - button wrapper (JavaScript)
*/
document.querySelector('fieldset.D').addEventListener('mouseover', JSEnter);
document.querySelector('fieldset.D').addEventListener('mouseout', JSExit);
function JSEnter(e) {
/* DEMO =------------------= */
console.clear();
console.log(e.target.tagName);
/* =-----------------------= */
if (e.target.matches('button.D, menu.D')) {
document.querySelector('output.D').style.display = 'inline-block';
}
}
function JSExit(e) {
if (e.target.matches('button.D, menu.D')) {
document.querySelector('output.D').style.display = 'none';
}
}
/**
* Example A - adjacent sibling combinator (CSS)
*/
button.A:disabled:hover+output.A {
display: inline-block;
}
/**
* Example B - general sibling combinator (CSS)
*/
button.B:disabled:hover~output.B {
display: inline-block;
}
<style>
/* DEMO =----------------------=*/
fieldset {
position: relative;
margin-bottom: 20px;
}
fieldset:nth-of-type(2) {
padding-bottom: 25px;
}
fieldset fieldset {
margin-bottom: 5px;
}
pre {
outline: dashed blue 1px;
}
p {
margin-top: -3px;
margin-bottom: -3px;
}
output {
position: absolute;
z-index: 1;
display: none;
margin-bottom: 4px;
color: red;
}
menu {
max-width: max-content;
padding: 10px;
outline: red dashed 1px;
}
.as-console-row::after {
width: 0;
font-size: 0;
}
.as-console-row-code {
width: 100%;
word-break: break-word;
}
.as-console-wrapper {
min-height: 25% !important;
max-width: 50%;
margin-left: 50%;
}
/* =---------------------------= */
</style>
<fieldset class='A'>
<legend>Example A - <code>output.A</code> is <b>directly</b> after <code>button.A</code></legend>
<pre><code>
button.A:disabled:hover + output.A {
display: inline-block;
}
</code></pre>
<button class="A" disabled>button A</button>
<output class="A">output A</output>
</fieldset>
<fieldset class='B'>
<legend>Example B - <code>output.B</code> is after <code>button.B</code></legend>
<p><b>and</b> there could be other tags between them</p>
<pre><code>
button.B:disabled:hover ~ output.B {
display: inline-block;
}
</code></pre>
<button class="B" disabled>button B</button>
<fieldset disabled>
<legend>Manager</legend>
</fieldset>
<output class="B">output B</output>
</fieldset>
<fieldset class='C'>
<legend>Example C - <code>output.C</code> is anywhere on page</legend>
<output class="C">output C</output>
<menu class='C'>
<button class="C" disabled>button C</button>
</menu>
<button class="C" disabled>button C</button>
<button class="C">button C ENABLED</button>
</fieldset>
<fieldset class='D'>
<legend>Example D - <code>output.D</code> is anywhere on this page</legend>
<output class="D">output D</output>
<menu class='D'>
<button class="D" disabled>button D</button>
</menu>
<button class="D" disabled>button D</button>
<button class="D">button D ENABLED</button>
</fieldset>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
References
HTML Attribute
disabled
CSS Selectors
:disabled
:hover
Child & Sibling Combinators
jQuery Methods
.hover()
.show() & .hide()
JavaScript Events
Events
Event Delegation

html - make column appear after clicking on button

I've been playing around with HTML and I created a column that immediately appears when I open my file in a browser. I tried moving the column and row classes around but I can't figure out how to get it so that the column doesn't appear until after I select an option from the dropdown menu. I was wondering how I could fix this issue?
<html>
<head>
<title>Testing Display</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.center{
text-align: center;
border: 3px solid #73AD21;
}
{
box-sizing: border-box;
}
.column {
float: left;
width: 30%;
padding: 10px;
height: 2000px;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
<body>
<div class ="center">
<p><div><h1>Testing Display</h1></div><br /><p>
<div class="dropdown">
<form>
<select name="list" id="list" accesskey="target" onchange="display(this)">
<option value="none">Choose an option</option>
<option value="one">Option one</option>
</select>
<input type=button value="Select" onclick="display()"/>
<div id="add"></div>
</form>
</div>
</div>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
<div id="div"></div>
</div>
</div>
<script src="order.js"></script>
</body>
</html>

Have the initial visibility of column to hidden.
Have a Javascript function to add a new class to column onChange. Something like this
function onSelect() {
//or add id to easily access unique single element.
var element = document.getElementByClassName("column")[0];
element.classList.add("showCol");
}
.column {
visibility: hidden;
...
}
.showCol {
visibility: visible;
...
}
Can also add styles and remove style onChange instead of toggling classes.

Javascript Solution, call this method in onchange event of drop down list:
function ddlChange(){
if (document.getElementById("list").value === "one"){
document.getElementsByClassName("column").style.display = "table-cell";
}
}
Using jQuery:
$("#list").change(function () {
if($('#list option:selected').val() === "one")
$(".column").css("display","table-cell");
});
Alternatively, you can also try to add or remove a class instead of changing inline CSS value.

How to properly submit form to Flask with AJAX?

I'm a beginner in Python and AJAX, why when I run my app.py with app.html, the result that I want to display are replaced with a whole form?
Here is my code:
from flask import Flask, render_template, request
app = Flask(__name__,
template_folder='C:\\Users\\iyzadsyammil\\PycharmProjects\\PVT - Copy')
#app.route('/App',methods=['GET', 'POST'])
def showapp():
error = " "
finalpb= 0
x=0
logpb=0
if request.method == 'POST':
ingor = request.form['inGOR']
ingor = float(ingor)
try:
finalpb = ingor
except ValueError:
error = "Please enter an appropriate value!"
return render_template('app.html',error=error,finalpb=finalpb)
if __name__ == "__main__":
app.run(debug=True)
This is my Python Flask file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="https://media.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAAfJAAAAJDIxMDc1NWExLTczODgtNDBhOS1iZmYwLWRmOTZjZjc2NzVhYQ.png">
<title>Invigour Tool</title>
<!-- Bootstrap core CSS -->
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<!--<link href="dashboard.css" rel="stylesheet" type="text/css">-->
<style>
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
}
/*
* Global add-ons
*/
.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/*
* Top navigation
* Hide default border to remove 1px line.
*/
.navbar-fixed-top {
border: 0;
}
/*
* Sidebar
*/
/* Hide for mobile, show later */
.sidebar {
display: none;
}
#media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}
/* Sidebar navigation */
.nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #fff;
background-color: #428bca;
}
/*
* Main content
*/
.main {
padding: 20px;
}
#media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 40px;
}
}
.main .page-header {
margin-top: 0;
}
/*
* Placeholder dashboard ideas
*/
.placeholders {
margin-bottom: 30px;
text-align: center;
}
.placeholders h4 {
margin-bottom: 0;
}
.placeholder {
margin-bottom: 20px;
}
.placeholder img {
display: inline-block;
border-radius: 50%;
}
/* Custom page footer */
.footer {
padding-top: 10px;
margin-top: 2cm;
color: #777;
border-top: 1px solid #e5e5e5;
}
.cal{
float: right;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
width: 180px;
height: 85px;
font-size: 30px;
border-radius: 24px;
background-color: limegreen;
position: relative;
right: 0.5cm;
}
.conti{
float: right;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
width: 180px;
height: 85px;
font-size: 30px;
border-radius: 24px;
background-color: limegreen;
}
.rest{
float: right;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
width: 180px;
height: 85px;
font-size: 30px;
border-radius: 24px;
background-color: limegreen;
margin-top: 3cm;
position: relative;
left: 7cm;
}
input[type="number"]{
margin-left: 3cm;
}
select[id=cor4],[id=cor5]{
width: 165px;
}
select{
margin-left: 1cm;
}
p[id=pb],[id=rs],[id=bo],[id=co],[id=uo],[id=po],[id=zf],[id=bg],[id=pg],[id=ug],[id=bw],[id=uw],[id=pw],[id=cw],[id=iow],[id=iog]{
margin-left: 4cm;
}
tr:hover{
background-color:#f5f5f5}
</style>
</head>
<body>
<div>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.invigourenergy.com/">Invigour Energy</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Dashboard</li>
<li>PVT Tool</li>
<li>Help</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Overview <span class="sr-only">(current)</span></li>
<li> </li>
<li> </li>
</ul>
<ul class="nav nav-sidebar">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<form method="POST" class="form" id="fm">
<h3>Basic PVT Application</h3>
<br>
<table>
<tr><td><u>Input Data</u></td><td></td><td></td></tr>
<tr><td>&nbsp</td></tr>
<tr><td>Solution GOR(Rs) </td><td><input type="number" step="any" id="inGOR" name="inGOR"></td><td>scf/bbl</td></tr>
<tr><td>Oil Gravity </td><td><input type="number" step="any" id="inOG"></td><td>API</td></tr>
<tr><td>Gas Specific Gravity </td><td><input type="number" step="any" id="inGG"></td><td>SG(air=1)</td></tr>
<tr><td>Temperature </td><td><input type="number" step="any" id="inT"></td><td>◦F</td></tr>
<tr><td>Pressure </td><td><input type="number" step="any" id="inP"></td><td>Psia</td></tr>
<tr><td>Mole Percent H2S </td><td><input type="number" step="any" id="inH2S"></td><td>%mole</td></tr>
<tr><td>Mole Percent CO2 </td><td><input type="number" step="any" id="inCO2"></td><td>%mole</td></tr>
<tr><td>Mole Percent N2 </td><td><input type="number" step="any" id="inN2"></td><td>%mole</td></tr>
<tr><td>Water Salinity </td><td><input type="number" step="any" id="inWS"></td><td>ppm</td></tr>
</table>
<br>
<table>
<tr><td><u>Correlation</u></td><td></td></tr>
<tr><td>&nbsp</td></tr>
<tr>
<td>Bubble Point Pressure(Pb) </td>
<td>
<select id="cor1">
<option value="none"></option>
<option value="VB">Vasquez and beggs</option>
<option value="AM">Al-Marhoun</option>
<option value="G">Glaso</option>
<option value="PF">Petrosky and Farshad</option>
<option value="S">Standing</option>
</select>
</td>
</tr>
<tr>
<td>Solution GOR(Rs)</td>
<td>
<select id="cor2">
<option value=" "></option>
<option value="VB">Vasquez and beggs</option>
<option value="AM">Al-Marhoun</option>
<option value="G">Glaso</option>
<option value="PF">Petrosky and Farshad</option>
<option value="S">Standing</option>
</select>
</td>
</tr>
<tr>
<td>Oil Formation Volume Factor(Bo) </td>
<td>
<select id="cor3">
<option value=" "></option>
<option value="VB">Vasquez and beggs</option>
<option value="AM">Al-Marhoun</option>
<option value="G">Glaso</option>
<option value="PF">Petrosky and Farshad</option>
<option value="S">Standing</option>
</select>
</td>
</tr>
<tr>
<td>Oil Viscosity(µo) </td>
<td>
<select id="cor4" size="">
<option value=" "></option>
<option value="CC">Chew Connally</option>
<option value="BR">Beggs Robinson</option>
</select>
</td>
</tr>
<tr>
<td>Water Viscosity(µw) </td>
<td>
<select id="cor5" size="">
<option value=" "></option>
<option value="Mc">Mccain</option>
<option value="BB">Brill and Beggs</option>
</select>
</td>
</tr>
</table>
<br>
<button type="button" class="conti" onclick="location.href='Out';" >Continue</button><button type="submit" id="cb" class="cal">Calculate</button>
<button type="button" class="rest" onclick="res()">Reset</button>
<br>
<table class="rlt">
<tr><td><u>Result</u></td><td></td></tr>
<tr><td>Pb</td><td><p id="pb">{{finalpb}}</p></td></tr>
<tr><td>Rs(Solution GOR)</td><td><p id="rs"></p></td></tr>
<tr><td>Bo</td><td><p id="bo"></p></td></tr>
<tr><td>Co</td><td><p id="co"></p></td></tr>
<tr><td>µo</td><td><p id="uo"></p></td></tr>
<tr><td>ρo</td><td><p id="po"></p></td></tr>
<tr><td>Z Factor</td><td><p id="zf"></p></td></tr>
<tr><td>Bg</td><td><p id="bg"></p></td></tr>
<tr><td>ρg</td><td><p id="pg"></p></td></tr>
<tr><td>µg</td><td><p id="ug"></p></td></tr>
<tr><td>Bw</td><td><p id="bw"></p></td></tr>
<tr><td>µw</td><td><p id="uw"></p></td></tr>
<tr><td>ρw</td><td><p id="pw"></p></td></tr>
<tr><td>Cw</td><td><p id="cw"></p></td></tr>
<tr><td>IFT oil-water</td><td><p id="iow"></p></td></tr>
<tr><td>IFT oil-gas</td><td><p id="iog"></p></td></tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('#fm').on('submit',function (e) {
$.ajax({
type: 'post',
url: '/App',
data: $('#fm').serialize(),
success: function (q) {
document.getElementById("pb").innerHTML= q;
}
});
e.preventDefault();
});
</script>
<br/>
<footer class="footer">
<p>Copyright © Invigour Energy 2016</p>
</footer>
</form>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="http://getbootstrap.com/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
This is my html
Please have a look at my ajax part only

Updated response:
Let me rephrase my original answer: Don't use AJAX. it is completely unnecessary. Delete all of your script items. I just took your code and made it work on my local flask environment nicely without any AJAX. Here is what you need to do:
1) Update your 'buttons' so that they are inputs, type=submit and give them the value of the name of the button you desire (e.g. Calculate).
2) Your form inputs do not have a 'name' attribute. Without that, the form has no key/value association. For example, look at your inOG input. You need to give it a name...something like name="inOG".
3) I don't know why you have your C drive as a configuration item. Maybe it's a Windows thing?
Now when you debug, you should see the form values come in nicely.
You are running into problems for a few reasons:
1) Your form is far too busy. Ideally, in my experience, the form should really only contain the necessary inputs and labels. Also, it is generally not wise to format an html page using tables. You might consider using Flask-WTF if you don't feel like coding out a form in it's entirety. One of the nice things of Flask is the ability to use templates like WTF.
2) If you set up the form nicely, then you won't even need to use AJAX, which might be preferable in your case. The once the form is submitted, your Flask code should do the rest.
2) If you are bent on using AJAX it's worth noting that your AJAX post is right in the middle of your form code. Since your browser reads code sequentially, it is picking up an AJAX post before the form has finished rendering. You should insert your <script> tag either at the top of the body or at the bottom of it.
3) You are using JQuery, which means you need to wrap any executable code in a $(document).ready function. So, once you have moved your script as mentioned above, you should write is as follows:
<script>
$(document).ready(function(){
$('#fm').on('submit',function (e) {
$.ajax({
type: 'post',
url: '/App',
data: $('#fm').serialize(),
success: function (q) {
document.getElementById("pb").innerHTML= q;
}
});
e.preventDefault();
});
}
In summary, I would suggest cleaning up your form and doing away with AJAX altogether. Looking at your form data, it doesn't seem like there is anything special that would require a break away from normal form submission.
Good Luck!

So after dealing with my own issues in Flask and AJAX, I wouldn't say don't use AJAX. As an example, I had a form that needed to be submitted and it took long enough to generate a 504. Sometimes AJAX is necessary.
In the off-case where it is necessary and you happen to be using Flask (and/or FLASK-WTF) you first need to update your form element to use the new event. This can be done with the following addition.
{{ form.my_element(**{"onchange":"my_ajax_function()"}) }}
The dictionary is passed back as a kwarg to Flask forms and sets the onchange event to use my_ajax_function() (just replace this with "onclick" if it's a button)
Next update your javascript with the new function. This function should do the following:
Get any fields required to perform this work
Start the ajax request and include the url (route), the data to be sent (if any), and what action to perform on a successful/failed request.
This will update any fields as required and keep data in existing fields. I will say that it is much easier on life if you avoid AJAX and let Flask do it's thing, but sometimes this is unavoidable.
I haven't tried just returning without a response instead of using render_template, redirect, or make_response from a post request to see if the fields remain as they were, but it's definitely something to experiment with.
I've only used AJAX for creating dynamic SelectFields, but there are some promising articles on form submissions, just looks like FlaskForms doesn't know how to convert this type of request back to the Form object since they are sent as query parameters, so you'll need to manually validate the fields after they have returned. How to submit a Flask-WTF form with Ajax

What would be the best way to make a sort of drop-down-more-info div?

I have 4 divs with a more-info button on the bottom of each, like so:
http://codepen.io/anon/pen/VpVbPq
And when a user presses ' more info ' I would like for it to extend to the bottom and show extra info, obviously.
The problem is under the more-info div, text is seen, but what if I want to hide whats under it, even if its opacity is 0.6 ?
I thought it would've been the best if I draw what I need, so here:
Codepen code below:
html
<body>
<div class="wrapper">
<div class="info">
<p>
dummy text
</p>
<div class="more-info">more info</div>
</div>
<div class="info"><div class="more-info">more info</div></div>
<div class="info"><div class="more-info">more info</div></div>
<div class="info"><div class="more-info">more info</div></div>
</div>
</body>
css
.wrapper {
width: 1045px;
margin: 0 auto;
}
.info {
width: 500px; height: 200px;
background-color: #1A5AB6;
display: inline-block;
margin: 10px;
position: relative;
font-size: 20px;
overflow: hidden;
}
.more-info {
width: 100%; height: 40px;
background-color: #0C1B44;
bottom: 0; left: 0;
display: inline-block;
position: absolute;
font-size: 20px;
color: white;
line-height: 35px;
text-align: center;
opacity: 0.6;
}
.more-info:hover {background-color: #010716;}

In order to have the text expand, you can use a little jQuery to set the height to automatically adapt to however much text there is, and hide the 'more info' button entirely:
$(".more-info").on("click", function() {
$(this).css("opacity", "0");
$(this).parent().css("height", "auto");
});
With regards to not having the text visible behind the 'more info' button, you would need to set the opacity to 1:
.more-info {
opacity: 1;
}
This naturally distorts the colour a little, but you can always change the background colour and hover colour to cover this.
I've created an updated pen showcasing this here.
Hope this helps! :)

change your class selector definition as shown below:
.more-info {
width: 100%; height: 20%;
background-color: #0C1B44;
font-size: 20px;
color: white;
display: block;
text-align: center;
opacity: 0.6;
}
Then add this css for your paragraph element:
p {
height: 75%;
overflow: hidden;
margin: 5px;
}

Your question: "what would be the best way to make a sort of drop-down-more-info div?"
There is a built in function in Boot Strap that allows you to use a "data" class that does all the crunching for you. Just call on their css and js files externally or host on your server. Familiarize yourself with their data classes and call on their css/js classes to simplify previously arduous coding, like revealing a hidden DIV on click!
Note the data-toggle="collapse" and data-target="#more_info" lines in my div that holds the span tag that is the control for revealing the hidden <div id="more_info">:
`<div data-toggle="collapse" data-target="#more_info"><span class="glyphicon glyphicon-search"></span> <span title="Click for more info">more info</span></div>`
Then note the class in my hidden div. Note the id of the hidden div and the data-target #more_info. This can be used for classes as well, ie: .more_info. Everything is explained in more detail at bootstrap Github or their official site: http://getbootstrap.com/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="wrapper">
<div class="info">
<p>
Honestly, Bootstrap would be the easiest way to accomplish this without a doubt. Just click the more info button below.
</p>
<div data-toggle="collapse" data-target="#more_info"><span class="glyphicon glyphicon-search"></span> <span title="Click for more info">more info</span></div>
<div id="more_info" class="collapse">Some hidden infomration you ony want to be seen when the user click on the control link.</div>
</div>
or add three divs floating perfectly without all the css, each with drop downs more info.
<body>
<div class="wrapper row">
<div class="col-md-4">
<p>
Honestly, Bootstrap would be the easiest way to accomplish this without a doubt. Just click the more info button below.
</p>
<div data-toggle="collapse" data-target="#more_info">
<span class="glyphicon glyphicon-search"></span>
<span title="Click for more info">more info</span> </div>
<div id="more_info" class="collapse">
Some hidden information you only want to be seen when the user click on the control link.
</div>
</div>
<div class="col-md-4">
<p>
Some other information we want to have a hidden drop down with more info for.
</p>
<div data-toggle="collapse" data-target="#more_info2">
<span class="glyphicon glyphicon-search"></span>
<span title="Click for more info">more info</span>
</div>
<div id="more_info2" class="collapse">
Some hidden information you only want to be seen when the user click on the control link.</div>
</div>
<div class="col-md-4">
<p>
Yet another div with info that has a drop down menu for more info included below.
</p>
<div data-toggle="collapse" data-target="#more_info3">
<span class="glyphicon glyphicon-search"></span>
<span title="Click for more info">more info</span>
</div>
<div id="more_info3" class="collapse">
Some hidden infomration you ony want to be seen when the user click on the control link.
</div>
</div>
Best of luck.

Changing multiple textareas css values with javascript and dropdown?

http://jsfiddle.net/g3u7hxr6/4/
I have this following code, currently it changes all textareas css values with the dropdown boxes.
I want it so that when 1 textarea is selected and glowing green, the dropdown boxes will only change the css for the selected textarea rather than all of them.
Basically I want to be able to change each text area font individually.
I considered using another dropdown box to select which textarea to change. but there must be a way for the javascript to detect the selected textarea and make changes to it only. I would need to add a unique id field to each textarea but i'm completely lost with the javascript. please help!!!
Answered thanks to Binvention:
http://jsfiddle.net/g3u7hxr6/19/
JS:
$(function () {
$("[id^=font]").on('change', function () {
$('.address').css(this.id, /\d/.test(this.value) ? this.value + "px" : this.value);
});
});
$('.address').focus(
function(){
$(this).parent('div').css('box-shadow','0px 0px 10px green');
}).blur(
function(){
$(this).parent('div').css('box-shadow','0px 0px 0px');
});
HTML:
<div class="options">
<div class="left">Font:
<br>Size:
<br>Weight:</div>
<div class="right">
<select name="fontFamily" id="fontFamily">
<option selected value="Verdana">Verdana</option>
<option value="Arial">Arial</option>
</select>
<br>
<select name="fontSize" id="fontSize">
<option value="8">8</option>
<option selected value="16">16</option>
<option value="24">24</option>
</select>
<br>
<select name="fontWeight" id="fontWeight">
<option selected value="Bold">Bold</option>
<option value="Normal">Normal</option>
</select>
<br /> <br />
</div>
<div class="page">
<div class="left border">
<textarea class="address" tabindex="1">text area 1</textarea>
</div>
<div class="right border">
<textarea class="address" tabindex="4">text area 4</textarea>
</div>
<div class="left border">
<textarea class="address" tabindex="2">text area 2</textarea>
</div>
<div class="right border">
<textarea class="address" tabindex="5">text area 5</textarea>
</div>
<div class="left border">
<textarea class="address" tabindex="3">text area 3</textarea>
</div>
<div class="right border">
<textarea class="address" tabindex="6">text area 6</textarea>
</div>
</div>
CSS:
.left {
float: left;
}
.right {
float: right;
}
.options {
width: 200px;
}
.page {
width: 440px;
}
.border {
border:1px solid #888;
border-radius: 5px;
padding: 5px;
margin: 0 0px 0px 0;
}
textarea {
resize:none;
height: 100px;
width: 200px;
overflow: auto;
font-family: Verdana;
font-size: 16px;
}

You need to create a unique class that marks one as selected like this
$('textarea').click(function(){
$(this).toggleClass('textselected');
});
That will allow you to dynamically pick which text boxes your editing just click to edit click to deselect from editing. You'll need some css to distinguish selected from not selected though.
Then when you edit the font and text properties you use that special class not the text areas to select the property like this
$("[id^=font]").on('change', function () {
$('.textselected').css(this.id, /\d/.test(this.value) ? this.value + "px" : this.value);
});
});

I have edited your fiddle with the necessary changes here
You need to add $(this).addClass('selected'); within your focus event and change the selector to $('.address.selected') within your change event.