We Keep Coding

Open Single Button To Multiple Pages

How can I open different pages from a single button by using a pair of two different dropdown menus?
<table style="font-style:nunito; background-color:#FFEBF6;border:none;">
<tr>
<td style="font-style:nunito; background-color:#FFEBF6;border:none;">
<label style="font-size:20px; padding-bottom:10px;">My credit score is</label>
<select id="selectBox1">
<option value="excellent">Excellent (720 - 850) </option>
<option value="good">Good (690 - 719)</option>
<option value="average">Average (630 - 689)</option>
<option value="poor">Poor (350 - 629)</option>
</select>
</td>
<td style="font-style:nunito; background-color:#FFEBF6;border:none;">
<label style="font-size:20px; padding-bottom:10px;">I care most about</label>
<select id="selectBox2">
<option value="a">Cash Back</option>
<option value="b">Rewards</option>
<option value="c">Travel</option>
<option value="d">Balance Transfer</option>
<option value="e">Low Interest</option>
<option value="f">Building My Credit</option>
</select>
</td>
<td style="font-style:nunito; background-color:#FFEBF6;border:none;"><br/>
<input id="click" onclick="Redirect()" type="button" value="Find Cards" style="width:200px; height:45px; margin-top:5px;background-color: #2832C2;border:#415BA4;color:#ffffff; font-weight:bold;"/>
</td>
</tr>
</table>
The Find Cards button is not clickable. What is wrong with this code?

onclick of button this function will opens multiple pages
function Redirect() {
window.open('url here', '_blank');
window.open('url here', '_blank');
}

for this you have to make code with condition statement and when 2 value combination match it will open your desire url
try out this code
function Redirect(e) {
e.preventDefault()
var value1 =$('#selectBox1').val();
var value2 = $('#selectBox2').val();
if(value1 == "your value" && value2 == "your value"){
window.open('your url', '_blank');
}
// repeate this if with your all combination of your value and chage url
}

JS calculated value is not shown

I have developed a small page where an user can add 2 items (bron / afzuigunit) and see what the total cost of this configuration will be.
It can be found here
The 2 options
<tr>
<td>Plasma bron</td>
<td width="20px"></td>
<td><select id="bron" onchange="calculate()">
<option value="0_0">Kies uw plasmabron</option>
<option value="Geen_0">Geen</option>
<option value="PowerMax 45XP_50">PowerMax 45XP</option>
<option value="PowerMax 65_100">PowerMax 65</option>
<option value="PowerMax 85_150">PowerMax 85</option>
<option value="PowerMax 105_200">PowerMax 105</option>
<option value="PowerMax 125_250">PowerMax 125</option>
</select></td>
</tr>
<tr>
<td>Afzuigunit</td>
<td width="20px"></td>
<td><select id="afzuig" onchange="calculate()">
<option value="0_0">Kies uw afzuiging</option>
<option value="Geen_0">Geen / waterbak</option>
<option value="Donaldson_1000">Donaldson</option>
</select></td>
</tr>
I have used _ to use the correct value in my JS code
<script>
function calculate()
{
var bron = (document.getElementById("bron").value).split('_');
var afzuig = (document.getElementById("afzuig").value).split('_');
document.getElementById('verkoop').value = ((20000 * 1) + (bron[1] * 1) + (afzuig[1] * 1));
}
</script>
This part should display the correct price
<h3 class="my-4 text-center text-success">Uw prijs: € <span id="verkoop">20.000</span>,-</h3>
For some reason the is no change in price when an option is selected. Also no error is shown. Any suggestions?

Because you're not changing the value. You're changing the inner text of the span. Instead of .value, use .innerText
document.getElementById('verkoop').innerText = //same code here

How do I make all values in html select element selected using Javascript

