If one option Selected disabled other selected option form all select - javascript

I need to disable same other option if one option selected. i have tried but not workig for me. bellow are my html select options and want to disable if one selected
<select class="input_slip_no form-control" name="slip_no[]" id="ID_2_slip_no" required="required">
<option value="SYS0001">SYS0001</option>
<option value="SYS0002">SYS0002</option>
<option value="SYS0003">SYS0003</option>
<option value="SYS0004">SYS0004</option>
<option value="SYS0005">SYS0005</option>
<option value="SYS0006">SYS0006</option>
<option value="SYS0007">SYS0007</option>
<option value="SYS0008">SYS0008</option>
<option value="SYS0009">SYS0009</option>
</select>
<select class="input_slip_no form-control" name="slip_no[]" id="ID_3_slip_no" required="required">
<option value="SYS0001">SYS0001</option>
<option value="SYS0002">SYS0002</option>
<option value="SYS0003">SYS0003</option>
<option value="SYS0004">SYS0004</option>
<option value="SYS0005">SYS0005</option>
<option value="SYS0006">SYS0006</option>
<option value="SYS0007">SYS0007</option>
<option value="SYS0008">SYS0008</option>
<option value="SYS0009">SYS0009</option>
</select>
<select class="input_slip_no form-control" name="slip_no[]" id="ID_4_slip_no" required="required">
<option value="SYS0001">SYS0001</option>
<option value="SYS0002">SYS0002</option>
<option value="SYS0003">SYS0003</option>
<option value="SYS0004">SYS0004</option>
<option value="SYS0005">SYS0005</option>
<option value="SYS0006">SYS0006</option>
<option value="SYS0007">SYS0007</option>
<option value="SYS0008">SYS0008</option>
<option value="SYS0009">SYS0009</option>
</select>
<select class="input_slip_no form-control" name="slip_no[]" id="ID_5_slip_no" required="required">
<option value="SYS0001">SYS0001</option>
<option value="SYS0002">SYS0002</option>
<option value="SYS0003">SYS0003</option>
<option value="SYS0004">SYS0004</option>
<option value="SYS0005">SYS0005</option>
<option value="SYS0006">SYS0006</option>
<option value="SYS0007">SYS0007</option>
<option value="SYS0008">SYS0008</option>
<option value="SYS0009">SYS0009</option>
</select>
This js code I have tried but not working
$('.input_slip_no').change(function(){
alert('aaa');
// start by setting everything to enabled
$('select[name*="slip_no"] option').attr('disabled',false);
// loop each select and set the selected value to disabled in all other selects
$('select[name*="slip_no"]').each(function(){
var $this = $(this);
$('select[name*="slip_no"]').not($this).find('option').each(function(){
if($(this).attr('value') == $this.val())
$(this).attr('disabled',true);
});
});
});
I am trying to disable select class change function but js not working.I don't know where I wrong.
disabled working of below answer but not able to insert selected data because of disabled value. is it possible to only alert. that this value already selected.


