Develop Reference

How can i set selected value after submit form

I have a form with month and year to select. I want to save selected values after page reload. I have project in django and i don't have any idea how do it.
<form class="form-horizontal" method="post" action="show_incomes">{% csrf_token %}{{form}}
<div class="form-group ">
<label class="control-label col-sm-5" for="miesiac">Wybierz miesiąc</label>
<div class="col-sm-3">
<select class="select form-control" id="miesiac" name="miesiac">
<option value="01" >Styczeń</option>
<option value="02" >Luty</option>
<option value="03" >Marzec</option>
<option value="04" >Kwiecień</option>
<option value="05" >Maj</option>
<option value="06" >Czerwiec</option>
<option value="07" >Lipiec</option>
<option value="08" >Sierpień</option>
<option value="09" >Wrzesień</option>
<option value="10" >Październik</option>
<option value="11" >Listopad</option>
<option value="12" >Grudzień</option>
</select>
</div>
</div>
<label class="control-label col-sm-5" for="rok">Wybierz rok</label>
<div class="col-sm-2">
<select class="select form-control" id="rok" name="rok" >
<option value="2017" >2017</option>
<option value="2018" >2018</option>
<option value="2019" >2019</option>
<option value="2020" >2020</option>
<option value="2021" >2021</option>
<option value="2022" >2022</option>
<option value="2023" >2023</option>
<option value="2024" >2024</option>
<option value="2025" >2025</option>
</select><br>
<button type="submit" class="btn btn-large btn-info">Pokaż przychody</button>
</div>
</form>

You can use local storage/ session storage to save data
Check here

Show a alert message when pressing button without exiting the modal form

I have a signup modal form and I want the users to get an alert message if there are fields empty when they press the register button.
I can't really figure it out how to do it.
As I said in my previous posts I am new to coding so please be patient with me.
Thank you!
<div class="modal fade" id="signUp" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="text-center"><i class="fa fa-user-plus" aria-hidden="true"></i> Registro</h3>
</div>
<div class="modal-body">
<form action="" name="registerform" id="signup1" method="POST" role="form">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="name"><i class="fa fa-user-circle" aria-hidden="true"></i> Nombres</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Ingresa tu(s) nombre(s)">
<span id="nameerror" class="hidden form-error"><p> *Solo pueden ser letras</p> </span>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="lname"><i class="fa fa-user-circle" aria-hidden="true"></i> Apellidos</label>
<input type="text" class="form-control" id="lname" name="lname" placeholder="Ingresa tus apellidos">
<span id="lnameerror" class="hidden form-error"><p> *Solo pueden ser letras</p> </span>
</div>
</div>
</div>
<div class="form-group" id="genero">
<div class="btn-group" data-toggle="buttons">
<label for="masculino" class="btn btn-default active">
<input type="radio" name="genero" id="masculino" autocomplete="off" checked value="M">
Masculino
</label>
<label for="femenino" class="btn btn-default">
<input type="radio" name="genero" id="femenino" autocomplete="off" value="F">
Femenino
</label>
</div>
</div>
<div class="form-group">
<label for="email"><i class="fa fa-envelope-o" aria-hidden="true"></i> Correo electronico</label><span id="resultmail"></span>
<input type="email" class="form-control" name="email" id="email" placeholder="Ingresa tu correo electronico" autocomplete="off">
</div>
<div class="form-group">
<label for="user"><i class="fa fa-user" aria-hidden="true"></i> Usuario</label><span id="result"></span>
<input type="text" class="form-control" name="user" id="user" placeholder="Ingresa tu usuario" autocomplete="off">
</div>
<div class="form-group">
<label><i class="fa fa-birthday-cake" aria-hidden="true"></i> Fecha de nacimiento</label>
<div class="row" id="fecha">
<div class="col-xs-4">
<select class="form-control btn-default custom" name="day">
<option hidden>Dia</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="col-xs-4">
<select class="form-control btn-default custom" name="month">
<option hidden>Mes</option>
<option value="01">Enero</option>
<option value="02">Febrero</option>
<option value="03">Marzo</option>
<option value="04">Abril</option>
<option value="05">Mayo</option>
<option value="06">Junio</option>
<option value="07">Julio</option>
<option value="08">Agosto</option>
<option value="09">Septiembre</option>
<option value="10">Octubre</option>
<option value="11">Noviembre</option>
<option value="12">Diciembre</option>
</select>
</div>
<div class="col-xs-4">
<select class="form-control btn-default custom" name="year">
<option hidden>Año</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1954</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
<option value="1908">1908</option>
<option value="1907">1907</option>
<option value="1906">1906</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="password"><i class="fa fa-eye" aria-hidden="true"></i> Contrasena</label><span id="resultpass"></span>
<input type="password" class="form-control" id="password" name="password" placeholder="Ingresa tu contrasena" autocomplete="off">
</div>
<div class="form-group">
<label for="cpassword"><i class="fa fa-keyboard-o" aria-hidden="true"></i> Confirma tu contrasena</label><span id="resultcpass"></span>
<input type="password" class="form-control" id="cpassword" name="cpassword" placeholder="Vuelve a ingresar tu contrasena" autocomplete="off">
</div>
</div>
<div class="modal-footer">
<input type="submit" id="btnregistrar" name="register" class="btn btn-default" value="Registrar"></input>
<button type="button" id="btncerrar1" id="reset" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</form>
</div>
</div>

