Difference between two input value without button

Difference between two input value without button - javascript

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>

Related

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>

How to Link to a Selected Drop-Down Item to Open a Web Page

I am trying to create a form which has city and social networking filter. I want to capture both the city and social networking value as i want to store the value and i want my form to redirect to social networking site on submit button. Suppose if i choose facebook, i want facebook homepage to open on submit button. My page is not getting redirected. here is my code
<script type="text/javascript">
function actionDef() {
var option_selected = $('purposeId').value();
console.log = option_selected;
if( option_selected=="gl" ) {
document.getElementById("search-form").action = "https://www.google.co.in/";
}
else if( option_selected=="y" ) {
document.getElementById("search-form").action = "https://in.yahoo.com/?p=us";
}
else if( option_selected=="fb" ) {
document.getElementById("search-form").action = "http://www.facebook.com/";
}
}
</script>
<form action="/" name="search-form" id="search-form" method="get" accept-charset="UTF-8" class="form-vertical">
<div class="city">
<label for="cityId" class="required">Enter your city</label>
<select id="cityId" name="cityId" data-prefill="location.cityId" class="form-control" placeholder="Enter a city">
<option value="9">Bangalore</option>
<option value="20">Chennai</option>
<option value="27">Faridabad</option>
<option value="28">Ghaziabad</option>
<option value="32">Gurgaon</option>
<option value="36">Howrah</option>
<option value="38">Hyderabad</option>
<option value="49">Kolkata</option>
<option value="57">Mumbai</option>
<option value="61">Navi Mumbai</option>
<option value="63" selected="selected">New Delhi</option>
<option value="89">Noida</option>
<option value="70">Pune</option>
<option value="76">Secunderabad</option>
<option value="79">Thane</option>
<option value="92">Agra</option>
<option value="1">Ahmedabad</option>
<option value="208">Ahmednagar</option>
<option value="93">Ajmer</option>
<option value="2">Akola</option>
<option value="295">Alappuzha</option>
<option value="209">Aligarh</option>
<option value="3">Allahabad</option>
<option value="140">Alleppey</option>
<option value="294">Aluva</option>
<option value="4">Alwar</option>
<option value="94">Ambala</option>
<option value="141">Amravati</option>
<option value="5">Amritsar</option>
<option value="6">Anand</option>
<option value="112">Anantapur</option>
<option value="255">Anantnag</option>
<option value="7">Ankleshwar</option>
<option value="210">Arakkonam</option>
<option value="256">Asansol</option>
<option value="8">Aurangabad</option>
<option value="297">Avadi</option>
<option value="211">Baddi</option>
<option value="302">Bagalkot</option>
<option value="9">Bangalore</option>
<option value="142">Bardoli</option>
<option value="10">Bareilly</option>
<option value="212">Barkathpura</option>
<option value="11">Baroda</option>
<option value="213">Batala</option>
<option value="214">Beawar</option>
<option value="12">Belgaum</option>
<option value="113">Bellary</option>
<option value="267">Berhampur</option>
<option value="13">Bharuch</option>
<option value="91">Bhatinda</option>
<option value="143">Bhavnagar</option>
<option value="257">Bhilai</option>
<option value="17">Bhilwara</option>
<option value="215">Bhimavaram</option>
<option value="144">Bhiwandi</option>
<option value="14">Bhopal</option>
<option value="15">Bhubaneshwar</option>
<option value="145">Bhuj</option>
<option value="288">Bidar</option>
<option value="301">Bijapur</option>
<option value="16">Bikaner</option>
<option value="216">Bilaspur</option>
<option value="146">Boisar</option>
<option value="258">Bokaro</option>
<option value="18">Calicut</option>
<option value="19">Chandigarh</option>
<option value="217">Chandrapur</option>
<option value="147">Changanacherry</option>
<option value="275">Chankheda</option>
<option value="20">Chennai</option>
<option value="96">Chidambaram</option>
<option value="290">Chitradurga</option>
<option value="300">Chokodi</option>
<option value="21">Cochin</option>
<option value="22">Coimbatore</option>
<option value="148">Cuddalore</option>
<option value="23">Cuttack</option>
<option value="149">Dahanu</option>
<option value="150">Dahej</option>
<option value="151">Daman</option>
<option value="273">Dausa</option>
<option value="152">Davangere</option>
<option value="105">Dehradun</option>
<option value="24">Delhi</option>
<option value="218">Derabassi</option>
<option value="25">Dewas</option>
<option value="95">Dhanbad</option>
<option value="97">Dharwad</option>
<option value="26">Dhule</option>
<option value="219">Dindigul</option>
<option value="220">Durg</option>
<option value="153">Durgapur</option>
<option value="98">Eluru</option>
<option value="106">Ernakulam</option>
<option value="99">Erode</option>
<option value="221">Faizabad</option>
<option value="27">Faridabad</option>
<option value="222">Firozabad</option>
<option value="154">Gandhidham</option>
<option value="253">Gandhinagar</option>
<option value="107">Gangtok</option>
<option value="28">Ghaziabad</option>
<option value="29">Goa</option>
<option value="299">Gokak</option>
<option value="259">Gorakhpur</option>
<option value="30">Gulbarga</option>
<option value="31">Guntur</option>
<option value="32">Gurgaon</option>
<option value="114">Guwahati</option>
<option value="33">Gwalior</option>
<option value="108">Haldwani</option>
<option value="223">Hapur</option>
<option value="155">Haridwar</option>
<option value="289">Harpanahalli</option>
<option value="129">Hassan</option>
<option value="287">Haveri</option>
<option value="264">Hazirabagh</option>
<option value="34">Himmatnagar</option>
<option value="109">Hissar</option>
<option value="156">Hoshiarpur</option>
<option value="157">Hospet</option>
<option value="35">Hosur</option>
<option value="36">Howrah</option>
<option value="37">Hubli</option>
<option value="38">Hyderabad</option>
<option value="293">Idukki</option>
<option value="39">Indore</option>
<option value="40">Jabalpur</option>
<option value="41">Jaipur</option>
<option value="45">Jalandhar</option>
<option value="131">Jalgaon</option>
<option value="224">Jalna</option>
<option value="260">Jammu</option>
<option value="42">Jamnagar</option>
<option value="43">Jamshedpur</option>
<option value="225">Jhansi</option>
<option value="44">Jodhpur</option>
<option value="46">Junagadh</option>
<option value="284">Kadappa</option>
<option value="110">Kakinada</option>
<option value="158">Kalka</option>
<option value="279">Kallakurichi</option>
<option value="159">Kalyan</option>
<option value="160">Kancheepuran</option>
<option value="100">Kankroli</option>
<option value="161">Kannur</option>
<option value="47">Kanpur</option>
<option value="132">Kanyakumari</option>
<option value="162">Kapurthala</option>
<option value="163">Karad</option>
<option value="164">Karaikudi</option>
<option value="226">Karimnagar</option>
<option value="111">Karnal</option>
<option value="165">Karur</option>
<option value="286">Karwar</option>
<option value="283">Kasaragode</option>
<option value="227">Katni</option>
<option value="228">Khammam</option>
<option value="266">Khandwa</option>
<option value="166">Khanna</option>
<option value="265">Khargone</option>
<option value="305">Kolar</option>
<option value="48">Kolhapur</option>
<option value="49">Kolkata</option>
<option value="167">Kollam</option>
<option value="50">Kota</option>
<option value="90">Kottayam</option>
<option value="168">Kovilatti</option>
<option value="115">Kozhikode</option>
<option value="169">Kumbakonam</option>
<option value="116">Kurnool</option>
<option value="170">Kurukshetra</option>
<option value="136">Lathur</option>
<option value="51">Lucknow</option>
<option value="52">Ludhiana</option>
<option value="53">Madurai</option>
<option value="254">Mahabubnagar</option>
<option value="54">Mahad</option>
<option value="278">Malappuram</option>
<option value="282">Mandya</option>
<option value="55">Mangalore</option>
<option value="139">Mangan</option>
<option value="101">Manipal</option>
<option value="171">Manjeri</option>
<option value="130">Mansarovar</option>
<option value="172">Mapusa</option>
<option value="229">Mathura</option>
<option value="292">Mavelikara</option>
<option value="173">Meerut</option>
<option value="56">Mehsana</option>
<option value="174">Moga</option>
<option value="137">Mohali</option>
<option value="175">Morvi</option>
<option value="298">Mudhol</option>
<option value="57">Mumbai</option>
<option value="58">Mysore</option>
<option value="176">Nabha</option>
<option value="177">Nadiad</option>
<option value="117">Nagercoil</option>
<option value="59">Nagpur</option>
<option value="230">Nanded</option>
<option value="231">Nandyal</option>
<option value="277">Narsipatnam</option>
<option value="60">Nashik</option>
<option value="61">Navi Mumbai</option>
<option value="178">Navsari</option>
<option value="304">Neelamangala</option>
<option value="62">Nellore</option>
<option value="63">New Delhi</option>
<option value="232">Nizamabad</option>
<option value="89">Noida</option>
<option value="274">Nokha</option>
<option value="233">Ongole</option>
<option value="179">Palakkad</option>
<option value="261">Palanpur</option>
<option value="268">Palghar</option>
<option value="234">Pali</option>
<option value="138">Panchkulla</option>
<option value="180">Panipat</option>
<option value="181">Panjim</option>
<option value="64">Panvel</option>
<option value="235">Parbhani</option>
<option value="182">Patalganga</option>
<option value="183">Pathanamthitta</option>
<option value="236">Pathankot</option>
<option value="65">Patiala</option>
<option value="66">Patna</option>
<option value="67">Pen</option>
<option value="184">Phagwara</option>
<option value="68">Pithampur</option>
<option value="185">Pollachi</option>
<option value="186">Ponda</option>
<option value="102">Pondichery</option>
<option value="69">Porbunder</option>
<option value="296">Poruru</option>
<option value="187">Porvorim</option>
<option value="188">Pudukottai</option>
<option value="70">Pune</option>
<option value="237">Raichur</option>
<option value="238">Raigarh</option>
<option value="71">Raipur</option>
<option value="72">Rajkot</option>
<option value="73">Rajmundry</option>
<option value="239">Rajnandgaon</option>
<option value="189">Rajpura</option>
<option value="74">Ranchi</option>
<option value="240">Ranipet</option>
<option value="75">Ratlam</option>
<option value="133">Ratnagiri</option>
<option value="190">Rewari</option>
<option value="241">Rohtak</option>
<option value="191">Ropar</option>
<option value="118">Rourkela</option>
<option value="192">Rudrapur</option>
<option value="242">Saharanpur</option>
<option value="103">Salem</option>
<option value="285">Sangareddy</option>
<option value="134">Sangli</option>
<option value="193">Sangrur</option>
<option value="135">Satara</option>
<option value="76">Secunderabad</option>
<option value="119">Shimla</option>
<option value="243">Shimoga</option>
<option value="262">Sikar</option>
<option value="120">Silchar</option>
<option value="121">Siliguri</option>
<option value="77">Silvassa</option>
<option value="244">Sirsa</option>
<option value="245">Sitapur</option>
<option value="194">Sivakasi</option>
<option value="195">Sohana</option>
<option value="246">Solan</option>
<option value="196">Solapur</option>
<option value="197">Sonepat</option>
<option value="247">Sri Ganganagar</option>
<option value="248">Srikakulam</option>
<option value="263">Srinagar</option>
<option value="78">Surat</option>
<option value="269">Swargate</option>
<option value="249">Tadepalligudem</option>
<!--<option value="250">Tamilnadu</option> -->
<option value="122">Tanjore</option>
<option value="79">Thane</option>
<option value="198">Thanjavur</option>
<option value="281">Theni</option>
<option value="123">Thiruvananthapuram</option>
<option value="280">Thiruvannamalai</option>
<option value="291">Thripunithura</option>
<option value="124">Thrissur</option>
<option value="125">Tirunelveli</option>
<option value="126">Tirupathi</option>
<option value="251">Tirupur</option>
<option value="199">Tiruvalla</option>
<option value="272">Tonk</option>
<option value="104">Trichur</option>
<option value="80">Trichy</option>
<option value="81">Trivandrum</option>
<option value="200">Tumkur</option>
<option value="82">Udaipur</option>
<option value="201">Udupi</option>
<option value="83">Ujjain</option>
<option value="202">Unjha</option>
<option value="84">Valsad</option>
<option value="85">Vapi</option>
<option value="86">Varanasi</option>
<option value="276">Vastral</option>
<option value="127">Vellore</option>
<option value="203">Veraval</option>
<option value="87">Vijayawada</option>
<option value="204">Villupuram</option>
<option value="205">Virudhachalam</option>
<option value="206">Virudhunagar</option>
<option value="88">Vizag</option>
<option value="128">Warangal</option>
<option value="271">Wardha</option>
<option value="252">Yamunanagar</option>
<option value="270">Yavatmal</option>
<option value="303">Yelanka</option>
<option value="207">Zirakpur</option>
</select>
<span id="city-not-selected-error" class="help-inline"> </span> <i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="purpose">
<label for="purposeId" class="required">Enter Type</label>
<select id="purposeId" name="purposeId" class="form-control" placeholder="Selelct Type" onChange="actionDef()">
<option value="select_purpose" selected="selected">Selelct Type</option>
<option value="1" id="gl">Google</option>
<option value="2" id="y">Yahoo</option>
<option value="3" id="fb">Facebook</option>
</select>
<span id="city-not-selected-error" class="help-inline"> </span> <i class="fa fa-angle-down" aria-hidden="true"></i> <span id="purpose-not-selected-error" class="help-inline"> </span>
</div>
<div class="show-ofr">
<input type="submit" name="button" class="btn btn-primary btn-block">
</div>
</form>