In Html have two select tags, the first contains all the worlds countries, the second contains only the countries selected by user.
<form action="/fixsongs.fix">
<table>
<tr>
<td colspan="2">
<label title="Potential Releases from these countries get their score boosted">
Preferred Release Countries
</label>
</td>
</tr>
<tr>
<td>
<select id="preferred_countries_all" size="15" style="width:200px" multiple="multiple">
<option value=" AF">Afghanistan</option><option value="AX">Åland Islands</option><option value="AL">Albania</option><option value="DZ">Algeria</option><option value="AS">American Samoa</option><option value="AD">Andorra</option><option value="AO">Angola</option><option value="AI">Anguilla</option><option value="AQ">Antarctica</option><option value="AG">Antigua and Barbuda</option><option value="AR">Argentina</option><option value="AM">Armenia</option><option value="AW">Aruba</option><option value="AU">Australia</option><option value="AT">Austria</option><option value="AZ">Azerbaijan</option><option value="BS">Bahamas</option><option value="BH">Bahrain</option>...<option value="ZW">Zimbabwe</option>
</select>
</td>
<td>
<button style="width:100px" type="button" id="preferred_countries_add" onclick="add_preferred_countries();">
Add
</button>
<br>
<button style="width:100px" type="button" id="preferred_countries_remove" onclick="remove_preferred_countries();">
Remove
</button>
</td>
<td>
<select id="preferred_countries_selected" name="preferred_countries_selected" size="15" style="width:200px" multiple="multiple">
<option value="GB">United Kingdom</option>
</select>
</td>
</tr>
</table>
<input type="submit" value="Start">
The user selects them by highlighting and then click on button which invokes the following Javascript function.
function add_preferred_countries() {
allCountries = document.getElementById('preferred_countries_all');
selectedCountries = document.getElementById('preferred_countries_selected');
var length=$('#preferred_countries_all option:selected').length;
if(length==0) {
return false;
}
$('#preferred_countries_all option:selected').each(function(){
$('#preferred_countries_selected').append($(this));
});
//selectedCountries.value = "";
for (var i = 0; i < selectedCountries.options.length; i++) {
selectedCountries.options[i].selected = selected;
}
}
'
That bits works fine, but I have realized that when I finally submit the form containing this and various other options that it will send items in the select list that are actually selected. So in the absence of a better solution I want to automatically select all values in the preferred_countries_selected whenever user adds new countries, so that when user submits form the preferred countries will be sent to server
I thought this would work, but has no effect
for (var i = 0; i < selectedCountries.options.length; i++) {
selectedCountries.options[i].selected = selected;
I know the existing function has some JQuery in it, but I would prefer pure javascript solution as I don't really understand JQuery syntax.
Ideally I would prefer to do this just as they press submit, but that is another question.

You have some HTML validation issues with your table and you really should not use inline CSS or HTML event attributes (i.e. onclick) as they have many harmful side-effects.
See the inline comments in the code snippet below and note that you need the checked CSS pseudo-class, rather than selected:
// Get references to the two lists
var allCountries = document.getElementById('preferred_countries_all');
var selectedCountries = document.getElementById('preferred_countries_selected');
function add_preferred_countries(operation) {
if(operation === "add"){
// Get the selected countries from list one into an array
var allPreferredSelected = Array.prototype.slice.call(allCountries.querySelectorAll('option:checked'));
// Loop over the array
allPreferredSelected.forEach(function(selOption){
selectedCountries.appendChild(selOption); // Add each to the second list
});
// Loop through the second list and select each option
Array.prototype.slice.call(selectedCountries.querySelectorAll("option")).forEach(function(opt){
opt.selected = "selected";
});
console.log("Item added");
} else {
// Do remove operation here
// Loop over the selected countries in the second list
Array.prototype.slice.call(selectedCountries.querySelectorAll("option:checked")).forEach(function(opt){
selectedCountries.removeChild(opt); // Remove country
});
console.log("Item removed");
}
}
// Get the add and remove buttons into an array and loop over the array
Array.prototype.slice.call(document.querySelectorAll("button[id^='preferred_countries']")).forEach(function(btn){
// Set up a click event handler for the button
btn.addEventListener("click", function(){
add_preferred_countries(this.dataset.action); // Call the add/remove function with the right arg
});
});
/* Do your styling separate from the HTML */
button[id^='preferred_countries'] { width:100px; }
select { width:200px; height:20em; }
<form action="/fixsongs.fix">
<table>
<tr>
<td colspan="2">
<span title="Potential Releases from these countries get their score boosted">
Preferred Release Countries
</span>
</td>
</tr>
<tr>
<td>
<select id="preferred_countries_all" multiple="multiple">
<option value=" AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option><option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option><option value="BH">Bahrain</option>
...
<option value="ZW">Zimbabwe</option>
</select>
</td>
<td>
<button type="button" id="preferred_countries_add" data-action="add">Add</button>
<br>
<button type="button" id="preferred_countries_remove" data-action="remove">Remove</button>
</td>
<td>
<select id="preferred_countries_selected" name="preferred_countries_selected" multiple="multiple">
<option value="GB">United Kingdom</option>
</select>
</td>
</tr>
</table>
<input type="submit" value="Start">
</form>

Trying to create quantity x cost with Javascript

I am creating a merchandise page where I have put the items into separate tables. I want to have it so that when someone selects a quantity, it will display the appropriate price in the field below. Here's the HTML so far:
<table border="1" id="tshirtTable" style="float:left">
<tr>
<th colspan="2">Burundi T-Shirt</th>
</tr>
<tr>
<td colspan="2"><img src="https://rlv.zcache.com/burundi_t_shirt-re5f84ff8b0724bbda7582389e5816a6f_k2g1o_324.jpg" alt="Burundi T-shirt"></td>
</tr>
<tr>
<td id="qty">Quantity</td>
<td>
<select id="tshirt">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td id="price">Price</td>
<td><input type="text" disabled="true"></td>
</tr>
</table>
I'm pretty new to JS so not sure how to have it calculate the price, depending on which quantity is selected. Guessing I'll have to set the price somewhere, but not exactly sure how to get started on it.
Any help is appreciated, thanks!

I've refactored your code. In my example, we have list of products. It doesn't really matter, you can have here one product or as many as you want. For learning purposes it's better do handle table of items.
First of all we won't be using disabled attribute but readonly. It's is very important, because disabled key-value won't be send to the server. If you want to block the input from changing use readonly. Secondly you don't need to pass =true value to your attribute.
<input type="text" disabled="true"> // bad
<input type="text" readonly> // ok
Another thing is that attribute id is unique per document and we can have only one. Read more on MDN.
The id global attribute defines a unique identifier (ID) which must be
unique in the whole document. Its purpose is to identify the element
when linking (using a fragment identifier), scripting, or styling
(with CSS).
No jQuery in my example, you should learn pure javascript first.
To calc, we must change type of our values. Reading them from inputs, their type is String, we must convert them to Number. In our case we use parseInt() function. It's better to use parseFloat(), when we expect floating point number.
Read my comments to have better understanding what is going on. If you have any confusion make sure to ask.
var table = document.getElementById('tshirtTable');
table.addEventListener("change", function(e) {
// If we are not changing these elements we quit
if (e.target.name !== 'quantity' && e.target.name !== 'each-price') {
return;
}
// Let's check what is id of our element
// We store our id in <tr id="..."
// To access tr, we must find tr by using .closest function
var tr = e.target.closest('tr');
var productId = tr.id;
var quantityValue = tr.querySelector('.quantity').value;
var eachPriceValue = tr.querySelector('.each-price').value;
var totalPriceValue = tr.querySelector('.total-price').value;
// Here is important part, we must parse values as type Number, because currently they are type String
tr.querySelector('.total-price').value = ( parseInt(quantityValue) * parseInt(eachPriceValue)).toFixed(2);
});
<table border="1" id="tshirtTable" style="float:left">
<thead>
<th>Name</th>
<th>Quantity</th>
<th>Price / Each</th>
<th>Total Price</th>
</thead>
<tbody>
<tr id="1">
<td>Burundi T-Shirt</td>
<td><select class="quantity" name="quantity">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><input class="each-price" type="text" name="each-price" value="15"></td>
<td><input class="total-price" name="total-price" type="text" readonly></td>
</tr>
<tr id="2">
<td>Burundi Skirt</td>
<td><select class="quantity" name="quantity">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><input class="each-price" type="text" name="each-price" value="25"></td>
<td><input class="total-price" name="total-price" type="text" readonly></td>
</tr>
<tr id="3">
<td>Burundi Mask</td>
<td><select class="quantity" name="quantity">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><input class="each-price" type="text" name="each-price" value="30"></td>
<td><input class="total-price" name="total-price" type="text" readonly></td>
</tr>
</tbody>
</table>

First you have to add function which have to be call on document ready or as pure javascript document.onload()
Then you have to define a variable name for the price,
Then you have to get the value of your (#tishirt) and multiply it with the price get the result as a value for your text input in which the price display
Here is the script
<script type ="text/javascript">
document.onload=function(){
document.getElementById(#tishirt).onchange=function(){
var price=100 ;//only example price
var total=price*document.getElementById(#tishirt).value;
if (total>0){
document.getElementById(#total).value=total;
}
};
};
</script>
Don't forget to add id to your text box (#total)

Dropdown box - onchange and onselect

I want help, i am very new to html..
On selecting option from dropdown menu, I want html to put the values in word..
e.g. When I select "1" from drop down, it must show "one"
When I select "2' from drop down, it must show "two"
How to do that??
<HTML>
<Table border=10>
<TR>
<TD>Select Number</TD>
<TD><Select>
<option>1</option>
<option>2</option>
<option>3</option>
</Select></TD>
</TR>
<tr>
<td>In Words</td>
<td><input type="text" readonly></td>
</tr>
</Table>
</HTML>
Please make a script and show me...

A non-jQuery solution:
Firstly, give your select- and input-tags id's, and your options values (value=""). Then add a onchange=""-listener in the select-tag and make a function that carries out what you want to do (i.e. checking the selected value and displaying it in your input field), like so:
function showValue() {
var x = document.getElementById("mySelect").value;
document.getElementById("mySelection").value = "You selected: " + x;
}
<Table border=10>
<tr>
<td>Select Number</td>
<td><Select onchange="showValue()" id="mySelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</Select></td>
</tr>
<tr>
<td>In Words</td>
<td><input type="text" id="mySelection"></td>
</tr>
</Table>

If I understand what you want, you'll need some javascript to find what you selected, and take that 'string' and shove it in an element for the user to see.
Here is a working example. Try making one these next time you ask a question. Welcome to Stack Overflow.
http://jsfiddle.net/sheriffderek/6vp5Lskn/
HTML
<select name='my_select' id='my_select'>
<option value='1'>Option 1</option>
<option value='2'>Option 2</option>
<option value='3'>Option 3</option>
<option value='4'>Option 4</option>
<option value='5'>Option 5</option>
</select>
<div id="outcome">
You have selected: <span></span>
</div>
javascript (jQuery)
var selectedOption; // define this variable
// when the select is changed...
$('#my_select').on('change', function() {
// get the option that was selected
selectedOption = $( "#my_select option:selected" ).text();
// put the option in the place you want it
$('#outcome span').html(selectedOption);
});