Develop Reference

Open JavaScipt URL in new window

Wondering if anyone can help. I've created some code that depending on what option the user picks, they get taken to a specific URL. I have it all working fine, however, the URL won't open in a new window.
Any help would be brilliant.
This is the code:
$(document).ready(function() {
var selectVal1 = $("#selectBox1").val();
var selectVal2 = $("#selectBox2").val();
$("#selectBox1").change(function() {
selectVal1 = $("#selectBox1 option:selected").val();
});
$("#selectBox2").change(function() {
selectVal2 = $("#selectBox2 option:selected").val();
});
$("#click").click(function() {
if(selectVal1 == 'A' && selectVal2 == 'A'){
location = "https://www.google.com/animalmanagement-25thaug", '_blank';}
else if(selectVal1 == 'A' && selectVal2 == 'B'){
location = "https://www.google.com/animalmanagement-26thaug", '_blank';}
if(selectVal1 == 'B' && selectVal2 == 'A'){
location = "https://www.google.com/artdesign-25thaug", '_blank';}
else if(selectVal1 == 'B' && selectVal2 == 'B'){
location = "https://www.google.com/artdesign-26thaug", '_blank';}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.sthelens.ac.uk/book-slot/book-enrolment.js"></script>
<h3>Book Your Enrolment Slot</h3>
<select id="selectBox1">
<option value="">Select which subject you would like to study?</option>
<option value="A">Animal Management</option>
<option value="B">Art & Design</option>
</select>
<select id="selectBox2">
<option value="">Select what date you would like to come in and enrol</option>
<option value="A">Tuesday 25th August 2020</option>
<option value="B">Wednesday 26th August 2020</option>
</select>
<input id="click" type="button" value="Book Now" class="button">

window.open might help
window.open(<url>);
Or
window.open(<url>, "_blank"); // opens in new tab

You can use window.open(your url) ..
Or you can refer this doc.
https://developer.mozilla.org/en-US/docs/Web/API/Window/open

You can use code below
$("#click").click(function() {
if(selectVal1 == 'A' && selectVal2 == 'A'){
var location = "https://www.google.com/animalmanagement-25thaug";
} else if (selectVal1 == 'A' && selectVal2 == 'B'){
var location = "https://www.google.com/animalmanagement-26thaug";
} else if (selectVal1 == 'B' && selectVal2 == 'A'){
var location = "https://www.google.com/artdesign-25thaug";
} else if (selectVal1 == 'B' && selectVal2 == 'B'){
var location = "https://www.google.com/artdesign-26thaug";
}
var wind = window.open(location, '_blank');
//wind.focus(); // If required
});

DropDown and TextBox logic

I'm coding a Simple Dependable Logic
I have a DropDown list called "frequencyList"
which contains values like -
"Hourly", "Daily", "Weekly", "Monthly"
I have Textbox called "frequencyCount"
which must accept only Digits.
Now the Logic I need is -
If user selects "Hourly" option from the DropDown
The TextBox must only accept integer values between 1-23 else throw error,
If user selects "Daily", TextBox to accept only between 1-30, and so on
So here is my flawed logic so far, please correct me -
$("#frequencyCount").keypress(function(e)
{
//if the letter is not digit then display error and don't type anything
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57))
{
console.log("Invalid Input, It's not Digits");
}
else
{
//Input is Digits for sure now
if (frequecyList == "Daily")
{
if (frequencyCount >= 1 && frequencyCount <= 30)
{
console.log("Valid Daily input");
}
else
{
console.log("Invalid frequency");
}
}
}
});

Try this, it will help you
function validate() {
var freq = $("#frequency").val();
var num = $("#fvalue").val();
var error = 0;
if(freq==1 && (num <1 || num >23) ) {
error = 1;
}
else if(freq==2 && (num <1 || num > 30) ) {
error = 1;
}
if(error==1)
{
alert("error");
$("#fvalue").val('');
$("#fvalue").focus();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="frequency">
<option value="1">Hourly</option>
<option value="2">Daily</option>
<option value="3">Weekly</option>
<option value="4">Monthly</option>
</select>
<input type="number" id="fvalue" onblur="validate();" />

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.

how to disable text field and combo box in javascript

I'm having a problem in disabling textbox and combo box by using another combo box here is my javascript so far:
category.onchange = function () {
var val = this.options[this.selectedIndex].value;
document.getElementById("bos").disabled = (val == "Military","Civilian") ? true : false;
document.getElementById("afpsn").disabled = (val == "Dependent","Civilian") ? true : false;
};
and here's my html:
<select name="category" size="1" id="category">
<option selected="selected">Choose...</option>
<option value="Civilian">Civilian</option>
<option value="Military">Military</option>
<option value="Dependent">Dependent</option>
</select>
<select name="bos" id="bos" >
<option value="">Branch of Service</option>
<option value="PAF">PAF</option>
<option value="PA">PA</option>
<option value="PN">PN</option>
<option value="TAS">TAS</option>
</select>
<input id = "afpsn" name="afpsn" type="text" id="afpsn" size="38" placeholder="AFPSN" />
it should be whenever I select dependent or civilian the other combo box and text field will be disabled and will be enable when I select military. please help!

This fiddle will be help you. you can edit logic , too.
category.onchange = function () {
var val = this.options[this.selectedIndex].value;
// alert(val);
document.getElementById("bos").disabled = (val === "Military") ? false : true;
document.getElementById("afpsn").disabled = (val === "Military") ? false : true;
document.getElementById("afpsn").disabled = (val === "Dependent" || val === "Civilian" ) ? true : false;
document.getElementById("bos").disabled = (val === "Dependent" || val === "Civilian" ) ? true : false;
};

I dont think there is anything like (val == "Military","Civilian")
You can try this Fiddle

Try below code:
/*Function to check if value is in an array*/
function isInArray(value, array) {
return array.indexOf(value) > -1;
}
/*******************************************/
var s=document.getElementById("elementId");
s.disabled = isInArray(s.value,["Military","Civilian"]); //Function automatically returns "true" or "false" depending on value
Demo Fiddle

Try this instead:
Your condition (comparison with strings) is incorrect.
example
category.onchange = function () {
var val = this.options[this.selectedIndex].value;
document.getElementById("bos").disabled = (val === "Military" || val === "Civilian") ? true : false;
document.getElementById("afpsn").disabled = (val === "Dependent" || val === "Civilian") ? true : false;
};
EDIT:
To attach the event on page load (assuming you are not using jQuery), one way is to attach it on pageload like:
function init() {
category.onchange = function () {
var val = this.options[this.selectedIndex].value;
document.getElementById("bos").disabled = (val === "Military" || val === "Civilian") ? true : false;
document.getElementById("afpsn").disabled = (val === "Dependent" || val === "Civilian") ? true : false;
};
}
and something like this on your <body>
<body onload="init();">
...
</body>
The reason why the example worked is that jsfiddle.net loads the functions in the js box on load by default. But in your case, you have to do that manually.

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();
}
})