try the below code, the problem is the way you process your value from select field.
JavaScript
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
jQuery(function($) {
// bind change event to select
$('#purposeId').on('change', function() {
var url = $(this).val(); // get selected value
alert(url);
if (url == "1") {
document.getElementById("search-form").action = "https://www.google.co.in/";
} else if (url == "2") {
document.getElementById("search-form").action = "https://in.yahoo.com/?p=us";
} else if (url == "3") {
document.getElementById("search-form").action = "http://www.facebook.com/";
}
});
});
</script>
HTML
<form action="" name="search-form" id="search-form" method="get" accept-charset="UTF-8" class="form-vertical">
<div class="city">
<label for="cityId" class="required">Enter your city</label>
<select id="cityId" name="cityId" data-prefill="location.cityId" class="form-control" placeholder="Enter a city">
<option value="88">Vizag</option>
<option value="128">Warangal</option>
<option value="271">Wardha</option>
<option value="252">Yamunanagar</option>
<option value="270">Yavatmal</option>
<option value="303">Yelanka</option>
<option value="207">Zirakpur</option>
</select>
<span id="city-not-selected-error" class="help-inline"></span>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="purpose">
<label for="purposeId" class="required">Enter Type</label>
<select id="purposeId" name="purposeId" class="form-control" placeholder="Selelct Type">
<option value="select_purpose" selected="selected">Selelct Type</option>
<option value="1" id="gl">Google</option>
<option value="2" id="y">Yahoo</option>
<option value="3" id="fb">Facebook</option>
</select>
<span id="city-not-selected-error" class="help-inline"> </span> <i class="fa fa-angle-down" aria-hidden="true"></i> <span id="purpose-not-selected-error" class="help-inline"> </span>
</div>
<div class="show-ofr">
<input type="submit" name="button" class="btn btn-primary btn-block">
</div>
</form>

