Develop Reference

Else If not working in Javascript Conversion app

So I'm creating a hybrid mobile JS app and everything is working fine so far until this last else if statement. I'm trying to convert inches to yard. I have the right code down, but its still not working. I only get the same number I type back in the results. What am I doing wrong? I am using Jquery and Jquery Mobile in the app as well.
Heres the HTML bit:
<form>
<div class="ui-field-contain">
<select name="select-native-3" id="distance" data-iconpos="left">
<option value="inch">Inch</option>
<option value="foot">Foot</option>
<option value="yard">Yard</option>
<option value="mile">Mile</option>
<option value="mm">Millimeter</option>
<option value="m">Meter</option>
<option value="km">Kilometer</option>
</select>
</div>
<h4>Convert To:</h4>
<div class="ui-field-contain">
<select name="select-native-3" id="distanceToo" data-iconpos="left">
<option value="1">Inches</option>
<option value="2">Feet</option>
<option value="3">Yards</option>
<option value="4">Miles</option>
<option value="5">Millimeters</option>
<option value="6">Meters</option>
<option value="7">Kilometers</option>
</select>
</div>
</form>
Now the JavaScript part:
$("#calcD").on("tap", function() {
var dist = document.getElementById("inpD").value;
var answerAreaD = document.getElementById("ansD");
var select = document.getElementById("distance");
var selectToo = document.getElementById("distanceToo");
if(select.value == "inch" && selectToo.value == "1") {
answerAreaD.value = dist;
}
else if(select.value == "foot" && selectToo.value == "2") {
answerAreaD.value = dist;
}
else if(select.value = "yard" && selectToo.value == "3") {
answerAreaD.value = dist;
}
else if(select.value = "mile" && selectToo.value == "4") {
answerAreaD.value = dist;
}
else if(select.value == "mm" && selectToo.value == "5") {
answerAreaD.value = dist;
}
else if(select.value == "m" && selectToo.value == "6") {
answerAreaD.value = dist;
}
else if(select.value == "km" && selectToo.value == "7") {
answerAreaD.value = dist;
}
else if(select.value == "inch" && selectToo.value == "2") {
var distInchFeet = dist / 12;
answerAreaD.value = distInchFeet;
}
else if(select.value == "inch" && selectToo.value == "3") {
var distInchYard = dist * 0.0277777777778;
answerAreaD.value = distInchYard;
}
});

In all of your else if statements you need to have the comparison operator == or ===. For mile and yard you have =, which is assigning the value rather than comparing it.

Changing textfield currency type

<select data-placeholder="Please select a payment method.." style="width:50%;" class="chosen" onchange="currencyChange(this.value)">
<option value=""></option>
<optgroup label="Cash">
<option value="Paypal">Paypal</option>
<option value="Bitcoin">Bitcoin</option>
<option value="Western Union">Western Union</option>
<option value="Delivery">Delivery</option>
</optgroup>
<optgroup label="Ingame Currency">
<option value="RS3 GP">RS3 GP</option>
<option value="OSRS GP">OSRS GP</option>
</optgroup>
</select>
<script type="text/javascript">
var sign = "null";
var placement = "null";
float budget = "null";
function currencyChange(data){
if (data === 'Paypal') {
sign = "$";
placement = "before";
}
if (data === 'Bitcoin') {
sign = "$";
placement = "before";
}
if (data === 'Western Union') {
sign = "$";
placement = "before";
}
if (data === 'Delivery') {
sign = "$";
placement = "before";
}
if (data === 'RS3 GP') {
sign = "M/GP";
placement = "after";
}
if (data === 'OSRS GP') {
sign = "M/GP";
placement = "after";
}
if (placement === 'before') {
document.getElementById("budget").value = sign + document.getElementById("budget").value;
}
if (placement === 'after') {
document.getElementById("budget").value = document.getElementById("budget").value + sign;
}
}
</script>
I am trying to change the currency type of another textfield id="budget" to add a currency symbol dependent on the choice of payment method..?
But I get no such action when selecting the payment type.

