We Keep Coding

Javascript issue with selector session storage

Hello so I added some javascript to keep selection stored when page is reloaded in my select menu , but the issue is when I load the page for the first time nothing appears in my select menu (First choice of the select menu)
what appears
window.onload = function() {
var selItem = sessionStorage.getItem("SelItem");
$('#date').val(selItem);
}
$('#date').change(function() {
var selVal = $(this).val();
sessionStorage.setItem("SelItem", selVal);
});
<label class="op" for="date">Periode : </label>
<select id="date">
<option value="toutes">Toutes</option>
<option value="2019">Année en cours</option>
<option value="2018">Année pécédente</option>
<option value="2017">Année -2</option>
<option value="2016">Année -3</option>
<option value="2015">Année -4</option>
</select>
<br/><br/>
<input type="hidden" name="date" id="date1" class="datepicker w100" value="2015-01-01"type="date" placeholder="Du jj/mm/aaaa"> <input type ="hidden"name="date2" id="date2" value="2026-12-31"class="datepicker w100" type="date" placeholder="Au jj/mm/aaaa">
<br/>

So only set the value if there is something in storage.
if (selItem) $('#date').val(selItem);

Multiply input value with select option data attribute

I have the following code that is not working the way i want it to, apparently, am trying to multiply select option data attributes with input text area values but instead select option value are being used. I need to figure out why its so.
Here is my code;
<input id="count" min="1" value="1" class ="txtMult form-control" type="number" name="txtEmmail" />
<input type="text" value="" class ="txtMult" name="txtEmmail"/>
<span class="multTotal"></span>
<select class="selectpicker">
<option value="1" data-cubics='1'>multiply with 1</option>
<option value="5" data-cubics='5'>multiply with 5</option>
</select>
<span id="grandTotal">250</span>
$(function(){
$('.txtMult').change(function(){
var p=$(this).parent().parent()
var m=p.find('input.txtMult')
var mul=parseInt($(m[0]).val()*$(m[1]).val()).toFixed(2)
var res=p.find('.multTotal')
res.html(mul);
var total=0;
$('.multTotal').each(function(){
total+=parseInt($(this).html());
})
parseInt(total).toFixed(2);
$('#grandTotal').html(parseInt(total).toFixed(2));
});
})
$('.selectpicker').change(function() {
calcVal();
});
function calcVal(){
$(this).data('cubics')*$('.multTotal').html();
$("#grandTotal").html($(this).data('cubics')*$('.multTotal').html())
}
// call on document load
calcVal();

Don't use .html() to get the values, use .text() instead.
You need to get the selected option using this:
$("#grandTotal").html($(this).children(':checked')
$(function() {
$('.txtMult').change(function() {
var p = $(this).parent().parent()
var m = p.find('input.txtMult')
var mul = parseInt($(m[0]).val() * $(m[1]).val()).toFixed(2)
var res = p.find('.multTotal')
res.html(mul);
var total = 0;
$('.multTotal').each(function() {
total += parseInt($(this).text());
})
parseInt(total).toFixed(2);
$('#grandTotal').html(parseInt(total).toFixed(2));
});
})
$('.selectpicker').change(calcVal);
function calcVal() {
$("#grandTotal").html($(this).children(':checked').data('cubics') * $('.multTotal').text().trim())
}
// call on document load
calcVal();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div>
<input id="count" min="1" value="1" class="txtMult form-control" type="number" name="txtEmmail" />
<input type="text" value="" class="txtMult" name="txtEmmail" />
<span class="multTotal"></span>
<select class="selectpicker">
<option value="1" data-cubics='1'>multiply with 1</option>
<option value="5" data-cubics='5'>multiply with 5</option>
</select>
<span id="grandTotal">250</span>
</div>
</div>

Change the values dynamically in anchor link

I am looking to dynamically change the values of price and id with select of different drop downs in following anchor link. like If I select 3 days, the price changes to 24 in anchor and id with new oID.
Note: hidden fields are for data to submit in database. $_post['deadline']. Yes, correcting url. Type error.
<a class="btn btn-warning" href="https://example.com?price=38&id=DS123">order</a>
HTML
<div class="col-sm-6">
<label for="price" class="control-lable">Urgency*:</label>
<select class="form-control" name="price" id="price" onchange="func()" required>
<option value="">Select urgency</option>
<option value="24">3 Days</option>
<option value="38">5 Days</option>
<option value="62">7 Days</option>
</select>
</div>
<input type="hidden" name="deadline" id="deadline" value="" />
<input type="hidden" name="oid" id="oid" value="" />
Javascript
function func() {
var option = $("#price").val();
var dLine = $('#deadline').val();
var mID = new Date().getTime();
var oID = 'Q'+Math.round(mID/1000)
if (option =='24') {
dLine = 3 Days;
oID;
}
if (option =='38') {
dLine = 5 Days;
oID;
}
if (option =='62') {
dLine = 7 Days;
oID;
}
};

You have unnecessary hidden fields in HTML as well as unnecessary if conditions in jQuery(because i am unable to see and fruitfull use of those in your scenario)
Do it like below:-
function func() {
var option = $("#price").val();
var mID = new Date().getTime();
var oID = 'Q'+Math.round(mID/1000)
$('.btn-warning').attr('href',"https://example.com?price="+option+"&id="+oID)
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6">
<label for="price" class="control-lable">Urgency*:</label>
<select class="form-control" name="price" id="price" onchange="func()" required>
<option value="">Select urgency</option>
<option value="24">3 Days</option>
<option value="38">5 Days</option>
<option value="62">7 Days</option>
</select>
</div>
<a class="btn btn-warning" href="https://example.com?price=38&id=DS123">order</a>
<!-- not required <input type="hidden" name="deadline" id="deadline" value="" />
<input type="hidden" name="oid" id="oid" value="" />-->
Note:-
Url:- https://example.com&price=38&id=DS123 seems in-correct as it need to be https://example.com?price=38&id=DS123 (check query-string notation ? there)

You can put an id in the anchor like:
<a id="btn-order" class="btn btn-warning" href="#">order</a>
Then in your onchange function (func), do something like:
$('#btn-order').attr('href', 'https://example.com?price=' + option + '&id=' + oID);

rather than using onchange=func(), you can try to keep it clean by using jquery .on() :
$('#price').on('change', function(e){
var $thisSelect = $(this),
$anchor = $('.btn.btn-warning'),
oID = 'Q'+Math.round((new Date().getTime())/1000),
newhref = 'https://example.com/?id='+oID+'&price='+$thisSelect.val(),
selectedText = $thisSelect.find('option:selected').text();
$anchor.prop('href', newhref);
$('#deadline').val(selectedText);
$('#oid').val(oID);
});

Vanilla js version:
function func () {
var e = document.getElementById("price");
var price = e.options[e.selectedIndex].value;
var button = document.getElementsByClassName('btn btn-warning')[0];
if (price && button) {
var mID = new Date().getTime();
var oID = 'Q'+Math.round(mID/1000);
button.setAttribute('href', "https://example.com?price=" + price + "&id=" + oID)
}
}

How to construct a website URL based on User inputs (TextBox/Dropdown list) in HTML/JavaScript?

I am very new to HTML and JavaScript...
I need your help to construct a website URL based on TextBox inputs in HTML/JavaScript?
I am looking for a HTML/JavaScript code to allow user to
1) Select an Option from Dropdown list
2) Enter a number
using which a URL should be generated
For example:
Drop down list has #Years to select and user select year 2014
and in text box user gives input a number as 1234
Below is the peace of code I have, but not able to get the desired result :(
<select name="SelectYear">
<option value="13" ID="13">2013</option>
<option value="12" ID="12">2012</option>
</select>
<select name="SelectMonth">
<option value="J" ID="J">June</option>
<option value="D" ID="D">December</option>
</select>
<input type="text" name="EnterRollNum" ID="EnterRollNum">
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
var iYear = $("select#SelectYear").val()
var iMonth = $("select#SelectMonth").val()
var iRollNum = $("select#EnterRollNum").val()
document.getElementById("demo").innerHTML = Link
}
</script>
Any help is much appreciated.