Making a different value the default using javascript

I am trying to make the default value different than what is defined in the HTML. I cannot change the HTML because it is locked by a parent company of ours. I can however change the default if I use javascript. Here is the HTML
<div class="col-md-6">
<div id="addressTypeWrapper" class="form-group">
<label for="addressListArray[0].addressTypeString">Type</label>
<select name="addressListArray[0].addressTypeString" id="addressListArray[0].addressTypeString" class="form-control" required >
<option value="Home" selected="selected">Home</option>
<option value="Office">Office</option>
<option value="Contact">Contact</option>
<option value="Other">Other</option>
<option value="Billing">Billing</option>
<option value="Purchaser">Purchaser</option>
<option value="Foreign">Foreign</option>
<option value="Agency">Agency</option>
<option value="Summer">Summer</option>
<option value="School">School</option>
<option value="Campus">Campus</option>
<option value="Temporary">Temporary</option>
<option value="Shipping">Shipping</option>
<option value="Local">Local</option>
<option value="Permanent">Permanent</option></select>
</div>
</div>
Now how would I make the Office value the default only using javascript?

Simply use that one line of javascript below to change the value on runtime
document.getElementById('addressListArray[0].addressTypeString').value = 'Office';
<div class="col-md-6">
<div id="addressTypeWrapper" class="form-group">
<label for="addressListArray[0].addressTypeString">Type</label>
<select name="addressListArray[0].addressTypeString" id="addressListArray[0].addressTypeString" class="form-control" required >
<option value="Home" selected="selected">Home</option>
<option value="Office">Office</option>
<option value="Contact">Contact</option>
<option value="Other">Other</option>
<option value="Billing">Billing</option>
<option value="Purchaser">Purchaser</option>
<option value="Foreign">Foreign</option>
<option value="Agency">Agency</option>
<option value="Summer">Summer</option>
<option value="School">School</option>
<option value="Campus">Campus</option>
<option value="Temporary">Temporary</option>
<option value="Shipping">Shipping</option>
<option value="Local">Local</option>
<option value="Permanent">Permanent</option></select>
</div>
</div>