remove this, Its works
float budget = "null";
And,
add below select
<input type="text" id="budget">
Edited
if (placement === 'before') {
toreplaceaft=document.getElementById("budget").value;
toreplacebef=toreplaceaft.replace("$","");
toreplace=toreplacebef.replace("M/GP","");
document.getElementById("budget").value = sign + toreplace.replace("$","");
}
if (placement === 'after') {
toreplaceaft=document.getElementById("budget").value;
toreplacebef=toreplaceaft.replace("$","");
toreplace=toreplacebef.replace("M/GP","");
document.getElementById("budget").value = toreplace+ sign;
}

Try this fiddle it will not accepting double sign.
http://jsfiddle.net/pee7d6qr/1/
if (placement === 'before') {
if(document.getElementById("budget").value.indexOf("$") == -1){
document.getElementById("budget").value = sign + document.getElementById("budget").value;
}
else {
document.getElementById("budget").value = document.getElementById("budget").value;
}
}
if (placement === 'after') {
if(document.getElementById("budget").value.indexOf("M/GP") == -1){
document.getElementById("budget").value = document.getElementById("budget").value + sign;
}
else {
document.getElementById("budget").value = document.getElementById("budget").value;
}
}

Remove the float variable in javascript
Budget Input element is missing
<input type="text" name="budget" id="budget" value=>
Use the below code
if (placement === 'before') {
document.getElementById("budget").value = sign + document.getElementById("budget").value.replace(/[^0-9.]/g,'');
}
if (placement === 'after') {
document.getElementById("budget").value = document.getElementById("budget").value.replace(/[^0-9.]/g,'') + sign;
}

Now you need to strip those "$,M/GP" stuff from the string
With little help from stackoverflow:
value = document.getElementById("budget").value;
value = value.replace(/\D/g,''); //strip non-numeric characters from string
Then
if (placement === 'before') {
document.getElementById("budget").value = sign +" "+ value;
}
if (placement === 'after') {
document.getElementById("budget").value = value +" "+ sign;
}
jsFiddle

Updating HTML upon drop down choice and checkbox selection

I Have a drop down list accompanied by some javascript & jquery which displays some text and a check box depending on the choice. If the checkbox is ticked then the HTML displayed will change again. Text & checkbox are being displayed however when checking the tick box html is then not changing.
HTML:
<div class="plan">
<div class="plan-details1"></div>
<div class="plan-name">
<select id="myselect">
<option value="0">Please Select Your Mobile Plan</option>
<option value="1">Package 1</option>
<option value="2">Package 2</option>
<option value="3">Package 3</option>
<option value="4">Package 4</option>
<option value="5">Package 5</option>
<option value="6">Package 6</option>
</select>
</div>
<div class="plan-price"></div>
</div>
JS
$(function () {
$('#myselect').change(function () {
var val = $(this).val();
if (val == '1') {
$('.plan-details1').html('This Is Working 1<br/>');
$('.plan-price').html('<div id="price-m">Price: €18</div><input type="checkbox" id="handset-m" value="Car" onClick="validate()"> Handset');
}
if (val == '2') {
$('.plan-details1').html('This Is Working 2<br/>');
$('.plan-price').html('<div id="price-l">Price: €25</div><input type="checkbox" id="handset-l" value="Car" onClick="validate()"> Handset');
}
if (val == '3') {
$('.plan-details1').html('This Is Working 3<br/>');
}
if (val == '4') {
$('.plan-details1').html('This Is Working 4<br/>');
}
if (val == '5') {
$('.plan-details1').html('This Is Working 5<br/>');
}
if (val == '6') {
$('.plan-details').html('This Is Working 6<br/>');
}
});
});
function validate() {
if (document.getElementById('handset-m').checked) {
document.getElementById('price-m').innerHTML = 'Price: €20';
} else {
document.getElementById('price-m').innerHTML = 'Price: €18';
}
if (document.getElementById('handset-l').checked) {
document.getElementById('price-l').innerHTML = 'Price: €35';
} else {
document.getElementById('price-l').innerHTML = 'Price: €25';
}
}
A fiddle can be found here: http://jsfiddle.net/5Y4b6/
Many thanks for your help!

