CODEWITHSUNDEEP
javascriptjquery
Amran
Amran

Reputation: 657

Checkbox - Compare Values From Selection

How to compare values and show the output after making the selection on checkbox? I am using jQuery to do it. After selection had been made, it will not show the output. It will just show for first click only. Then, if we click again, the output will not be changed. Below is my code written so far,

jQuery

$("input:checkbox").on('click', function() {
        var $box = $(this),
        $price = $( "input[name='price_range']:checked").val(),
        $nama_pemohon = "<?php echo $nama_pemohon; ?>", 
        $submited_id = <?php echo $submited_id; ?>,
        $jawatan_pemohon = "<?php echo $jawatan_pemohon; ?>",
        $jabatan_pemohon = "<?php echo $jabatan_pemohon; ?>",
        $submited_by = <?php echo $submited_by; ?>,
        $nama = "<?php echo $nama; ?>",
        $jawatan = "<?php echo $jawatan; ?>",
        $jabatan = "<?php echo $jabatan; ?>";

        if($price == "< RM 10,000"){
            $("#submited_by option").val($submited_by).text($nama);
            $("#jawatan_pemohon").text($jawatan);
            $("#jabatan_pemohon").text($jabatan);
        } else {
            $("#submited_by option").val($submited_id).text($nama_pemohon);
            $("#jawatan_pemohon").text($jawatan_pemohon);
            $("#jabatan_pemohon").text($jabatan_pemohon);
        } 

});

HTML

<input type="checkbox" name="price_range" value="< RM 10,000" class="checker"> < RM 10,000.00
<input type="checkbox" name="price_range" value="< RM 200,000" class="checker"> < RM 200,000.00

<select name="submited_by" id="submited_by">
  <option value="<?php echo $submited_by; ?>"><?php echo $nama;?></option>  
</select>

Upvotes: 1

Views: 242

Answers (2)

srnjak
srnjak

Reputation: 925

As you can see in this fiddle, you get change on every click on first checkbox, but only first time on second checkbox.

This is because of your logic in:

if($price == "< RM 10,000"){
    $("#submited_by option").val($submited_by).text($nama);
    $("#jawatan_pemohon").text($jawatan);
    $("#jabatan_pemohon").text($jabatan);
} else {
    $("#submited_by option").val($submited_id).text($nama_pemohon);
    $("#jawatan_pemohon").text($jawatan_pemohon);
    $("#jabatan_pemohon").text($jabatan_pemohon);
}

Example a:

  1. click on first checkbox -> option changes to "nama", because it comes into if.
  2. click on any checkbox -> option changes to "pemohon", because it comes into else.

Example b:

  1. click on second checkbox -> option changes to "pemohon", because it comes into else.
  2. click on second checkbox again -> option doesn't change, because it comes into else again.

Upvotes: 1

r4phG
r4phG

Reputation: 515

I think that you should create a "global" variable outside of your jQuery function. 

var clicked = false;
$("input:checkbox").on('click', function() {
     if(!clicked) {
        var $box = $(this),
        $price = $( "input[name='price_range']:checked").val(),
        $nama_pemohon = "<?php echo $nama_pemohon; ?>", 
        $submited_id = <?php echo $submited_id; ?>,
        $jawatan_pemohon = "<?php echo $jawatan_pemohon; ?>",
        $jabatan_pemohon = "<?php echo $jabatan_pemohon; ?>",
        $submited_by = <?php echo $submited_by; ?>,
        $nama = "<?php echo $nama; ?>",
        $jawatan = "<?php echo $jawatan; ?>",
        $jabatan = "<?php echo $jabatan; ?>";

        if($price == "< RM 10,000"){
            $("#submited_by option").val($submited_by).text($nama);
            $("#jawatan_pemohon").text($jawatan);
            $("#jabatan_pemohon").text($jabatan);
        } else {
            $("#submited_by option").val($submited_id).text($nama_pemohon);
            $("#jawatan_pemohon").text($jawatan_pemohon);
            $("#jabatan_pemohon").text($jabatan_pemohon);
        } 
        clicked = true;
    }
});

Upvotes: 0

Related Questions