Bootstrap Popover closes itself

I'm currently working on a edit view. So I decided use a popover with a form on it. I'm using bootstrap v.3.0.0. The popover appear perfectly, however it closes automatically after about 6 - 8 seconds after. Follows the code:
<a class="driveEdit" href="#">
<i class="fa fa-pencil edit-drive" style="font-size: 1.3em;" data-toggle="popover" data-placement="left" rel="tooltip"></i>
</a>
<div id="popover-content" class="hide">
<!-- MyForm -->
<form id="tab" method="POST"
action="#routes.UiscsiController.editVirtualDrive()"
data-toggle="validator">
<div class="form-group">
<label for="login">Login</label> <input
type="text" id="login" maxlength="50" name="login"
value=""
class="form-control" required/> <span
class="help-block with-errors"></span>
</div>
<div class="form-group">
<label for="jvm_memo">JVM Memo</label>
<select id="jvm_memo" name="jvm_memo" class="form-control">
<ul class="dropdown-menu" role="menu">
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
<option value="10" selected="true">10</option>
<option value="12">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
<option value="26">26</option>
<option value="28">28</option>
<option value="30">30</option>
</ul>
</select>
</div>
<div class="form-group">
<button class="btn btn-primary"
onclick="this.addEventListener('click', clickStopper, false);">
<i class="fa fa-save"></i>Save
</button>
</div>
<input type="hidden" class="editDriveId" name="editDriveId" id="editDriveId" value="" />
</form>
</div>
And here my popover initiator:
<script type="text/javascript">
var hasPopover = false;
$(document).ready(function(){
$(".edit-drive").popover({
html : true,
content: function() {
return $("#popover-content").html();
}
});
</script>
Is that a commom behavior or any error on my code?

I've added the placement property set to bottom and also the missing }); from your script and it displays very well. Hope this helps you:
var hasPopover = false;
$(".edit-drive").popover({
html: true,
placement: 'bottom',
content: function() {
return $("#popover-content").html();
}
});
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<a class="driveEdit" href="#">
<i class="fa fa-pencil edit-drive" style="font-size: 1.3em;" data-toggle="popover" data-placement="left" rel="tooltip">Click me please!</i>
</a>
<div id="popover-content" class="hide">
<!-- MyForm -->
<form id="tab" method="POST" action="#routes.UiscsiController.editVirtualDrive()" data-toggle="validator">
<div class="form-group">
<label for="login">Login</label>
<input type="text" id="login" maxlength="50" name="login" value="" class="form-control" required/> <span class="help-block with-errors"></span>
</div>
<div class="form-group">
<label for="jvm_memo">JVM Memo</label>
<select id="jvm_memo" name="jvm_memo" class="form-control">
<ul class="dropdown-menu" role="menu">
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
<option value="10" selected="true">10</option>
<option value="12">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
<option value="26">26</option>
<option value="28">28</option>
<option value="30">30</option>
</ul>
</select>
</div>
<div class="form-group">
<button class="btn btn-primary" onclick="this.addEventListener('click', clickStopper, false);">
<i class="fa fa-save"></i>Save
</button>
</div>
<input type="hidden" class="editDriveId" name="editDriveId" id="editDriveId" value="" />
</form>
</div>

locastorage save selection javascript

<select id="Gender" onchange="fctCheck(this.value);">
<option value="">Choose Gender</option>
<option value="men">Men</option>
<option value="wemen">Wemen</option>
<option value="girls">Girls</option>
<option value="boys">boys</option>
</select>
<br>
<br>
<select id="men" name="subselector" style="display:none">
<option value="">Choose an item</option>
<option value="tsm">T-Shirt</option>
<option value="lsm">long sleeve</option>
<option value="tankm">Tank Top</option>
<option value="fzhm">Full zip Hood</option>
<option value="pohm">Pull over Hood</option>
<option value="fzfm">Full zip Fleece</option>
<option value="fm">Fleece</option>
</select>
<select id="wemen" name="subselector" style="display:none">
<option value="slw">short sleeve</option>
</select>
<select id="girls" name="subselector" style="display:none">
<option value="shortsg">shorts</option>
</select>
<select id="boys" name="subselector" style="display:none">
<option value="tshirtb">tshirt</option>
</select>
<div style='display:none;' id="wsl">
<div class="colore white" data-image="https://opensource.org/files/osi_keyhole_300X300_90ppi.png">
</div>
<div class="colore black" data-image="http://mebe.co/ford">
</div>
<div class="colore yellow" data-image="http://mebe.co/f150">
</div>
<div class="colore orange" data-image="http://mebe.co/yukon">
</div>
<div class="colore red" data-image="http://mebe.co/370z">
</div>
</div>
<div style='display:none;' id="mtsm">
<div class="colore white active" data-image="http://torcdesign.com/shirts/white.jpg" data-image-back="http://amp.site88.net/shirts/whiteback.jpg">
</div>
<div class="colore black" data-image="http://torcdesign.com/shirts/black.jpg" data-image-back="http://amp.site88.net/shirts/whiteback.jpg">
</div>
<div class="colore yellow" data-image="http://torcdesign.com/shirts/yellow.jpg" data-image-back="http://amp.site88.net/shirts/orange.jpg">
</div>
<div class="colore orange" data-image="http://torcdesign.com/shirts/orange.jpg" data-image-back="http://amp.site88.net/shirts/yellow.jpg">
</div>
<div class="colore red" data-image="http://torcdesign.com/shirts/red.jpg" data-image-back="http://amp.site88.net/shirts/black.jpg">
</div>
</div>
i would like to know how i can display an image on a second page using the information the user selected on drop down i was told to use localstorage but i have not been able to make it work can someone please teach me exactly how to save selection of all the drop downs the user picks? all i need is to save the selection from the previous page and i will take care of the rest.

That should give you a direction:
function save() {
localStorage.setItem("selection", document.getElementById("Gender").value);
}
window.onload = function() {
console.log(localStorage.getItem("selection"));
}
<select id="Gender" onchange="save()">
<option value="">Choose Gender</option>
<option value="men">Men</option>
<option value="wemen">Wemen</option>
<option value="girls">Girls</option>
<option value="boys">boys</option>
</select>

You can save all the values in object and then set it to local storage using .
var vals = {
gender:"male" // object structure example
};
localstorage.setItem('nameforvalues', JSON.stringify(vals));
Than after moving to second page
You can get the object using
var storedvals = local storage.getItem('nameforvalues');
storedvals = JSON.parse(storedvals);

jquery multiplication - behind the scene calculation

I have this calculator:
This is my html :
<div class="row">
<div class="twenty columns">
<h2 class="secondary-title text-red2">Mortgage Utilisation Calculator</h2>
<form>
<div class="row forminput">
<div class="ten columns">
<p class="slider-label">Daily Flexi Account Balance (RM)</p>
<input type="text" class="daily-flexi-accbalance strictly-numbers" value="200000" />
</div>
<div class="ten columns">
<p class="slider-label">Number of Days in Month</p>
<div class="field type-dropdown">
<div class="picker picker-dd2">
<select class="dropdown2 numdays-month">
<option value="0">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
</div>
</div>
<div class="ten columns">
<p class="slider-label">Current Facility Limit (RM)</p>
<input type="text" class="curr-facilitylimit numeric-only" value="500000" />
</div>
<div class="ten columns">
<p class="slider-label">Excess Payment (RM)</p>
<input type="text" class="curr-facilitylimit numeric-only" value="" />
</div>
</div>
</form>
<div class="row bg-gray12">
<div class="ten columns bg-gray12 data-box2">
<div class="row">
<div class="twelve columns">Sum of Daily Flexi Account Balance</div>
<div class="eight columns text-right calc-result-sumflexiacc " data-prefix="RM " data-suffix="">RM 0</div>
</div>
</div>
<div class="ten columns bg-gray11 data-box2">
<div class="row">
<div class="twelve columns">Monthly Utilisation Rate</div>
<div class="eight columns text-right calc-result-mthly-utilisationrate text-right" data-prefix="RM " data-suffix="">0 %</div>
</div>
</div>
</div>
<!-- <div class="row bg-gray9 data-box2 font-brighter">
<div class="fifteen columns ">Total Amount Payable</div>
<div class="five columns text-right calc-result-totalpayable" data-prefix="RM " data-suffix="">RM 0</div>
</div> -->
</div>
</div>
I have this function to calculate the sum of daily flexi acc
function calcSumDailyFlexiAccBalance() {
var numDaysMonth;
$(".numdays-month").on('change', function() {
numDaysMonth = parseInt($(".numdays-month").val(), 10);
});
var dailyFlexi = parseInt($(".daily-flexi-accbalance").val(), 10);
var resultDaysFlexi = numDaysMonth * dailyFlexi;
var roundResult = Math.round(resultDaysFlexi/100)*100
}
In order to get the value for field: sum of daily flexi account balance - the calculation will be daily flexi account balance * num of days - the result is rounded up to the nearest hundredth.
FOR EXAMPLE
daily flexi account balance is : 265806,
num of day : 31,
the sum of daily flexi acc balance will be : 8,239,986 and the correct output will be 8,240,000
for some reason I don't think my calculation is outputting the correct amount because I'm getting NaN

Change the number of days dropdown, it will log the output of your calculation, which looks correct (i.e. No NaN)
function init() {
$(".numdays-month").on('change',
function() {
var numDaysMonth;
numDaysMonth = parseInt($(".numdays-month").val(), 10);
var dailyFlexi = parseInt($(".daily-flexi-accbalance").val(), 10);
var resultDaysFlexi = numDaysMonth * dailyFlexi;
var roundResult = Math.round(resultDaysFlexi/100)*100
console.log(roundResult);
}
);
}
$(document).ready(init);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<div class="row">
<div class="twenty columns">
<h2 class="secondary-title text-red2">Mortgage Utilisation Calculator</h2>
<form>
<div class="row forminput">
<div class="ten columns">
<p class="slider-label">Daily Flexi Account Balance (RM)</p>
<input type="text" class="daily-flexi-accbalance strictly-numbers" value="200000" />
</div>
<div class="ten columns">
<p class="slider-label">Number of Days in Month</p>
<div class="field type-dropdown">
<div class="picker picker-dd2">
<select class="dropdown2 numdays-month">
<option value="0">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
</div>
</div>
<div class="ten columns">
<p class="slider-label">Current Facility Limit (RM)</p>
<input type="text" class="curr-facilitylimit numeric-only" value="500000" />
</div>
<div class="ten columns">
<p class="slider-label">Excess Payment (RM)</p>
<input type="text" class="curr-facilitylimit numeric-only" value="" />
</div>
</div>
</form>
<div class="row bg-gray12">
<div class="ten columns bg-gray12 data-box2">
<div class="row">
<div class="twelve columns">Sum of Daily Flexi Account Balance</div>
<div class="eight columns text-right calc-result-sumflexiacc " data-prefix="RM " data-suffix="">RM 0</div>
</div>
</div>
<div class="ten columns bg-gray11 data-box2">
<div class="row">
<div class="twelve columns">Monthly Utilisation Rate</div>
<div class="eight columns text-right calc-result-mthly-utilisationrate text-right" data-prefix="RM " data-suffix="">0 %</div>
</div>
</div>
</div>
<!-- <div class="row bg-gray9 data-box2 font-brighter">
<div class="fifteen columns ">Total Amount Payable</div>
<div class="five columns text-right calc-result-totalpayable" data-prefix="RM " data-suffix="">RM 0</div>
</div> -->
</div>
</div></body>

The problem is with Math.round.
You're using Math.round(resultDaysFlexi/100)*100 - so you're rounding it before final multiplication by 100.
Try to remove rounding or apply it only to final result.
Another useful tip is to add console.log after every step of calculation and check what is current value of your calculation, so you can see when is it starting to go wrong.

I have tried your logic in jsfiddle here after modifying event bindings. And it is working same as your example. Then what is the problem.
Here is my JS changes:
$(document).ready(function(e) {
$(".numdays-month").on('change', function() {
calcSumDailyFlexiAccBalance();
});
function calcSumDailyFlexiAccBalance(){
var numDaysMonth;
numDaysMonth = parseInt($(".numdays-month").val(), 10);
var dailyFlexi = parseInt($(".daily-flexi-accbalance").val(), 10);
var resultDaysFlexi = numDaysMonth * dailyFlexi;
var roundResult = Math.round(resultDaysFlexi/100)*100;
$('.calc-result-sumflexiacc').html(roundResult);
}
});