This is not working because you insert the checkboxes as HTML markup. The onclick handlers is never attached to a real function. Change your code to this :
if (val == '1') {
$('.plan-details1').html('This Is Working 1<br/>');
$('.plan-price').html('<div id="price-m">Price: €18</div><input type="checkbox" id="handset-m" value="Car"> Handset');
document.getElementById("handset-m").onclick = validate;
}
if (val == '2') {
$('.plan-details1').html('This Is Working 2<br/>');
$('.plan-price').html('<div id="price-l">Price: €25</div><input type="checkbox" id="handset-l" value="Car"> Handset');
document.getElementById("handset-l").onclick = validate;
}
Now thew checkboxes is actually attached to the validate() function. BTW, change the validate function to check if the checkboxes exists / is inserted to avoid "cannot set checked of null" errors :
function validate() {
if (document.getElementById('handset-m')) {
if (document.getElementById('handset-m').checked) {
document.getElementById('price-m').innerHTML = 'Price: €20';
} else {
document.getElementById('price-m').innerHTML = 'Price: €18';
}
}
if (document.getElementById('handset-l')) {
if (document.getElementById('handset-l').checked) {
document.getElementById('price-l').innerHTML = 'Price: €35';
} else {
document.getElementById('price-l').innerHTML = 'Price: €25';
}
}
}
forked fiddle -> http://jsfiddle.net/8upk3/

Edit:
validate is actually on the global scope, but the problem is with the validate function itself:
here is a fixed version:
function validate() {
if(document.getElementById('handset-m')) {
if (document.getElementById('handset-m').checked) {
document.getElementById('price-m').innerHTML = 'Price: €20';
} else {
document.getElementById('price-m').innerHTML = 'Price: €18';
}
}
if (document.getElementById('handset-l')) {
if (document.getElementById('handset-l').checked) {
document.getElementById('price-l').innerHTML = 'Price: €35';
} else {
document.getElementById('price-l').innerHTML = 'Price: €25';
}
}
}

