Develop Reference

Replace value from select inside hidden input

The main mission was to add the values from two select dropdowns to one hidden input. That works great but now if a user decides to choose another input, it adds to the hidden input value rather than replace it.
Live Code: DEMO
$('#expireMM').change(function() {
var theMonth = $(this).val();
$("#expiry").val( theMonth )
})
$('#expireYY').change(function() {
var theYear = $(this).val();
$('#expiry').val($('#expiry').val() + "/" + theYear );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="expireMM" id="expireMM" >
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="expireYY" id="expireYY" >
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" />

You can update the value of the #expiry input in an external function, and not based on the current value:
function getExpirationDate() {
var monthVal = $('#expireMM').val();
var yearVal = $('#expireYY').val();
if (monthVal && yearVal) {
$('#expiry').val(`${monthVal}/${yearVal}`);
} else if (monthVal) {
$('#expiry').val(monthVal);
}
console.log($('#expiry').val());
}
$('#expireMM').change(getExpirationDate)
$('#expireYY').change(getExpirationDate)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="expireMM" id="expireMM" >
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="expireYY" id="expireYY" >
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" />

$("#expiry").val($("#expireMM").val() + "/" + $("#expireYY").val())

Why not generate you expiry input value on form submit?
Here is the code.
jQuery(document).ready(function($) {
$("#my-form").submit(function() {
var monthYearVal = $('#expireMM').val() + "/" + $('#expireYY').val();
$("#expiry").val(monthYearVal);
$(this).submit();
return false;
});
});
<form id="my-form" method="POST">
<table class="table">
<tr>
<td>
<select name="expireMM" id="expireMM">
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="expireYY" id="expireYY">
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" /></tr>
</td>
<tr>
<tr>
<td colspan="2" align=center>
<input type="hidden" name="cvv">
<input class="right-col-inner-box" type="submit" value="Submit">
</td>
</tr>
</table>
</form>

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>

jquery chosen plugin with dynamic table

I'm using the jQuery plugin chosen. I have that working as I want. My issue is using it with a dynamic table. The initial row works but when a new row is added to the table the newly added chosen doesn't work. I did find a question on here about using .on but am completely lost as to how to go about this.
jQuery Code for chosen plugin
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/chosen.jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/chosen.css" />
<script>
$(function() {
$(".chzn-select").chosen();
});
</script>
HTML CODE
<h2>Please fill in the information below</h2>
<form action="pmUnitCreate.php" method="post">
<p>Click the Add button to add a new row. Click the Delete button to Delete last row.</p>
<input type="button" id="btnAdd" class="button-add" onClick="addRow('myTable')" value="Add"/>
<input type="button" id="btnDelete" class="button-delete" onClick="deleteRow('myTable')" value="Delete"/>
<br>
<table id="myTable" class="form">
<tr id="heading">
<th><b><font size="4">Job Number</font></b></th>
<th><b><font size="4">Unit Number</font></b></th>
<th><b><font size="4">Job Code</font></b></th>
<th><b><font size="4">Model Number</font></b></th>
<th><b><font size="4">Scope</font></b></th>
</tr>
<tr id="tableRow">
<td>
<input type="text" name="JobNumber[]" value="<?php echo $JobNumber;?>" readonly>
</td>
<td>
<input type="text" name="UnitID[]" value="<?php echo $JobNumber;?>-01" readonly>
</td>
<td>
<select name="JobCode[]" style="background-color:#FFE68C" required>
<option></option>
<option>F</option>
<option>FS</option>
<option>PD</option>
</select>
</td>
<td>
<input type="text" name="ModelNumber[]" style="background-color:#FFE68C" required>
</td>
<td>
<select class="chzn-select" multiple="true" data-placeholder="Select Scope's" name="Scope[]" style="width:300px;" required>
<option value="100OA">100OA</option>
<option value="BTank">BTank</option>
<option value="WSEcon">WSEcon</option>
<option value="NetPkg">NetPkg</option>
<option value="CstmCtrl">CstmCtrl</option>
<option value="CstmFef">CstmRef</option>
<option value="CstmSM">CstmSM</option>
<option value="CstmHV">CstmHV</option>
<option value="CPCtrl">CPCtrl</option>
<option value="DesiHW">DesiHW</option>
<option value="DigScroll">DigScroll</option>
<option value="DigScroll">DFGas</option>
<option value="DWall">DWall</option>
<option value="MZ-DD">MZ-DD</option>
<option value="DPP">DPP</option>
<option value="Encl">Encl</option>
<option value="PlateHX">PlateHX</option>
<option value="ERW">ERW</option>
<option value="ERWModule">ERWModule</option>
<option value="ERVMod">ERVMod</option>
<option value="EvapBP">EvapBP</option>
<option value="PreEvap">PreEvap</option>
<option value="XP">XP</option>
<option value="Extend">Extend</option>
<option value="FanWall">FanWall</option>
<option value="FillStat">FillStat</option>
<option value="FFilt">FFilt</option>
<option value="PFilt">PFilt</option>
<option value="CarbFilt">CarbFilt</option>
<option value="CustFilt">CustFilt</option>
<option value="MGH(H)">MGH(H)</option>
<option value="GHeat">GHeat</option>
<option value="HighStatic">HighStatic</option>
<option value="HGBP">HGBP</option>
<option value="HGRH">HGRH</option>
<option value="HPConv">HPConv</option>
<option value="GFHumid">GFHumid</option>
<option value="TOHumid">TOHumid</option>
<option value="MHGRH">MHGRH</option>
<option value="LowAF">LowAF</option>
<option value="LowAFSF">LowAFSF</option>
<option value="LowAmbient">LowAmbient</option>
<option value="MEHeat(R)">MEHeat(R)</option>
<option value="MEHeat(I)">MEHeat(I)</option>
<option value="HGH(R)">MGH(R)</option>
<option value="MGH(H)">MGH(H)</option>
<option value="MtrRR">MtrRR</option>
<option value="MotorGM">MotorGM</option>
<option value="MS-Mod">MZ-Mod</option>
<option value="NatConv">NatConv</option>
<option value="OAFMS">OAFMS</option>
<option value="OSMotor">OSMotor</option>
<option value="MZ-VAV">MZ-VAV</option>
<option value="Mon">Mon</option>
<option value="PumpPkg">PumpPkg</option>
<option value="PipePkg">PipePkg</option>
<option value="ServLite">ServLite</option>
<option value="SparkRes">SparkRes</option>
<option value="SSLube">SSLube</option>
<option value="UVLights">UVLights</option>
<option value="VSComp">VSComp</option>
<option value="LCVAV">LCVAV</option>
<option value="XFVAV">XFVAV</option>
<option value="WCCond">WCCond</option>
<option value="WSHPConv">WSHPConv</option>
<option value="3RConv">3RConv</option>
<option value="WiringGM">WiringGM</option>
<option value="XFan">XFan</option>
<option value="RFan">RFan</option>
<option value="SFan">SFan</option>
<option value="OAHood">OAHood</option>
<option value="XAHood">XAHood</option>
<option value="XALouver">XALouver</option>
<option value="OALouver">OALouver</option>
<option value="SteamCoil">SteamCoil</option>
<option value="HWCoil">HWCoil</option>
<option value="CHWCoil">CHWCoil</option>
<option value="CondCoil">CondCoil</option>
<option value="DXCoil">DXCoil</option>
<option value="F&BP">F&BP</option>
<option value="Xfrmr">Xfrmr</option>
<option value="WCCond">WCCond</option>
<option value="PLFrHX">PlFrHX</option>
</select>
</td>
</table>
JS code for adding rows to table
<script>
function incrementUnitId(unitId) {
var arr = unitId.split('-');
if (arr.length === 1) {return;} // The unit id is not valid;
var number = parseInt(arr[1]) + 1;
return arr[0] + '-' + (number < 10 ? 0 : '') + number;
}
function addRow() {
var row = document.getElementById("tableRow"); // find row to copy
var table = document.getElementById("myTable"); // find table to append to
var clone = row.cloneNode(true); // copy children too
row.id = "oldRow"; // We want to take the last value inserted
clone.cells[1].childNodes[1].value = incrementUnitId(clone.cells[1].childNodes[1].value)
table.appendChild(clone); // add new row to end of table
}
function deleteRow() {
document.getElementById("myTable").deleteRow(-1);
}
</script>

hey, I know i'm little late but you need to destroy your chosen and
then append and recontruct it like this:
$(function() {
$(".chzn-select").chosen();
});
function addRow() {
var row = document.getElementById("tableRow"); // find row to copy
var table = document.getElementById("myTable"); // find table to append
$(".chzn-select").chosen("destroy")
var clone = $('#newId').get(0).outerHTML;
var tblRow = '<tr><td> <input type="text"></td>';
tblRow += '<td> <input type="text"></td>';
tblRow += '<td>'+$("#selectJob").html()+'</td>';
tblRow += '<td> <input type="text"></td>';
tblRow += '<td >'+clone+'</td>';
tblRow += '<td </td> <td </td> ';
tblRow+='</tr>';
$("#myTable").append(tblRow);
$('.chzn-select').chosen()
}
<link rel="stylesheet" type="text/css" href="css/chosen.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.css" rel="stylesheet" type="text/css">
<h2>Please fill in the information below</h2>
<form action="pmUnitCreate.php" method="post">
<p>Click the Add button to add a new row. Click the Delete button to Delete last row.</p>
<input type="button" id="btnAdd" class="button-add" onClick="addRow('myTable')" value="Add"/>
<input type="button" id="btnDelete" class="button-delete" onClick="deleteRow('myTable')" value="Delete"/>
<br>
<table id="myTable" class="form">
<tr id="heading">
<th><b><font size="4">Job Number</font></b></th>
<th><b><font size="4">Unit Number</font></b></th>
<th><b><font size="4">Job Code</font></b></th>
<th><b><font size="4">Model Number</font></b></th>
<th><b><font size="4">Scope</font></b></th>
</tr>
<tr id="tableRow">
<td>
<input type="text" name="JobNumber[]" value=" " readonly>
</td>
<td>
<input type="text" name="UnitID[]" value=" " readonly>
</td>
<td>
<div id="selectJob">
<select id="JobCode" name="JobCode[]" style="background-color:#FFE68C" required>
<option></option>
<option>F</option>
<option>FS</option>
<option>PD</option>
</select>
</div>
</td>
<td>
<input type="text" name="ModelNumber[]" style="background-color:#FFE68C" required>
</td>
<td>
<select class="chzn-select" id="newId" multiple="true" data-placeholder="Select Scope's" name="Scope[]" style="width:300px;" required>
<option value="100OA">100OA</option>
<option value="BTank">BTank</option>
<option value="WSEcon">WSEcon</option>
<option value="NetPkg">NetPkg</option>
<option value="CstmCtrl">CstmCtrl</option>
<option value="CstmFef">CstmRef</option>
<option value="CstmSM">CstmSM</option>
<option value="CstmHV">CstmHV</option>
<option value="CPCtrl">CPCtrl</option>
<option value="DesiHW">DesiHW</option>
<option value="DigScroll">DigScroll</option>
<option value="DigScroll">DFGas</option>
<option value="DWall">DWall</option>
<option value="MZ-DD">MZ-DD</option>
<option value="DPP">DPP</option>
<option value="Encl">Encl</option>
<option value="PlateHX">PlateHX</option>
<option value="ERW">ERW</option>
<option value="ERWModule">ERWModule</option>
<option value="ERVMod">ERVMod</option>
<option value="EvapBP">EvapBP</option>
<option value="PreEvap">PreEvap</option>
<option value="XP">XP</option>
<option value="Extend">Extend</option>
<option value="FanWall">FanWall</option>
<option value="FillStat">FillStat</option>
<option value="FFilt">FFilt</option>
<option value="PFilt">PFilt</option>
<option value="CarbFilt">CarbFilt</option>
<option value="CustFilt">CustFilt</option>
<option value="MGH(H)">MGH(H)</option>
<option value="GHeat">GHeat</option>
<option value="HighStatic">HighStatic</option>
<option value="HGBP">HGBP</option>
<option value="HGRH">HGRH</option>
<option value="HPConv">HPConv</option>
<option value="GFHumid">GFHumid</option>
<option value="TOHumid">TOHumid</option>
<option value="MHGRH">MHGRH</option>
<option value="LowAF">LowAF</option>
<option value="LowAFSF">LowAFSF</option>
<option value="LowAmbient">LowAmbient</option>
<option value="MEHeat(R)">MEHeat(R)</option>
<option value="MEHeat(I)">MEHeat(I)</option>
<option value="HGH(R)">MGH(R)</option>
<option value="MGH(H)">MGH(H)</option>
<option value="MtrRR">MtrRR</option>
<option value="MotorGM">MotorGM</option>
<option value="MS-Mod">MZ-Mod</option>
<option value="NatConv">NatConv</option>
<option value="OAFMS">OAFMS</option>
<option value="OSMotor">OSMotor</option>
<option value="MZ-VAV">MZ-VAV</option>
<option value="Mon">Mon</option>
<option value="PumpPkg">PumpPkg</option>
<option value="PipePkg">PipePkg</option>
<option value="ServLite">ServLite</option>
<option value="SparkRes">SparkRes</option>
<option value="SSLube">SSLube</option>
<option value="UVLights">UVLights</option>
<option value="VSComp">VSComp</option>
<option value="LCVAV">LCVAV</option>
<option value="XFVAV">XFVAV</option>
<option value="WCCond">WCCond</option>
<option value="WSHPConv">WSHPConv</option>
<option value="3RConv">3RConv</option>
<option value="WiringGM">WiringGM</option>
<option value="XFan">XFan</option>
<option value="RFan">RFan</option>
<option value="SFan">SFan</option>
<option value="OAHood">OAHood</option>
<option value="XAHood">XAHood</option>
<option value="XALouver">XALouver</option>
<option value="OALouver">OALouver</option>
<option value="SteamCoil">SteamCoil</option>
<option value="HWCoil">HWCoil</option>
<option value="CHWCoil">CHWCoil</option>
<option value="CondCoil">CondCoil</option>
<option value="DXCoil">DXCoil</option>
<option value="F&BP">F&BP</option>
<option value="Xfrmr">Xfrmr</option>
<option value="WCCond">WCCond</option>
<option value="PLFrHX">PlFrHX</option>
</select>
</td>
</table>

add 2 values and total them in one innerHTML

I am still learning js, and am stuck once again, I am trying to add 2 drop down menu values and total them in one innerHTML.
I am trying to take the value2 from Phones/Devices (item) then add the value from the New Activation (item1) drop down and total them in the Commission innerHTML. In the js, the commission line is cost.
I have tried adding the element in the cost line, and that did not work. also tried adding the item itself to the cost line.
here is the html and js
<table width="50%" border="0">
<tr>
<td width="20%"><div align="center">item</div></td>
<td width="20%"><div align="center">New Activation</div></td>
<td width="20%"><div align="center">Commission</div></td>
<td width="20%"><div align="center">Price</div></td>
<td width="20%"><div align="center">MEID</div></td>
<td width="20%"><div align="center">Number</div></td>
</tr>
<td><div class="styled" align="center">
<select name="item" id="item">
<option value="">Phones/Devices</option>
<option value="">-----APPLE-----</option>
<option value="200.00" value2="20.00" value3="iPhone4">iPhone 4 8GB</option>
<option value="225.00" value2="20.00" value3="iPhone416">iPhone 4 16GB</option>
<option value="250.00" value2="20.00" value3="iPhone432">iPhone 4 32GB</option>
<option value="275.00" value2="20.00" value3="iPhone464">iPhone 4 64GB</option>
<option value="300.00" value2="20.00">iPhone 4S 8GB</option>
<option value="325.00" value2="20.00">iPhone 4S 16GB</option>
<option value="350.00" value2="20.00">iPhone 4S 32GB</option>
<option value="375.00" value2="20.00">iPhone 4S 64GB</option>
<option value="400.00" value2="20.00">iPhone 5</option>
<option value="500.00" value2="30.00">iPhone 5C</option>
<option value="625.00" value2="30.00">iPhone 5S</option>
<option value="">-----BlackBerry-----</option>
<option value="75.00" value2="5.00">Curve</option>
<option value="100.00" value2="5.00">Bold</option>
<option value="225.00" value2="10.00">Q10</option>
<option value="250.00" value2="10.00">Z10</option>
<option value="">-----HTC-----</option>
<option value="100.00" value2="5.00">Incredible</option>
<option value="150.00" value2="5.00">Incredible 2</option>
<option value="150.00" value2="5.00">Evo</option>
<option value="125.00" value2="5.00">Evo Shift</option>
<option value="200.00" value2="10.00">Evo LTE</option>
<option value="175.00" value2="10.00">Rhyme</option>
<option value="225.00" value2="10.00">Rezound</option>
<option value="400.00" value2="20.00">DNA</option>
<option value="450.00" value2="20.00">HTC One</option>
<option value="600.00" value2="20.00">HTC One M8</option>
<option value="">-----Huawei-----</option>
<option value="100.00" value2="5.00">Ascend Y</option>
<option value="150.00" value2="5.00">Ascend Plus</option>
<option value="">-----LG-----</option>
<option value="50.00" value2="5.00">Optimus Dynamic</option>
<option value="100.00" value2="5.00">Optimus Zip</option>
<option value="75.00" value2="5.00">Vortex</option>
<option value="100.00" value2="5.00">Enlighten</option>
<option value="250.00" value2="10.00">Lucid</option>
<option value="200.00" value2="10.00">Revolution</option>
<option value="250.00" value2="10.00">Spectrum</option>
<option value="450.00" value2="20.00">G2</option>
<option value="">-----Motorola-----</option>
<option value="100.00" value2="5.00">Droid 2</option>
<option value="175.00" value2="5.00">Droid 3</option>
<option value="200.00" value2="10.00">Droid 4</option>
<option value="225.00" value2="10.00">Bionic</option>
<option value="250.00" value2="10.00">Razr</option>
<option value="275.00" value2="10.00">Razr Maxx</option>
<option value="300.00" value2="10.00">Razr HD</option>
<option value="350.00" value2="20.00">Moto X</option>
<option value="300.00" value2="20.00">Moto G</option>
<option value="350.00" value2="20.00">Droid Ultra</option>
<option value="">-----SAMSUNG-----</option>
<option value="200.00" value2="10.00">Galaxy Stellar</option>
<option value="250.00" value2="10.00">Galaxy Stratosphere 2</option>
<option value="225.00" value2="10.00">Galaxy Nexus</option>
<option value="225.00" value2="5.00">Epic 4G</option>
<option value="250.00" value2="10.00">Galaxy S2</option>
<option value="300.00" value2="20.00">Galaxy S3</option>
<option value="450.00" value2="20.00">Galaxy S4</option>
<option value="650.00" value2="30.00">Galaxy S5</option>
<option value="450.00" value2="20.00">Galaxy Note ll</option>
<option value="600.00" value2="30.00">Galaxy Note lll</option>
</select>
</div></td>
<td><div class="styled" align="center">
<select name="item1" id="item1">
<option value="">New Activation?</option>
<option value="5.00">YES</option>
<option value="0.00">NO</option>
</select>
</div></td>
<span style="visibility:hidden;display:none;" id="phones"></span>
<td><div align="center">
<span id="cost"></span>
</div></td>
<td><div align="center">
<span id="price"></span>
</div></td>
<td>
<div align="center">
<input name="meid" type="Text" id="meid"/>
</div>
</td>
<td>
<div align="center">
<input name="number" type="Text" id="number"/>
</div>
</td>
</tr>
and the javascript
var item = document.getElementById('item');
var item1 = document.getElementById('item1');
item.onchange = function() {
price.innerHTML = "$" + this.value;
cost.innerHTML = "$" + (this[this.selectedIndex].getAttribute('value2'));
phone.innerHTML = "" + (this[this.selectedIndex].getAttribute('value3'));
};
and here is a jsfiddle
after messing around with this modified script i think that this is the line that is not working properly
var commission = +phoneEl.getAttribute("value2");
I cant figure out what is wrong. http://jsfiddle.net/3zf8G/4/

Here:
var phoneEl = document.getElementById('item');
var activationEl = document.getElementById('item1');
function updatePrice() {
var phonePrice = +phoneEl.value;
price.innerHTML = "$"+phonePrice;
}
function updateCommission() {
var commission = +phoneEl.options[phoneEl.selectedIndex].getAttribute("value2"),
activationPrice = +activationEl.value,
totalCommission = commission + activationPrice;
cost.innerHTML = "$" + totalCommission;
}
phoneEl.onchange = function() {
updatePrice();
updateCommission();
};
activationEl.onchange = function() {
updatePrice();
updateCommission();
};
fiddle: http://jsfiddle.net/3zf8G/5/
You're not converting the values stored in your value and value2 attributes to numbers; you can parse a string into a number by preceding it with a +. And you're not watching for changes to the activation drop down. Also the variable phone is not defined. I changed your variable names for the sake of clarity.

Close button on lightbox is not working

I have a light box on Request a Quote button. But when i click on close button it doesn't close the lightbox
http://expedition2india.com/tour_packages.php?destination=&package=26&tab=include&page_id=#placeholder
<div id="inline_content" style="display:none;">
<div class="trans"></div>
<div class="popup">
<div class="head left">CloseT
<h2>Request a Quote</h2>
<p>Fill out the form below to request a quote.</p>
</div>
<div id="preloader"><img src="<?php echo SITE_URL; ?>images/preloader.gif" /></div>
<form id="reg-form" class="formular" method="post" action="">
<table cellpadding="0" width="100%" cellspacing="0" border="0" class="left" style="padding:20px;">
<tr><td style="font-family:'Trebuchet MS', verdana; font-size:12px; font-weight:bold"><strong>Selected Tour:</strong> <span class="selected_tour"><?php echo $tour['package_name']; ?></span></td></tr>
<!--<tr><td style="font-family:'Trebuchet MS', verdana; font-size:12px; font-weight:bold"><strong>Selected Date:</strong> <span class="selected_date"></span></td></tr> -->
<tr><td><input type="text" name="cname" id="cname" class="textbox2bg validate[required,minSize[3],maxSize[50]] text-input" placeholder="Name" /></td></tr>
<tr><td><input type="text" name="email" id="email" class="textbox2bg validate[required,custom[email]] text-input" placeholder="Email Id" /></td></tr>
<tr><td><input type="text" name="phone" id="phone" placeholder="Phone" class="validate[required,custom[phone]] text-input"/></td></tr>
<tr>
<td><select name="travelMonth" id="travelMonth" class="textarea2bg validate[required] text-input">
<option value="" selected="selected">Select Travel month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</td>
</tr>
<tr>
<td><select name="adults" id="adults" class="textarea2bg validate[required] text-input">
<option value="" selected="selected">Select No. of Adults</option>
<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="10">10</option>
<option value="10">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="20+">20+</option>
</select>
</td>
</tr>
<tr>
<td><select name="child" id="child">
<option value="" selected="selected">Select No. of Children</option>
<option value="0">0</option>
<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="10">10</option>
</select>
</td>
</tr>
<tr>
<td><select name="hotel_type" id="hotel_type" class="textarea2bg validate[required] text-input">
<option value="" selected="selected">Select Hotel Types</option>
<option value="first_class">First Class</option>
<option value="deluxe">Deluxe</option>
<option value="Oppulent">Oppulent</option>
</select>
</td>
</tr>
<tr>
<td><textarea name="otherinfo" id="otherinfo" placeholder="Other Information"></textarea><input type="hidden" name="selected_date" id="selected_date" /></td></tr>
<tr><td><input type="hidden" value="<?php echo $tour['id']; ?>" name="tour" id="tour" /><input type="submit" name="Submit" id="submit" class="bt" value="Submit" /></td></tr>
</table>
</form>
<div id="thanks"></div>
</div>
</div>

The thing you want to delete simply can hide or removed from DOM.
Tried this way
$("#Iwanttohide").hide()
$("#Iwanttohide").html("");
You can also tried fadeout to hide the elements with fade animation.