-3

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:

  1. count how many option is being selected
  2. Multiply the number of selected option with $arrear_per_month
  3. Display the result in field input as shown above (in arrear)

Example:

  1. Let say that February, march and april are selected.
  2. So the number of selected option is 3.
  3. And then 3 * $arrear_per_month = 45000.
  4. So i need to display 45000 as value in arrear
  5. [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

4
  • Is there any code you have tried already?
    – deviloper
    Sep 21, 2014 at 10:13
  • No there is not. i've tried to googling, but most of them are how to count the value of the selected option, not the number of selected option.
    – Bersama
    Sep 21, 2014 at 10:27
  • JavaScript only, it was added to the my answer.
    – Hamix
    Sep 21, 2014 at 11:12
  • @Bersama I have updated my code for onchange event, see if this works for you.
    – Domain
    Sep 21, 2014 at 11:25

6 Answers 6

1
var numbersChecked = $('#id_cur_month').find(":selected").length;
$("#id_cur_arrear").val(numbersChecked * <?= $arrear_per_mnth; ?>);
2
  • You are right it will work, but you have forgotten to mention to use JQuery. Also I'm sure that @Bersama forgot to tell that he needs the selected options which value is not empty.
    – Zeusarm
    Sep 21, 2014 at 10:17
  • Is it really need jquery? so javascript is not enough? @Zeusarm, Yes you right, i forgot it, i dont want to include the empty option, thanks
    – Bersama
    Sep 21, 2014 at 10:31
0

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.

0

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>
0

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

0

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

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.