Scope problem.
You can either try to put listeners on your checkboxes, or declare your function in your document.ready
validate = function() {
if (document.getElementById('handset-m').checked) {
document.getElementById('price-m').innerHTML = 'Price: €20';
} else {
document.getElementById('price-m').innerHTML = 'Price: €18';
}
if (document.getElementById('handset-l').checked) {
document.getElementById('price-l').innerHTML = 'Price: €35';
} else {
document.getElementById('price-l').innerHTML = 'Price: €25';
}
};
I updated your fiddle here
Note that your function is not really efficient, you should test the presence of your elements ('handset-m', ''handset-l'...) before testing if they are checked.
EDIT
Here's an other way to do it, with jQuery listeners :
$('#plan').on('click','#handset-m, #handset-l', function(){console.log('test');
$this = $(this);
id = this.id;
var lbl = 'Price: €';
if(true === $this.prop('checked')){
lbl += ('handset-m' === id) ? '20' : '35';
}
else {
lbl += ('handset-m' === id) ? '18' : '25';
}
$this.prev('div').html(lbl);
});
fiddle here

get select values inside div ,then show children div of main div

HTML:
<div class="question>
<select name="status">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div class="subquestion">
<input type="file name="file>
</div>
</div>
JS
$(document).ready(function () {
$(".question").each(function () {
$(".subquestion").hide();
$('select[name=status]').click(function () {
if (this.value == "1" || this.value == "2" || this.value == "3") {
// show $(this) div 'subquestion'
}
else {
$(".subquestion").hide();
}
})
})
});
I want to get select values with this select values and then if values are 1 || 2 || 3 then use this div subquestion show();
but it must be outside of if statement beacause there is selected ('select') tag and div subquestion is outside that tag.

If you need to show the subquestion related to that question use this:
$(document).ready(function () {
$(".question").each(function () {
$(".subquestion").hide();
$('select[name=status]').change(function () {
if (this.value == "1" || this.value == "2" || this.value == "3") {
$(this).next('.subquestion').show();
}
else {
$(this).next('.subquestion').hide();
}
})
})
});
Check this Demo http://jsfiddle.net/6ZxDJ/

change this:
$('select[name=status]').click(function () {
if (this.value == "1" || this.value == "2" || this.value == "3") {
// show $(this) div 'subquestion'
}
else {
$(".subquestion").hide();
}
})
to this
$('select[name="status"]').change(function () {
if ($(this).val() == "1" || $(this).val() == "2" || $(this).val() == "3") {
$(this).closest('.question').find(".subquestion").show();
}
else {
$(this).closest('.question').find(".subquestion").hide();
}
})

Removing input value on focus when the value was dynamically set before

With the code below, the value of .srch-inpt is changing according to the selected option's class.
I need to remove the value of the .srch-inpt on focus and have it back on blur.
The code I've written does not work properly.
//Changing search value on select-box option change
$(function(){
$('.srchopts').change(function () {
var optclass = "";
$("select option:selected").each(function () {
optclass += $(this).attr('class');
});
if (optclass == 'bookopt' || 'thesisopt' ) {
$('.srch-inpt').val('Title/ Author/ Keyword/ ISBN');
}
if (optclass == 'articleopt' ) {
$('.srch-inpt').val('Title/ Author/ Keyword/ Doi');
}
if (optclass == 'journalopt' ) {
$('.srch-inpt').val('Title/ ISSN');
}
});
$('.srch-inpt').focus(function() {
if ($(this).val() == $(this).attr('defaultValue'))
$(this).val('');
}).blur(function() {
if ($(this).val() == '')
$(this).val( $(this).attr('defaultValue') );
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select class="srchopts">
<option class="bookopt">Book Option</option>
<option class="articleopt">Article Option</option>
<option class="thesisopt">Thesis Option</option>
<option class="journalopt">Journal Option</option>
</select>
<input type="text" name="" class="srch-inpt" value="Title / Author / Keywords / ISBN" defaultValue="" />
JSFiddle Demo

$('.srch-inpt').data('defaultValue','My default value').focus(function () {
if (this.value === $(this).data('defaultValue')) this.value = "";
}).blur(function () {
if (!this.value.length) this.value = $(this).data('defaultValue');
}).blur();
DEMO

I got the answer with the point A. Wolff mentioned.
As we don't have "DefaultValue" attribute in new jQuery, I have to create it by myself, and update it's value each time I change .srch-inpt value.
So, this is my new jQuery piece of code :
//Changing search value on select-box option change
$(function(){
$('.srchopts').change(function () {
var optclass = "";
$("select option:selected").each(function () {
optclass += $(this).attr('class');
});
if (optclass == 'bookopt' || 'thesisopt' ) {
$('.srch-inpt').val('Title/ Author/ Keyword/ ISBN');
}
if (optclass == 'articleopt' ) {
$('.srch-inpt').val('Title/ Author/ Keyword/ Doi');
}
if (optclass == 'journalopt' ) {
$('.srch-inpt').val('Title/ ISSN');
}
$('.srch-inpt').attr('defaultValue', $('.srch-inpt').val());
});
$('.srch-inpt').focus(function() {
if ($(this).attr('defaultValue') == '')
$(this).attr('defaultValue', $(this).get(0).defaultValue);
if ($(this).val() == $(this).attr('defaultValue'))
$(this).val('');
}).blur(function() {
if ($(this).val() == '')
$(this).val( $(this).attr('defaultValue') );
});
});
DEMO