I need some help in javascript PHP to solve my problem. Please look at my code below:
<?PHP
$arrear_per_month = 15000;
?>
<select name="cur_month" id="id_cur_month" multiple="multiple">
<option value="">Month</option>
<option value="jan">January</option>
<option value="feb">February</option>
<option value="mar">March</option>
<option value="apr">April</option>
<option value="may">May</option>
<option value="jun">June</option>
<option value="jul">July</option>
<option value="aug">August</option>
<option value="sep">September</option>
<option value="oct">october</option>
<option value="nov">November</option>
<option value="dec">december</option>
</select>
Your current arrear: <input id="id_cur_arrear" type="text" name="arrear" value="" readonly="readonly" />
What i want to do is:
count how many option is being selected
Multiply the number of selected option with $arrear_per_month
Display the result in field input as shown above (in arrear)
Example:
Let say that February, march and april are selected.
So the number of selected option is 3.
And then 3 * $arrear_per_month = 45000.
So i need to display 45000 as value in arrear
[edited] i need to display it without any click (something like onChange)
I think that is what i need, please give me some help.
Thank you in advance
var numbersChecked = $('#id_cur_month').find(":selected").length;
$("#id_cur_arrear").val(numbersChecked * <?= $arrear_per_mnth; ?>);
You can easily do this via jQuery (with less code). However, if you are specifically looking for JavaScript code, you can try this -
<script type="text/javascript">
function update(){
var apm = Number("<?php echo $arrear_per_month;?>");
var cm = document.getElementById("id_cur_month").selectedOptions.length;
var sel_cnt = (apm * cm);
document.getElementById("id_cur_arrear").value = sel_cnt;
}
</script>
Add onchange event to your select box -
<select name="cur_month" id="id_cur_month" onchange="update()" multiple="multiple">
This will work either you select the options through click or keyboard arrow keys.
In javascript this is how you do it
var sel = document.getElementById('id_cur_month');
alert(sel.selectedOptions.length);
Code above should alert the number of selected options.
However you do need to do some additional coding as you cannot pass a javascript variable to the php code.
You can instead declare that php variable as a javascript variable.
<script>
var arrear_per_month = <?php echo $arrear_per_month ?>;
var sel = document.getElementById('id_cur_month');
var total = arrear_permonth * sel.selectedOptions.length;
alert(total);
</script>
As suggested by Andrex, i've tried to modify the script like this, but it doesn't work.
<?PHP
$arrear_per_month = 15000;
?>
<script type="text/javascript" language="javascript">
var sel = document.getElementById('id_cur_month');
alert(sel.selectedOptions.length);
var arrear_per_month = <?php echo $arrear_per_month ?>;
var sel = document.getElementById('id_cur_month');
var total = arrear_permonth * sel.selectedOptions.length;
alert(total);
document.chk_arrear.arrear.value = total;
</script>
<form name="chk_arrear">
<select name="cur_month" id="id_cur_month" multiple="multiple">
<option value="">Month</option>
<option value="jan">January</option>
<option value="feb">February</option>
<option value="mar">March</option>
<option value="apr">April</option>
<option value="may">May</option>
<option value="jun">June</option>
<option value="jul">July</option>
<option value="aug">August</option>
<option value="sep">September</option>
<option value="oct">october</option>
<option value="nov">November</option>
<option value="dec">december</option>
</select>
Your current arrear: <input type="text" name="arrear" value="" readonly="readonly" />
</form>
the Alert doesnt work and also the input text. Can you please correct this script
JQuery
$("#id_cur_month").click(function () {
var len = 0;
$("#id_cur_month").children(":selected").each(function () {
len += ($(this).val() ? 1 : 0);
});
var res = len * (parseInt($("#id_cur_arrear").val() || 0));
$("#id_cur_arrear_res").val(res);
});
DEMO
Javascript
var select = document.getElementById("id_cur_month");
console.log(select);
select.onclick = function () {
var opts = select.options;
var len = 0;
for (i = 0; i < opts.length; i++) {
if (opts[i].selected && opts[i].value) len++;
}
document.getElementById("id_cur_arrear_res").value = len * (parseInt(document.getElementById("id_cur_arrear").value || 0))
};
Use <?= $arrear_per_mnth; ?> instance of (parseInt(document.getElementById("id_cur_arrear").value || 0))
DEMO
Thank you to all of you. it's running.
<?PHP
$arrear_per_month = 15000;
?>
<script type="text/javascript" language="javascript">
function update(){
var apm = Number("<?php echo $arrear_per_month;?>");
var cm = document.getElementById("id_cur_month").selectedOptions.length;
var sel_cnt = (apm * cm);
document.getElementById("id_cur_arrear").value = sel_cnt;
}
</script>
<form name="chk_arrear">
<select name="cur_month" id="id_cur_month" multiple="multiple" onchange="update()">
<option value="">Month</option>
<option value="jan">January</option>
<option value="feb">February</option>
<option value="mar">March</option>
<option value="apr">April</option>
<option value="may">May</option>
<option value="jun">June</option>
<option value="jul">July</option>
<option value="aug">August</option>
<option value="sep">September</option>
<option value="oct">october</option>
<option value="nov">November</option>
<option value="dec">december</option>
</select>
Your current arrear: <input type="text" id="id_cur_arrear" name="arrear" readonly="readonly" />
</form>
Related
I have select boxes, and they have data attribute (data-price). I want to sum selected option "data-price" as "total" . but I have one problem. If I select only value="bmw" or I have not selected anything it gives me NaN$.
$('#mark, #series').on('change', function() {
var $selected = $('#mark, #series').children(":selected");
var sum = 0;
$selected.each(function() {
sum += $(this).data('price');
});
$('#total').html(sum + '$');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mark" name="mark">
<option value="">--</option>
<option value="bmw" data-price="200">bmw</option>
<option value="audi" data-price="400">audi</option>
</select>
<select id="series" name="series">
<option value="">--</option>
<option value="series-1" data-price="2000" >3 series</option>
<option value="series-1" data-price="3000" >5 series</option>
</select>
<div id="total"> </div>
This code will fix your problem:
$('#mark, #series').on('change', function() {
var $selected = $('#mark, #series').children(":selected");
var sum = 0;
$selected.each(function() {
var price = $(this).data('price');
if(price){
sum += $(this).data('price');
}
});
$('#total').html(sum + '$');
});
If you log the pricevariable into the forEach loop, you can see that it returns an integer and then an undefined. That should be fixed! :)
When you select only one option the selected option of the other does not have a 'data-price' attribute:
<option value="">--</option> <!-- data-price === "undefined" -->
You could set a default of "0" to the initially selected option:
<option value="" data-price="0">--</option>
Example:
$('#mark, #series').on('change', function() {
var $selected = $('#mark, #series').children(":selected");
var sum = 0;
$selected.each(function() {
sum += $(this).data('price');
});
$('#total').html(sum + '$');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mark" name="mark">
<option value="" data-price="0">--</option>
<option value="bmw" data-price="200">bmw</option>
<option value="audi" data-price="400">audi</option>
</select>
<select id="series" name="series">
<option value="" data-price="0">--</option>
<option value="series-1" data-price="2000">3 series</option>
<option value="series-1" data-price="3000">5 series</option>
</select>
<div id="total"> </div>
When you change one dropdown, let's say Make, $selected will include two elements:
<option value="bmw" data-price="200">bmw</option> and <option value="">--</option>
When you are now calculating the sum, you are adding two values 200 and and empty string as strings. You should try to parse all values to integers with parseInt("string", 10) (Note the 10 parameter which specifies the base to be used, it's good practice to be explicit, see parseInt documentation here).
Also, as other answers here state, you should always try to default to an integer value (in the case of the empty string). So your code could now be like this:
$('#mark, #series').on('change', function() {
var $selected = $('#mark, #series').children(":selected");
var sum = 0;
$selected.each(function() {
var optionPrice = parseInt($(this).data('price'), 10) || 0;
sum += optionPrice;
});
$('#total').html((sum) ? (sum + '$') : '');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mark" name="mark">
<option value="">--</option>
<option value="bmw" data-price="200">bmw</option>
<option value="audi" data-price="400">audi</option>
</select>
<select id="series" name="series">
<option value="">--</option>
<option value="series-1" data-price="2000" >3 series</option>
<option value="series-1" data-price="3000" >5 series</option>
</select>
<div id="total"> </div>
You must to parse your data which is seen as a string
$selected.each(function() {
var data = $(this).data('price');
if(data != undefined){
sum += parseFloat(data);
}
});
Please use a fallback value of 0 if the returned value is undefined.
using the line.
sum += $(this).data('price') || 0;
Note: You also need to run this validation function at the beginning to ensure, the result is calculated at the beginning before the change() event.
function validate(){
var $selected = $('#mark, #series').children(":selected");
var sum = 0;
$selected.each(function() {
sum += $(this).data('price') || 0;
});
$('#total').html(sum === 0 ? '' : sum + '$');
}
validate();
$('#mark, #series').on('change', function() {
validate();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mark" name="mark">
<option value="">--</option>
<option value="bmw" data-price="200">bmw</option>
<option value="audi" data-price="400">audi</option>
</select>
<select id="series" name="series">
<option value="">--</option>
<option value="series-1" data-price="2000" >3 series</option>
<option value="series-1" data-price="3000" >5 series</option>
</select>
<div id="total"> </div>
A very interesting thing hapens to my code.I have 3 different selects,one for years, the second for months and the third for days.I created options for the years and days via JS. My problem is my years list starts from the start point but dosn't end in the finish point I give,but when I'm changing the start point of j to 300 for instance, everything works perfectly.What is the reason or maybe my code is not correct? https://jsfiddle.net/arminemash/f9gy1p4L/15/
select{float:left}
#month,#days,input{display:none}
<body onload='addOptions()'>
<form action=''>
<select required id='year' class='selectOption' onchange='select(this)'>
<option value=""> Select year</option>
</select>
<select required id='month' class='selectOption' onchange='select(this)'>
<option value=""> Select month</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select required id='days' class='selectOption' onchange='select(this)'>
<option value="">Select Day</option>
</select>
<input type="submit" class='selectOption' onclick='getDate()'>
</form>
</body>
function addOptions(){
var x= document.getElementById('year');
var y = document.getElementById('days');
for(var i=1900,j=1;i<3000,j<=31;i++,j++){
var option1 = document.createElement("option");
var option2 = document.createElement("option");
option1.text =i;
x.add(option1);
option2.text =j;
y.add(option2);
}
}
var i=0;
function select(par){
var x=document.getElementsByClassName('selectOption');
if( par.selectedIndex !== "0"){
x[i+1].style.display='block';
i++;
collectData.push(par.value);
}
}
The problem is your for loop. for(var i=1900,j=1;i<3000,j<=31;i++,j++) this will stop when j reaches 31. What you need is two for loops one for days and one for years. I edited your fiddle here.
I am trying to set the selected option of the drop down to the current page it is on. For some reason, unknown to me it's not working.
<script>
var temp = '<?php echo $country;?>';
var forma = document.getElementById('forma');
for(var i, j = 0; i = forma.options[j]; j++) {
if(i.value == temp) {
forma.selectedIndex = j;
break;
}
}
</script>
<select name="forma" onchange="location = this.options[this.selectedIndex].value;">
<option value="aw">Aruba</option>
<option value="bh">Bahrain</option>
<option value="bj">Benin</option>
<option value="bo">Bolivia</option>
etc..
The expected result is, when $country = "aw" it should say; "Aruba".
Any help would be appreciated.
Why not simply set value of select input as value of $country
Try this:
var temp = 'aw';
$('select[name="forma"]').val(temp);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select name="forma">
<option value="aw">Aruba</option>
<option value="bh">Bahrain</option>
<option value="bj">Benin</option>
<option value="bo">Bolivia</option>
</select>
How to make that the all selected options, not the values, but the actual text, would be displayed somewhere?
Html:
<h1>Made your PC:</h1>
<div>
<label>Processeor: </label><select id="processor" name="processor">
<option class="label" value>Select Processor</option>
<!-- Home Ware -->
<option value="P1">Processor 1</option>
<option value="P2">Processor 2</option>
<option value="P3">Processor 3</option>
<option value="P4">Processor 4</option>
</select>
</div>
<p><strong>Only compatible components will show.</strong></p>
<div>
<label>Select motherboard: </label><select id="motherboard" name="motherboard" class="subcat" disabled="disabled">
<option class="label" value>Select Motherboard</option>
<!-- Home Ware -->
<option rel="P1 P2" value="AS1">ASUS RAMPAGE V EXTREME</option>
<option rel="P2 P3" value="AS2">ASUS ATX DDR3 2600 LGA</option>
<option rel="P1 P3 P4" value="GB1">Gigabyte AM3+</option>
<option rel="P2 P4" value="MSI1">MSI ATX DDR3 2600 LGA 1150</option>
</select>
</div>
<div>
<label>Select RAM: </label> <select disabled="disabled" class="subcat" id="RAM" name="RAM">
<option class="label" value>RAM Memory</option>
<option rel="AS1 AS2 GB1" value="KI1">Kingston Value RAM</option>
<option rel="AS1 AS2 MSI1" value="P5KPL">P5KPL-AM SE</option>
<option rel="MSI1 GB1" value="960GM">960GM-VGS3 FX </option>
</select>
</div>
<div>
<label>Select Video Board: </label> <select disabled="disabled" class="subcat" id="video-card" name="video-card">
<option class="label" value>Video Card</option>
<option rel="MSI1 AS2" value="EVGA8400">EVGA GeForce 8400 GS</option>
<option rel="AS1" value="XFXAMD">XFX AMD Radeon HD 5450</option>
<option rel="MSI1 GB1" value="GTX750Ti">EVGA GeForce GTX 750Ti SC</option>
</select>
</div>
Javascript:
$(function(){
var $supcat = $("#processor"),
$cat = $("#motherboard"),
$subcat = $(".subcat");
$supcat.on("change",function(){
var _rel = $(this).val();
$cat.find("option").attr("style","");
$cat.val("");
if(!_rel) return $cat.prop("disabled",true);
$cat.find("[rel~='"+_rel+"']").show();
$cat.prop("disabled",false);
});
$cat.on("change",function(){
var _rel = $(this).val();
$subcat.find("option").attr("style","");
$subcat.val("");
if(!_rel) return $subcat.prop("disabled",true);
$subcat.find("[rel~='"+_rel+"']").show();
$subcat.prop("disabled",false);
});
});
I tried this one code that was posted earlier, but it only display one selection, right after picking, is there any way it could display all the selections and with my random text, like "Your selections"?:
<script>
function myNewFunction(sel)
{
alert(sel.options[sel.selectedIndex].text);
}
</script>
<select id="box1" onChange="myNewFunction(this);" >
<option value="98">dog</option>
<option value="7122">cat</option>
<option value="142">bird</option>
</select>
This should give the actual label text, not the value, for a given select-element.
$(selector).find(":checked").html()
So if you want to show all of them, you could do something like this:
$("#video-card").on("change", function () {
var choices = [];
$("select").each(function() {
choices.push($(this).find(":checked").html());
});
alert("You selected: " + choices.join(', '));
})
And here's a codepen for demo purposes
http://codepen.io/anon/pen/XbjKYQ
function myNewFunction(sel) {
alert($(sel).val());
}
This should actually be working.
If that doesn't work, try to place a window.setTimeout(function() { ... }, 10); around your alert. It's possible that the browser calls the myNewFunction() method before it updates the selection value when the user clicks on one option.
EDIT: If you want the text instead of the value, use
alert($(sel).find("option:selected").text());
You need to loop through each of the selects, not just the first one:
function updateOutput() {
var selects = document.getElementsByTagName('SELECT');
var output = document.getElementById('output');
var arr = [];
for (i=0; i < selects.length; i++) {
arr.push(selects[i].options[selects[i].selectedIndex].text);
}
output.innerHTML = arr.join('; ');
return arr;
}
In this case, I push all the values into an array and then join the array values at the end to create the final string.
I updated a codepen provided earlier: http://codepen.io/anon/pen/WvGxgz
I want to get the value of the select box using javascript i have the following code.
html part
<select name="marked" id="marked" onchange="checkdata(this); ">
<option value="">SELECT</option>
<option value="all">ALL</option>
<option value="none">NONE</option>
<option value="read">READ</option>
<option value="unread">UNREAD</option>
</select>
script
<script type="text/javascript">
function checkdata()
{
for(var i=0; i < document.myform.message.length; i++)
{
document.myform.message[i].checked=true;
}
}
</script>
i tried the code
var all = document.myform.marked.options[document.myform.selectedIndex].value;
alert(all);
no alert is coming
i also tried
var all= document.getElementById('marked').value;
alert(all);
alert is coming but the value for every selection in "1"
You missed the '.marked':
var all = document.myform.marked.options[document.myform.marked.selectedIndex].value;
alert(all);
var e = document.getElementById("ctl00_cphContent_ddlVoteType");
var strOption = e.options[e.selectedIndex].value;
working fine for me. please check
Try
<form method="POST" name="me">
<select size="1" name="D1" onChange="checkData()">
<option value="99">Default</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
<script Language="JavaScript"><!--
function checkData()
{
var myTest =
me.D1.options[me.D1.options.selectedIndex].value;
///or me.D1.options[me.D1.selectedIndex].value
alert(myTest);
}
</script>
the following code is working for me
Java Script :
function checkdata()
{
alert(document.getElementById('marked').value);
}
HTML :
<select name="marked" id="marked" onchange="checkdata(this);">
<option value="">SELECT</option>
<option value="all">ALL</option>
<option value="none">NONE</option>
<option value="read">READ</option>
<option value="unread">UNREAD</option>
</select>
get the selected value onchange
<script Language="JavaScript">
function checkdata(marked){
var marked_value = marked.value; // store the selected value marked_value
alert(marked_value); // do further processing with "marked_value" if needed
}
</script>
for option selects you don't use "checked" that is for radio and checkbox