!function(){var e=document.getElementsByTagName("option");e[0].selected=!1,e[1].selected=!0}();
<div class="col-md-6">
<div id="addressTypeWrapper" class="form-group">
<label for="addressListArray[0].addressTypeString">Type</label>
<select name="addressListArray[0].addressTypeString" id="addressListArray[0].addressTypeString" class="form-control" required>
<option value="Home" selected="selected">Home</option>
<option value="Office">Office</option>
<option value="Contact">Contact</option>
<option value="Other">Other</option>
<option value="Billing">Billing</option>
<option value="Purchaser">Purchaser</option>
<option value="Foreign">Foreign</option>
<option value="Agency">Agency</option>
<option value="Summer">Summer</option>
<option value="School">School</option>
<option value="Campus">Campus</option>
<option value="Temporary">Temporary</option>
<option value="Shipping">Shipping</option>
<option value="Local">Local</option>
<option value="Permanent">Permanent</option>
</select>
</div>
</div>

Select the dropdown and use .val(). If its a dynamic id then add another attribute like data-dropdown="list" as I have done below
$("select[data-dropdown='list']").val('Office');

Develop Reference

JavaScript is the programming language of the Web.

Difference between two input value without button - javascript

Related

Create array from all selected options of particular class

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

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

How to Link to a Selected Drop-Down Item to Open a Web Page

Making a different value the default using javascript

Categories

Resources