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
});
Related
I am trying to have 2 selection boxes, 1 for print type, and 1 for size. For example I want when someone clicks the "LUSTRE" option in the first selection to have the other selection box only display "17x25.5", "13x19", and "10x15" and so on for the different print types. The problem I'm having is that when my code that matches the two outputs lets say "LUSTRE" & "10X15" to display a price of "$100". This works fine BUT, when you have already selected from both boxes THEN change one of the selections the price doesn't remove when lets say the boxes are now "SATIN" & "SELECT SIZE" then the price is still $100 and when added to cart it takes "SATIN", "SELECT SIZE" & "$100". Is there a way to remove the price when the boxes are changed after a price has been set already?
below is code for all sections that I currently have shortened to eliminate repetitive code, This is quite long but all these sections are essential to add to show what I'm trying to accomplish
//html for the question
<div class="shop-item">
<span class="shop-item-title">19</span>
<img id="cars1" class="shop-item-image shop-item-image1" src="../IMG/ESPSTORE41.jpg">
<span class="shop-item-src1">../IMG/ESPSTORE41.jpg</span>
<div class="shop-item-details">
<select name="menu1" id="print-type1">
<option id="print-type-button1" value="24x36,20x30,17x25.5,16x24,13x19,12x18,10x15">SELECT PRINT TYPE</option>
<option id="satin-button1" value="24x36,20x30,16x24,12x18">SATIN</option>
<option id="lustre-button1" value="17x25.5,13x19,10x15">LUSTRE</option>
<option id="canvas-button1" value="24x36">CANVAS</option>
<option id="aluminum-button1" value="24x36,20x30">ALUMINUM PHOTO PANEL</option>
</select>
<select name="menu2" id="size-type1">
<option id="size-button1" value="">SELECT SIZE</option>
<option id="24x36-button1" value="24x36">24x36</option>
<option id="20x30-button1" value="20x30">20x30</option>
<option id="17x25.5-button1" value="17x25.5">17x25.5</option>
<option id="16x24-button1" value="16x24">16x24</option>
<option id="13x19-button1" value="13x19">13x19</option>
<option id="12x18-button1" value="12x18">12x18</option>
<option id="10x15-button1" value="10x15">10x15</option>
</select>
<span id="shop-item-price1" class="shop-item-price shop-item-price1"></span>
<button id="shop-item-button1" class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
</div>
</div>
//checking print to size to display price
var typeElement1 = document.getElementById('print-type1')
var checkTypeText1 = typeElement1.options[typeElement1.selectedIndex].text
typeElement1.addEventListener("change", (e) => {
var typeText1 = typeElement1.options[typeElement1.selectedIndex].text
var sizeElement1 = document.getElementById('size-type1')
var checkSizeText1 = sizeElement1.options[sizeElement1.selectedIndex].text
sizeElement1.addEventListener("change", (e) => {
var sizeText1 = sizeElement1.options[sizeElement1.selectedIndex].text
if(sizeText1 == 'SELECT SIZE') {
document.getElementById('shop-item-price1').innerText = ''
}
if(typeText1 == 'SATIN' && sizeText1 == '24x36') {
document.getElementById('shop-item-price1').innerText = '$200'
}
else if(typeText1 == 'SATIN' && sizeText1 == '20x30') {
document.getElementById('shop-item-price1').innerText = '$170'
}
else if(typeText1 == 'SATIN' && sizeText1 == '16x24') {
document.getElementById('shop-item-price1').innerText = '$150'
}
})})
////checking size to print to display price
var sizeElement1 = document.getElementById('size-type1')
var checkSizeText1 = sizeElement1.options[sizeElement1.selectedIndex].text
sizeElement1.addEventListener("change", (e) => {
var sizeText1 = sizeElement1.options[sizeElement1.selectedIndex].text
var typeElement1 = document.getElementById('print-type1')
var checkTypeText1 = typeElement1.options[typeElement1.selectedIndex].text
typeElement1.addEventListener("change", (e) => {
var typeText1 = typeElement1.options[typeElement1.selectedIndex].text
if(typeText1 == 'SELECT PRINT TYPE') {
document.getElementById('shop-item-price1').innerText = ''
}
if(typeText1 == 'SATIN' && sizeText1 == '24x36') {
document.getElementById('shop-item-price1').innerText = '$200'
}
else if(typeText1 == 'SATIN' && sizeText1 == '20x30') {
document.getElementById('shop-item-price1').innerText = '$170'
}
else if(typeText1 == 'SATIN' && sizeText1 == '16x24') {
document.getElementById('shop-item-price1').innerText = '$150'
}
})})
//selecting which display options to show or hide
const sizeType1 = document.getElementById("size-type1");
const sizeType1Options = [...sizeType1.children];
document.querySelector("#print-type1").addEventListener("change", (e) => {
sizeType1.innerHTML = sizeType1Options
.filter((o) => e.target.value.includes(o.value))
.map((o) => o.outerHTML)
.join("");
});
//grabbing selected info from boxes to move to cart page
function addToCartClicked(event) {
var button = event.target
var shopItem = button.parentElement.parentElement
var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src
if(price == '') {
alert('Please select Size and Type')
return;
}
if (title == "19") {
addItemToCart1()
}
else if (title == "20") {
addItemToCart2()
}
}
//adding info to localStorage
function addItemToCart1() {
var cartRowSrc1 = `${document.getElementsByClassName('shop-item-src1')[0].innerText}`
var cartRowPrice1 = `${document.getElementsByClassName('shop-item-price1')[0].innerText}`
localStorage.setItem("naturesrc1", cartRowSrc1)
localStorage.setItem("natureprice1", cartRowPrice1)
var typeElement1 = document.getElementById('print-type1')
var checkTypeText1 = typeElement1.options[typeElement1.selectedIndex].text
var typeText1 = typeElement1.options[typeElement1.selectedIndex].text
var sizeElement1 = document.getElementById('size-type1')
var checkSizeText1 = sizeElement1.options[sizeElement1.selectedIndex].text
var sizeText1 = sizeElement1.options[sizeElement1.selectedIndex].text
var cartRowTitle1 = typeText1 + sizeText1
localStorage.setItem("naturetitle1", cartRowTitle1)
alert("Added To Cart")
}
You need to add an Else condition to your change event listeners that will handle clearing the text if none of the previous conditions are met. For example:
var sizeText1 = sizeElement1.options[sizeElement1.selectedIndex].text
if(sizeText1 == 'SELECT SIZE') {
document.getElementById('shop-item-price1').innerText = ''
}
if(typeText1 == 'SATIN' && sizeText1 == '24x36') {
document.getElementById('shop-item-price1').innerText = '$200'
}
else if(typeText1 == 'SATIN' && sizeText1 == '20x30') {
document.getElementById('shop-item-price1').innerText = '$170'
}
else if(typeText1 == 'SATIN' && sizeText1 == '16x24') {
document.getElementById('shop-item-price1').innerText = '$150'
}
else {
// if no type and price matches are found, reset our price text
document.getElementById('shop-item-price1').innerText = ''
}
It looks like you tried to do that with if sizeText1 === 'SELECT SIZE', but if nothing is selected I don't believe it has a text value?
I'm trying to validate my form using jquery before submission. The user needs to fill up the Task accordingly, they cannot submit the form with fill-up Task 2 and missing Task 1. And also the Task cannot be duplicated with other Task. I'm wondering if there any better way to compare all of this, in a simple method.
The Javascript currently I'm doing. Still not complete yet because looking for better ways.
$(function() {
$( "#create_model" ).submit(function( event ) {
if(validate_task()){
alert("Check your task.");
event.preventDefault();
} else {
$("#create_model").submit();
}
});
});
function validate_task() {
if ($('#CatTask2ID').val() !== "" && $('#CatTask2ID').val() === "") {
return "Task 1 is empty"; //return FALSE;
} else if ($('#CatTask3ID').val() !== "" && $('#CatTask1ID').val() === "" || $('#CatTask2ID').val() === "") {
return "Task 1 or 2 is empty"; //return FALSE;
} else if ($('#CatTask4ID').val() !== "" && $('#CatTask1ID').val() === "" || $('#CatTask2ID').val() === "" || $('#CatTask3ID').val() === "") {
return "Task 1, 2 or 3 is empty"; //return FALSE;
} else if ($('#CatTask5ID').val() !== "" && $('#CatTask1ID').val() === "" || $('#CatTask2ID').val() === "" || $('#CatTask3ID').val() === "" || $('#CatTask4ID').val() === "") {
return "Task 1, 2 or 3 is empty"; //return FALSE;
} else if ($('#CatTask5ID').val() !== "" && $('#CatTask1ID').val() === "" || $('#CatTask2ID').val() === "" || $('#CatTask3ID').val() === "" || $('#CatTask4ID').val() === "") {
return "Task 1, 2 or 3 is empty"; //return FALSE;
} else if ($('#CatTask1ID').val() === $('#CatTask2ID').val() || $('#CatTask1ID').val() === $('#CatTask3ID').val() .......and others........... ) {
return "Duplicates"; //return FALSE;
}
}
First use classes instead of IDs so you can get a collection of all selects easily, then map each select to its value to get an array of values.
Find the index of the first value which is the empty string. If any values after that one are populated, return an error saying that the index of that empty string is empty.
Otherwise, take the populated values (from indices 0 to the index of the first empty string), and check if the size of a Set of those values is equal to the length of the array:
function validate_task() {
const taskValues = [...$('.tasks')].map(task => task.value);
const firstEmptyIndex = taskValues.indexOf('');
if (firstEmptyIndex > 0 && taskValues.slice(firstEmptyIndex).some(val => val)) {
return `Task ${firstEmptyIndex + 1} is empty`;
}
const populatedTasks = taskValues.slice(0, firstEmptyIndex);
if (populatedTasks.length !== new Set(populatedTasks).size) {
return 'Duplicates';
}
// OK
}
Live demo:
document.addEventListener('change', () => console.log(validateTask()));
function validateTask() {
const taskValues = [...$('.tasks')].map(task => task.value);
const firstEmptyIndex = taskValues.indexOf('');
if (firstEmptyIndex !== -1 && taskValues.slice(firstEmptyIndex).some(val => val)) {
return `Task ${firstEmptyIndex + 1} is empty`;
}
const populatedTasks = taskValues.slice(0, firstEmptyIndex);
if (populatedTasks.length !== new Set(populatedTasks).size) {
return 'Duplicates';
}
return 'OK'
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="tasks">
<option></option>
<option>foo</option>
<option>bar</option>
<option>baz</option>
<option>buzz</option>
</select>
<select class="tasks">
<option></option>
<option>foo</option>
<option>bar</option>
<option>baz</option>
<option>buzz</option>
</select>
<select class="tasks">
<option></option>
<option>foo</option>
<option>bar</option>
<option>baz</option>
<option>buzz</option>
</select>
<select class="tasks">
<option></option>
<option>foo</option>
<option>bar</option>
<option>baz</option>
<option>buzz</option>
</select>
<select class="tasks">
<option></option>
<option>foo</option>
<option>bar</option>
<option>baz</option>
<option>buzz</option>
</select>
function validate_task() {
var error_msg = [];
if($('#CatTask1ID').val() === ""){
error_msg.push('1');
}
if($('#CatTask2ID').val() === ""){
error_msg.push('2');
}
if($('#CatTask3ID').val() === ""){
error_msg.push('3');
}
//......
return error_msg;
}
function validate_task_msg() {
var arr = validate_task()
if(arr&& arr.length<=0){
return true;
}else if(arr.length == 10){//more
return "Duplicates";
}else {
var msg = arr.join(',');
return "Task "+ msg + " is empty"
}
}
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.
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.
I have a dropdown list ,every option of the list have a year and a month .
I want to sort a select options according to year or month or both that are .
so I can display options sorted by year or month or year and month together or show everything .
I have the following event :
$('#years,#months').bind('change', function () {
y = $('#years').val();
m = $('#months').val();
$('#files > option').each(function () {
$(this).show();
});
$('#files > option').each(function () {
string = $(this).text();
//first situation
if (y == 'All' && m == 'All')
$(this).show();
// second situation
else if ((y == 'All') && string.indexOf(m) == -1)
$(this).hide();
//third situation
else if ( string.indexOf(y) == -1 && m == 'All')
$(this).hide();
// fourth situation
else if (string.indexOf(y) == -1 || string.indexOf(m) == -1)
$(this).hide();
});
});
with html code :
<select id='years'>
<option value='All'>All</option>
<option value='2013'>2013</option>
<option value='2012'>2012</option>
</select>
<select id='months'>
<option value='All'>All</option>
<option value='Feb'>Feb</option>
<option value='Jan'>Jan</option>
</select>
<br/>
<br/>
<select id='files' siz='10'>
<option value='0'>sdgsdfsadfsd1-2013-Feb-1212</option>
<option value='1'>fsadfadsfadsfadsf2-2012-Feb-123123</option>
<option value='2'>fsadfadsfadsfadsf3-2012-Jan-123123</option>
<option value='3'>fsadfadsfadsfadsf4-2013-Jan-123123</option>
<option value='4'>fsadfadsfadsfadsf5-2012-Feb-123123</option>
<option value='5'>fsadfadsfadsfadsf6-2013-Feb-123123</option>
<option value='6'>fsadfadsfadsfadsf7-2013-Feb-123123</option>
<option value='7'>fsadfadsfadsfadsf8-2013-Jan-123123</option>
<option value='8'>fsadfadsfadsfadsf9-2012-Jan-123123</option>
<option value='9'>fsadfadsfadsfadsf10-2013-Feb-123123</option>
<option value='10'>fsadfadsfadsfadsf11-2012-Feb-123123</option>
</select>
second and third situations are not working !!
it deals with the two conditions (true && false) , (false && true ) as they are same values ! I have no idea why !
here's a Demo
Your logic is wrong; the last condition is being evaluated when it shouldn't be. (For instance: if y == 'All' and also string.indexOf(m) >= 0). Try this instead:
$('#files > option').each(function () {
var string = $(this).text();
var show;
if (y == 'All') {
show = m == 'All' || string.indexOf(m) >= 0;
} else if (m == 'All') {
show = string.indexOf(y) >= 0;
} else {
show = string.indexOf(y) >= 0 && string.indexOf(m) >= 0;
}
if (show) $(this).show();
else $(this).hide();
});