That could be done simply like :
$('.input_slip_no').on('change', function() {
//Get selected options
var selected_options = $('.input_slip_no').map(function(){
return this.value
}).get();
//Disable the already selected options and enable others
$('.input_slip_no option').each(function(index) {
$(this).prop('disabled', $.inArray($(this).val(), selected_options) != -1);
});
});
Hope this helps.
$('.input_slip_no').on('change', function() {
var selected_options = $('.input_slip_no').map(function(){
return this.value
}).get();
$('.input_slip_no option').each(function(index) {
$(this).prop('disabled', $.inArray($(this).val(), selected_options) != -1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="input_slip_no form-control" name="slip_no[]" id="ID_2_slip_no" required="required">
<option value="SYS0001">SYS0001</option>
<option value="SYS0002">SYS0002</option>
<option value="SYS0003">SYS0003</option>
<option value="SYS0004">SYS0004</option>
<option value="SYS0005">SYS0005</option>
<option value="SYS0006">SYS0006</option>
<option value="SYS0007">SYS0007</option>
<option value="SYS0008">SYS0008</option>
<option value="SYS0009">SYS0009</option>
</select>
<select class="input_slip_no form-control" name="slip_no[]" id="ID_3_slip_no" required="required">
<option value="SYS0001">SYS0001</option>
<option value="SYS0002">SYS0002</option>
<option value="SYS0003">SYS0003</option>
<option value="SYS0004">SYS0004</option>
<option value="SYS0005">SYS0005</option>
<option value="SYS0006">SYS0006</option>
<option value="SYS0007">SYS0007</option>
<option value="SYS0008">SYS0008</option>
<option value="SYS0009">SYS0009</option>
</select>
<select class="input_slip_no form-control" name="slip_no[]" id="ID_4_slip_no" required="required">
<option value="SYS0001">SYS0001</option>
<option value="SYS0002">SYS0002</option>
<option value="SYS0003">SYS0003</option>
<option value="SYS0004">SYS0004</option>
<option value="SYS0005">SYS0005</option>
<option value="SYS0006">SYS0006</option>
<option value="SYS0007">SYS0007</option>
<option value="SYS0008">SYS0008</option>
<option value="SYS0009">SYS0009</option>
</select>
<select class="input_slip_no form-control" name="slip_no[]" id="ID_5_slip_no" required="required">
<option value="SYS0001">SYS0001</option>
<option value="SYS0002">SYS0002</option>
<option value="SYS0003">SYS0003</option>
<option value="SYS0004">SYS0004</option>
<option value="SYS0005">SYS0005</option>
<option value="SYS0006">SYS0006</option>
<option value="SYS0007">SYS0007</option>
<option value="SYS0008">SYS0008</option>
<option value="SYS0009">SYS0009</option>
</select>

Related

Disable the second selection options that are smaller than the first selection option

If I select for example: "5" from first selector, i want to disable first five options from second selector. Select days from 5 to minim 6.
<select class="form-control" name="days[]">
<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=1>10</option>
<option value=1>11</option>
<option value=1>12</option>
<select>
<select class="form-control" name="days[]">
<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=1>10</option>
<option value=1>11</option>
<option value=1>12</option>
<select>

You can do it using prevAll() and addBack() methods with a change event handler.
// get dropdowns
const $drop = $('[name="days[]"]');
// attach change event handler
$drop.eq(0).change(function() {
// enable all the options
$drop.eq(1).find('option').prop('disabled', false);
// get the corresponding option and all its previous options and then disable them
$drop.eq(1).find(`option[value="${this.value}"]`).prevAll().addBack().prop('disabled', true);
}).change()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="days[]">
<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=1>10</option>
<option value=1>11</option>
<option value=1>12</option>
</select>
<select class="form-control" name="days[]">
<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=1>10</option>
<option value=1>11</option>
<option value=1>12</option>
</select>

Create array from all selected options of particular class

very new to this - I'm trying to make an array with all selected options from multiple drop downs. Have tried a little jQuery however only getting an array with the first selected option. When I try the below line in console it only returns selected 'Listening' score (HTML below):
var scoreArr = $.makeArray($('.curScore :selected'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="curLang">
<h3>Enter your four-skills language test scores:</h3>
<label for="Listening">Listening: <span class="required">*</span> </label>
<select class="curScore" id="Listening" name="Listening">
<option value="4">4.0</option>
<option value="4.5">4.5</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
<option value="8">8.0</option>
<option value="8.5">8.5</option>
<option value="9">9.0</option>
<option value="9.5">9.5</option>
</select>
<label for="Reading">Reading: <span class="required">*</span> </label>
<select class="curScore" id="Reading" name="Reading">
<option value="4">4.0</option>
<option value="4.5">4.5</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
<option value="8">8.0</option>
<option value="8.5">8.5</option>
<option value="9">9.0</option>
<option value="9.5">9.5</option>
</select>
Any help is appreciated!

Use jQuery's .map() to get the values and then use .get() to convert an array:
var $select = $('select');
var scoreArr = $select.map(function() {
return $(this).val();
})
.get();
console.log(scoreArr);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="curLang">
<h3>Enter your four-skills language test scores:</h3>
<label for="Listening">Listening: <span class="required">*</span> </label>
<select class="curScore" id="Listening" name="Listening">
<option value="4">4.0</option>
<option value="4.5">4.5</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
<option value="8">8.0</option>
<option value="8.5">8.5</option>
<option value="9">9.0</option>
<option value="9.5">9.5</option>
</select>
<label for="Reading">Reading: <span class="required">*</span> </label>
<select class="curScore" id="Reading" name="Reading">
<option value="4">4.0</option>
<option value="4.5">4.5</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
<option value="8">8.0</option>
<option value="8.5">8.5</option>
<option value="9">9.0</option>
<option value="9.5">9.5</option>
</select>

Check whether selected option has no value, across multiple select fields

When I try the below jQuery, I get an error:
Unexpected Type Error (: $selReqs[i].val is not a function)
I have tried multiple variations of the below and cannot seem to get it to check if selected option has no value for each of the select fields. Any advice appreciated!
var $selReqs = $('.allMinReqs');
var reqs = [];
for(var i=0; i < $selReqs.length; i++) {
if(!$selReqs[i].val()) {
reqs.push($selReqs[i]);
}
}
<div id="minReqs">
<div class="hide" id="singleMin_mcReq"><br>
<label for="singleMin">Minimum requirement for each skill: <span class="required">*</span> </label>
<select class="allMinReqs" id="singleMin" onchange="showMcStart();">
<option value="">Please Select</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
</select>
</div>
<div class="hide" id="multiMin_mcReq"><br>
<label for="curL">Listening requirement: <span class="required">*</span> </label>
<select class="allMinReqs" id="mcReq_L">
<option value="">Please Select</option>
<option value="4">4.0</option>
<option value="4.5">4.5</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
<option value="8">8.0</option>
<option value="8.5">8.5</option>
<option value="9">9.0</option>
<option value="9.5">9.5</option>
</select>
<label for="curR">Reading requirement: <span class="required">*</span> </label>
<select class="allMinReqs" id="mcReq_R">
<option value="">Please Select</option>
<option value="4">4.0</option>
<option value="4.5">4.5</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
<option value="8">8.0</option>
<option value="8.5">8.5</option>
<option value="9">9.0</option>
<option value="9.5">9.5</option>
</select>

The issue in your code is because you're accessing a jQuery object by index. This returns the underlying DOM Element object which has no val() method.
To achieve your goal you could use map() to create an array of all the selected values. Then you can check the length of that array to determine if anything was selected, like this:
$('button').on('click', function() {
var values = $('.allMinReqs').map((i, e) => e.value !== '' ? e.value : null).get();
console.log(values);
var somethingSelected = values.length != 0;
console.log(somethingSelected);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Check</button>
<div id="minReqs">
<div class="hide" id="singleMin_mcReq"><br>
<label for="singleMin">Minimum requirement for each skill: <span class="required">*</span> </label>
<select class="allMinReqs" id="singleMin">
<option value="">Please Select</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
</select>
</div>
<div class="hide" id="multiMin_mcReq"><br>
<label for="curL">Listening requirement: <span class="required">*</span> </label>
<select class="allMinReqs" id="mcReq_L">
<option value="">Please Select</option>
<option value="4">4.0</option>
<option value="4.5">4.5</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
<option value="8">8.0</option>
<option value="8.5">8.5</option>
<option value="9">9.0</option>
<option value="9.5">9.5</option>
</select>
<label for="curR">Reading requirement: <span class="required">*</span> </label>
<select class="allMinReqs" id="mcReq_R">
<option value="">Please Select</option>
<option value="4">4.0</option>
<option value="4.5">4.5</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
<option value="8">8.0</option>
<option value="8.5">8.5</option>
<option value="9">9.0</option>
<option value="9.5">9.5</option>
</select>

Filter data $this->db->like or $this->db->or_like not working with kecamatan dropdown menu

I was stuck in my feature for my web application, I have 4 menu filters for filtering data, fungsi_bangunan, jenis_bangunan is perfectly working, and desa/kelurahan is good to because I'm using javascript in json for populated that data when I select kecamatan and then select desa/kelurahan is working to, but when I use kecamatan filter data does not showing, the query builder I think is correctly but I cannot find the something wrong about this my problem, so maybe you guys can help me, what the solution, I use php and codeigniter framework for my project,
here the model code:
public function filter_data($filter) {
$this->db->like('jenis_kegiatan',$filter);
$this->db->or_like('fungsi_bangunan',$filter);
$this->db->or_like('kecamatan',$filter);
$this->db->or_like('desa_kel',$filter);
$query = $this->db->get('permo_pdrt');
return $query->result();
}
and controller :
public function filterkeyword() {
$filter = $this->input->post('filter');
$data['results'] = $this->model->filter_data($filter);
$this->load->view('result_view',$data);
}
and this view filter :
<div class="row">
<form action="<?php echo base_url();?>pdrtcrud/filterkeyword" method="post">
<div class="col-sm-2">
<select class="form-control form-inline" id="pilih_kecamatan" name="filter">
<option selected="selected" disabled="disabled" value="">Pilih Kecamatan</option>
<option value="Babakan Madang">Babakan Madang</option>
<option value="Bojonggede">Bojonggede</option>
<option value="Caringin">Caringin</option>
<option value="Cariu">Cariu</option>
<option value="Ciampea">Ciampea</option>
<option value="Ciawi">Ciawi</option>
<option value="Cibinong">Cibinong</option>
<option value="Cibungbulang">Cibungbulang</option>
<option value="Cigombong">Cigombong</option>
<option value="Cigudeg">Cigudeg</option>
<option value="Cijeruk">Cijeruk</option>
<option value="Cileungsi">Cileungsi</option>
<option value="Ciomas">Ciomas</option>
<option value="Cisarua">Cisarua</option>
<option value="Ciseeng">Ciseeng</option>
<option value="Citereup">Citereup</option>
<option value="Dramaga">Dramaga</option>
<option value="Gunung Putri">Gunung Putri</option>
<option value="Gunung Sindur">Gunung Sindur</option>
<option value="Jasinga">Jasinga</option>
<option value="Jonggol">Jonggol</option>
<option value="Kemang">Kemang</option>
<option value="Klapanunggal">Klapanunggal</option>
<option value="Leuwiliang">Leuwiliang</option>
<option value="Leuwisadeng">Leuwisadeng</option>
<option value="Megamendung">Megamendung</option>
<option value="Nanggung">Nanggung</option>
<option value="Pamijahan">Pamijahan</option>
<option value="Parung">Parung</option>
<option value="Parung Panjang">Parung Panjang</option>
<option value="Ranca Bungur">Ranca Bungur</option>
<option value="Rumpin">Rumpin</option>
<option value="Sukajaya">Sukajaya</option>
<option value="Sukamakmur">Sukamakmur</option>
<option value="Sukaraja">Sukaraja</option>
<option value="Tajur halang">Tajur halang</option>
<option value="Tamansari">Tamansari</option>
<option value="Tanjungsari">Tanjungsari</option>
<option value="Tenjo">Tenjo</option>
<option value="Tenjolaya">Tenjolaya</option>
</select>
</div>
<div class="col-sm-2">
<select class="form-control form-inline" id="pilih_desa_kel" name="filter">
<option>Pilih Desa/Kelurahan</option>
</select>
</div>
<div class="col-sm-2">
<select class="form-control form-inline" name="filter">
<option selected="selected" disabled="disabled" value="">Jenis Kegiatan</option>
<option value="Rumah Tinggal">Rumah Tinggal</option>
<option value="Apartemen">Apartemen</option>
<option value="Hotel">Hotel</option>
<option value="Kantor Swasta">Kantor Swasta</option>
<option value="Kantor Pemerintah">Kantor Pemerintah</option>
<option value="Gedung Badan Usaha Pemerintah">Gedung Badan Usaha Pemerintah</option>
<option value="Rumah Kantor">Rumah Kantor</option>
<option value="Bank">Bank</option>
<option value="Toko">Toko</option>
<option value="Rumah Toko">Rumah Toko</option>
<option value="Rumah Makan">Rumah Makan</option>
<option value="Restoran">Restoran</option>
<option value="Warung">Warung</option>
<option value="Kios">Kios</option>
<option value="Pasar Tradisional">Pasar Tradisional</option>
<option value="Minimarket">Minimarket</option>
<option value="SuperMarket">SuperMarket</option>
<option value="Fasilitas Rekreasi">Fasilitas Rekreasi</option>
<option value="SPBU">SPBU</option>
<option value="SPBG">SPBG</option>
<option value="Bengkel">Bengkel</option>
<option value="Showroom">Showroom</option>
<option value="Pool Kendaraan">Pool Kendaraan</option>
<option value="Gedung Parkir">Gedung Parkir</option>
<option value="Gudang">Gudang</option>
<option value="Instalasi Pengolahan">Instalasi Pengolahan</option>
<option value="Instalasi Jaringan Listrik">Instalasi Jaringan Listrik</option>
<option value="Instalasi Telekomunikasi">Instalasi Telekomunikasi</option>
<option value="Instalasi Jaringan Gas">Instalasi Jaringan Gas</option>
<option value="Sarana Pendidikan">Sarana Pendidikan</option>
<option value="Sarana Ibadah">Sarana Ibadah</option>
<option value="Gedung Olahraga">Gedung Olahraga</option>
<option value="Gedung Olahraga">Gedung Olahraga</option>
<option value="Rumah Sakit">Rumah Sakit</option>
<option value="Klinik">Klinik</option>
<option value="Balai Pengobatan Lainnya">Balai Pengobatan Lainnya</option>
</select>
</div>
<div class="col-sm-2">
<select class="form-control form-inline" name="filter">
<option selected="selected" disabled="disabled" value="">Fungsi Bangunan</option>
<option value="Hunian">Hunian</option>
<option value="Usaha">Usaha</option>
<option value="Keagmaan">Keagamaan</option>
<option value="Sosial Budaya">Sosial Budaya</option>
<option value="Campuran">Campuran</option>
</select>
</div>
<div class="col-md-1">
<input class="btn btn-success" type="submit" name="btnsubmit" value="filter">
</div>
</form>

Difference between two input value without button

I have a form i have 2 select menu and one input menu
<form method="post" action="">
<label class="col-sm-3 control-label" for="textinput">Civil Works</label>
<div class="col-sm-3">
<select id="cpercentage" name="txt_cpercentage" class="form-control" onkeyup="calc()">
<option value=""></option>
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
<option value="55">55%</option>
<option value="60">60%</option>
<option value="65">65%</option>
<option value="70">70%</option>
<option value="75">75%</option>
<option value="80">80%</option>
<option value="85">85%</option>
<option value="90">90%</option>
<option value="95">95%</option>
<option value="100">100%</option>
</select>
</div>
<label class="col-sm-3 control-label" for="textinput">Electrical Works</label>
<div class="col-sm-3">
<select id="epercentage" name="txt_epercentage" class="form-control" >
<option value=""></option>
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
<option value="55">55%</option>
<option value="60">60%</option>
<option value="65">65%</option>
<option value="70">70%</option>
<option value="75">75%</option>
<option value="80">80%</option>
<option value="85">85%</option>
<option value="90">90%</option>
<option value="95">95%</option>
<option value="100">100%</option>
</select>
</div>
<label class="col-sm-3 control-label" for="textinput">Mechanical Works</label>
<div class="col-sm-3">
<input type="text" id="mpercentage" name="txt_mpercentage" class="form-control" readonly >
</div>
</form>
I use this code in javascript to calculate the difference and this difference will be 100-(select1+select2) without click any button
<script>
function calc() {
var textValue1 = document.getElementById('cpercentage').value;
var textValue2 = document.getElementById('epercentage').value;
document.getElementById('mpercentage').value = 100-(textValue1 + textValue2);
}
</script>
but i don't have any result in the input field i don't know why can any body help to solve this problem
after a search i see this in stackoverflow link
but also didn't help

Bind the change event to select elements,
document.getElementById('cpercentage').addEventListener('change', calc);
document.getElementById('epercentage').addEventListener('change', calc);
However, As you have tagged jquery, You can use
$('#cpercentage, #epercentage').on('change', calc )
window.onload = function() {
var cpercentage = document.getElementById('cpercentage');
var epercentage = document.getElementById('epercentage');
//Bind event handler
cpercentage.addEventListener('change', calc);
epercentage.addEventListener('change', calc);
function calc() {
var textValue1 = Number(cpercentage.value) || 0;
var textValue2 = Number(epercentage.value) || 0;
document.getElementById('mpercentage').value = 100 - (textValue1 + textValue2);
}
}
<form method="post" action="">
<label class="col-sm-3 control-label" for="textinput">Civil Works</label>
<div class="col-sm-3">
<select id="cpercentage" name="txt_cpercentage" class="form-control">
<option value=""></option>
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
<option value="55">55%</option>
<option value="60">60%</option>
<option value="65">65%</option>
<option value="70">70%</option>
<option value="75">75%</option>
<option value="80">80%</option>
<option value="85">85%</option>
<option value="90">90%</option>
<option value="95">95%</option>
<option value="100">100%</option>
</select>
</div>
<label class="col-sm-3 control-label" for="textinput">Electrical Works</label>
<div class="col-sm-3">
<select id="epercentage" name="txt_epercentage" class="form-control">
<option value=""></option>
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
<option value="55">55%</option>
<option value="60">60%</option>
<option value="65">65%</option>
<option value="70">70%</option>
<option value="75">75%</option>
<option value="80">80%</option>
<option value="85">85%</option>
<option value="90">90%</option>
<option value="95">95%</option>
<option value="100">100%</option>
</select>
</div>
<label class="col-sm-3 control-label" for="textinput">Mechanical Works</label>
<div class="col-sm-3">
<input type="text" id="mpercentage" name="txt_mpercentage" class="form-control" readonly>
</div>
</form>

Hi you are getting String by using this document.getElementById('cpercentage').value
so you have to parse it into integer to perform mathematical operations.
<select id="epercentage" name="txt_epercentage" class="form-control" onchange="calc()" >
I have tried to call your function by select onchange and it is working fine
hope this will be help.
<html>
<head></head><body>
<form method="post" action="">
<label class="col-sm-3 control-label" for="textinput">Civil Works</label>
<div class="col-sm-3">
<select id="cpercentage" name="txt_cpercentage" class="form-control">
<option value=""></option>
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
<option value="55">55%</option>
<option value="60">60%</option>
<option value="65">65%</option>
<option value="70">70%</option>
<option value="75">75%</option>
<option value="80">80%</option>
<option value="85">85%</option>
<option value="90">90%</option>
<option value="95">95%</option>
<option value="100">100%</option>
</select>
</div>
<label class="col-sm-3 control-label" for="textinput">Electrical Works</label>
<div class="col-sm-3">
<select id="epercentage" name="txt_epercentage" class="form-control" onchange="calc()" >
<option value=""></option>
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
<option value="55">55%</option>
<option value="60">60%</option>
<option value="65">65%</option>
<option value="70">70%</option>
<option value="75">75%</option>
<option value="80">80%</option>
<option value="85">85%</option>
<option value="90">90%</option>
<option value="95">95%</option>
<option value="100">100%</option>
</select>
</div>
<label class="col-sm-3 control-label" for="textinput">Mechanical Works</label>
<div class="col-sm-3">
<input type="text" id="mpercentage" name="txt_mpercentage" class="form-control" readonly >
</div>
</form>
</body>
<script>
function calc() {
var textValue1 = parseInt(document.getElementById('cpercentage').value);
var textValue2 = parseInt(document.getElementById('epercentage').value);
var x = 100-(textValue1+textValue2);
alert(x);
document.getElementById('mpercentage').value=x;
}
</script>
</html>

Categories

Resources