<form id="myForm" action="some.php" method="GET">
<select name="SelectYear">
<option value="13" ID="13">2013</option>
<option value="12" ID="12">2012</option>
</select>
<select name="SelectMonth">
<option value="J" ID="J">June</option>
<option value="D" ID="D">December</option>
</select>
<input type="text" name="EnterRollNum" ID="EnterRollNum" />
<input type="submit" value="submit" />
</form>
<p id="demo"></p>
<script>
$('#myForm').submit(function(e){
e.preventDefault();
var url = $(this).attr('action')+'?'+$('#myForm').serialize();
$('#demo').html(' Link ');
});
</script>
You can see the working fiddle - http://jsfiddle.net/grvngr/fak1s583/
Hope this helps!

parseInt not getting a added return

var select;
window.onload = function () {
var select = document.getElementById("money");
console.log(select);
}
function changedepositedInput(objDropDown) {
console.log(parseInt(objDropDown));
var objdeposited = document.getElementById("deposited");
objdeposited.value=parseInt(objdeposited.value);
var total=parseInt(objdeposited.value);
objdeposited.value = parseInt(objDropDown.value+total);
objdeposited.value = parseInt(objdeposited.value);
}
</script>
<h1>Vending Machine Project</h1>
<form name="vendingmachine" action=" ">
Choose Bevrage<br>
<input name="item" type="radio" value="water" checked="checked">Water 75 cents<br>
<input name="item" type="radio" value="soda">Soda $1.50<br>
<input name="item" type="radio" value="coffee">Coffee $1.00<br>
<input name="item" type="radio" value="beer">Beer $2.00<br>
<p>
<label>Deposit Money:
<select name="money" id="money" onchange="changedepositedInput(this)">
<option>Choose Amount</option>
<option value="10">10 cents</option>
<option value="25">25 cents</option>
<option value="50">50 cents</option>
<option value="75">75 cents</option>
<option value="100">$1.00</option>
</select>
</label>
</p>
<p>Total Deposited:<input name="deposited" id="deposited" type="text" readonly="TRUE" value=" "></p>
using this code I am not getting a return of a solid number, for example in a drop down menu I would select two values ie 50 and 75 and they would combine as 5075, does this mean it is still running it through as string somewhere and if so where?

for example in a drop down menu I would select two values ie 50 and 75 and they would combine as 5075, does this mean it is still running it through as string somewhere and if so where?
Yes, here:
objdeposited.value = parseInt(objDropDown.value+total);
objDropDown.value is a string, e.g. '50', and total is a number, e.g. 75.
In JavaScript, '50'+75 is '5075'.
You can replace these 3 lines
var total=parseInt(objdeposited.value);
objdeposited.value = parseInt(objDropDown.value+total);
objdeposited.value = parseInt(objdeposited.value);
with
var total = parseInt(objdeposited.value);
objdeposited.value = parseInt(objDropDown.value||'0') + total;
Edit:
The default value for the deposited value was a space " " which was causing problems. Change this to the empty string "". Also add a ||'0' to all calls to parseInt (or parseFloat). See http://jsfiddle.net/es2yS/1/ .