I want to have a swap button as in Google Translate,
this button should swap between the selection inputs in a form
each selector shows a list of currencies. I want to click and simply swap between the values.
i.e.
<select name="from" id="from" class="form-control" onchange="selectValue(this);">
<option value="ILS"> Israeli Shekel (₪) </option>
<option value="USD" selected=""> US Dollar (USD) </option>
<option value="EUR"> Euro (EUR) </option>
</select>
<select name="to" id="to" ONCHANGE="goto(this.form)" class="form-control">
<option value="ILS" selected=""> Israeli Shekel (₪) </option>
<option value="USD"> US Dollar (USD) </option>
<option value="EUR"> Euro (EUR) </option>
<option value="GBP"> British Pound (GBP) </option>
</select>
<button type="button" class="btn btn-lg center-block w100" onclick="swap();">Swap</button>
JS:
<script>
var a = document.getElementById("from").index;
// var value = a.options[a.selectedIndex].value;
var b = document.getElementId("to").index;
var c = b;
function swap() {
document.getElementById("from").selectedIndex = c;
document.getElementById("to").selectedIndex = a;
}
</script>
When clicked it changes one value only, is it the way to do it with index?
I'd like this to run over Phone Gap.
You should try below jquery code.
$('button').click(function(){
var from = $('#from').val(),
to = $('#to').val();
$('#from').val(to);
$('#to').val(from);
});
Related
I have 2 fields from which i select some values to be concatenated and posted in a div from which, on submit, i save into a database.
So i select values from 'tags1' and 'tags2' and after i push the button 'adauga' the concatendated values show in the textarea with id 'd11'. Up untill now everythign works fine, untill i press the button 'Clear' to clear the div from values. After that if i try to add values again it does not work, nothing is displayed in the 'd11' div.
Below is the html and the script:
<select name="tehnologie[]" id="tags2" size="13" multiple = "multiple">
<option value="GSM">GSM</option>
<option value="UMTS">UMTS</option>
<option value="LTE">LTE</option>
<option value="NR (5G)">NR (5G)</option>
<option value="Radiodifuziune AM">Radiodifuziune AM</option>
<option value="Radiodifuziune FM">Radiodifuziune FM</option>
<option value="TV digital">TV digital</option>
<option value="TV analogic">TV analogic</option>
<option value="PMR/PAMR">PMR/PAMR</option>
<option value="Satelit">Satelit</option>
<option value="Aero">Aero</option>
<option value="RAmator">RAmator</option>
<option value="Alte aplicatii radio">Alte aplicatii radio</option>
</select>
<input name="banda_buffer" type="number" list="frecvente" id="tags1" >
<datalist id="frecvente">
<option value="800">800</option>
<option value="900">900</option>
<option value="1800">1800</option>
<option value="2100">2100</option>
<option value="2600">2600</option>
</datalist>
<input hidden type="text" id="tags3" >
<input type="button" id="adauga" onClick="myFunction1();" name="adauga" value="+" />
<textarea id="d11" name="banda" rows="5" cols="300" readonly class="form-control input-md"></textarea>
<button type="button" onclick="ClearFields();">Clear</button>
<input type="submit" id="submit" name="submit" onClick="alerta();" value="Salveaza" class="btn btn-primary">
And the js:
var cpvuri1=[];
var AreaToDisplay1=document.getElementById('d11');
function myFunction1(){
var text1=document.getElementById('tags1').value;
var text2=document.getElementById('tags2').value;
var text3= text2 +' - '+ text1;
cpvuri1.push(text3);
AreaToDisplay1.innerHTML=cpvuri1;
}
function ClearFields() {
document.getElementById("d11").value = "";
document.getElementById("tags1").value = "";
document.getElementById("tags2").value = "";
document.getElementById("tags3").value = "";
cpvuri1=[];
}
function alerta() {
document.getElementById("tags3").value = cpvuri1;
}
You can use value rather than innerHTML
function myFunction1(){
var text1=document.getElementById('tags1').value;
var text2=document.getElementById('tags2').value;
var text3= text2 +' - '+ text1;
cpvuri1.push(text3);
AreaToDisplay1.value=cpvuri1;
}
I have a onchange multiple select option that can select multiple course then display the total price in other input values
However how to get the total price if I have another multiple select option for months to be sum up in that input
Each months's price is same
course select option code
<select class="form-control" onchange="selectFunction(event)"
name="pay_course[]" required="" multiple>
<option data-price="1111" value="courseId1">English</option>
<option data-price="2222" value="courseId2">Math</option>
</select>
month select option code
<select class="form-control" multiple="multiple" >
<option selected="selected" value="" name="pay_fee_month[]" disabled="true">Select Month...</option>
<option value='Janaury'>Janaury</option>
<option value='February'>February</option>
<option value='March'>March</option>
<option value='April'>April</option>
<option value='May'>May</option>
<option value='June'>June</option>
<option value='July'>July</option>
<option value='August'>August</option>
<option value='September'>September</option>
<option value='October'>October</option>
<option value='November'>November</option>
<option value='December'>December</option>
</select>
Input to be display the total
<input type="number" value="" id="money" class="form-control">
Script
function selectFunction(e) {
var type_id = $('select option:selected').map(function() {
return $(this).attr('data-price');
})
.get().map(parseFloat).reduce(function(a, b) {
return a + b
});
console.log(type_id)
$("#money").val( type_id );
}
I would do it another way... Completely.
What you wish to have is the total price based on selected courses multiplied by the amount of selected months.
Below, is a script that does just that... On change of both selects.
$("#courses, #months").on("change", function(){
// Get the total price of the selected courses.
var price = 0;
$("#courses").find("option:selected").each(function(){
price += $(this).data("price");
});
console.log(price);
// Get the amount of selected months.
var monthCount = $("#months").find("option:selected").length;
console.log(monthCount);
// Multiply.
var total = monthCount * price;
$("#money").val(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="courses" name="pay_course[]" required="" multiple>
<option data-price="1111" value="courseId1">English</option>
<option data-price="2222" value="courseId2">Math</option>
</select>
<select class="form-control" id="months" multiple="multiple" >
<option value="" name="pay_fee_month[]" disabled>Select Month...</option>
<option value='January'>January</option>
<option value='February'>February</option>
<option value='March'>March</option>
<option value='April'>April</option>
<option value='May'>May</option>
<option value='June'>June</option>
<option value='July'>July</option>
<option value='August'>August</option>
<option value='September'>September</option>
<option value='October'>October</option>
<option value='November'>November</option>
<option value='December'>December</option>
</select>
<input type="number" value="" id="money" class="form-control">
Notice that I removed the inline onchange handler and used jQuery .on()
I also removed the selected="selected" on the first month option since it also is disabled.
I have a little question as I'm very new to JavaScript. I've made a dropdown containing various counties, and based on which county is selected, I want a specific email-address to populate a text field. I'm working with the following HTML form:
<div
<br>
Email:
<br>
<input type="text" id="email" readonly=>
</div>
<div>
<br>
Counties:
<br>
<select id="counties">
<option value="Choose One">Choose One</option>
<option value="Charlotte">Charlotte</option>
<option value="Collier">Collier</option>
<option value="Hillsborough">Hillsborough</option>
<option value="Lee">Lee</option>
<option value="Manatee">Manatee</option>
<option value="Pasco">Pasco</option>
<option value="Pinellas">Pinellas</option>
<option value="Polk">Polk</option>
<option value="Sarasota">Sarasota</option>
<option value="Brevard">Brevard</option>
<option value="Broward">Broward</option>
<option value="Indian River">Indian River</option>
<option value="Martin">Martin</option>
<option value="Miami-Dade">Miami-Dade</option>
<option value="Monroe">Monroe</option>
<option value="Palm Beach">Palm Beach</option>
<option value="St Lucie">St Lucie</option>
</select>
</div>
For the first 9 counties; I'd like them to go to "first#email.com
And for the remaining 8 counties; I'd like them to go to "second#email.com
I'm looking for some insight in how to add a value to the counties, and based on that value (Choose One = 0, first nine counties = 1, remaining eight = 2) I'd like to populate the text field with id="email" with the respective email.
How could I go about setting this up in JavaScript? Thanks in advance.
You can do it with custom attribute. See this fiddle: https://jsfiddle.net/y2t0utk7/
Html
<div>
Email:
<br>
<input type="text" id="email" />
</div>
<div>
<br>
Counties:
<br>
<select id="counties" onChange="return setMail()">
<option data-mail="0" value="Choose One">Choose One</option>
<option data-mail="1" value="Charlotte">Charlotte</option>
<option data-mail="1" value="Collier">Collier</option>
<option data-mail="1" value="Hillsborough">Hillsborough</option>
<option data-mail="1" value="Lee">Lee</option>
<option data-mail="1" value="Manatee">Manatee</option>
<option data-mail="1" value="Pasco">Pasco</option>
<option data-mail="1" value="Pinellas">Pinellas</option>
<option data-mail="1" value="Polk">Polk</option>
<option data-mail="1" value="Sarasota">Sarasota</option>
<option data-mail="2" value="Brevard">Brevard</option>
<option data-mail="2" value="Broward">Broward</option>
<option data-mail="2" value="Indian River">Indian River</option>
<option data-mail="2" value="Martin">Martin</option>
<option data-mail="2" value="Miami-Dade">Miami-Dade</option>
<option data-mail="2" value="Monroe">Monroe</option>
<option data-mail="2" value="Palm Beach">Palm Beach</option>
<option data-mail="2" value="St Lucie">St Lucie</option>
</select>
</div>
JS
function setMail(){
// find the dropdown
var ddl = document.getElementById("counties");
// find the selected option
var selectedOption = ddl.options[ddl.selectedIndex];
// find the attribute value
var mailValue = selectedOption.getAttribute("data-mail");
// find the textbox
var textBox = document.getElementById("email");
// set the textbox value
if(mailValue=="1"){
textBox.value = "first#email.com";
}
else if(mailValue=="2"){
textBox.value = "second#email.com";
}
}
Since you said you are new in javascript, let's use a pure javascript way to do it.
You can add an onChange to the select HTML tag and the function you passed in will be triggered every time you change its value.
Inside the function, you can base on the value of the selection, to decide what is the new value for the email box, using switch, if statement etc..
To do what you want, you can use integer be the value as you mentioned.
HTML:
<select id="counties" onchange="func()">
Javascript:
function func(){
var dropdown = document.getElementById("counties");
var selection = dropdown.value;
console.log(selection);
var emailTextBox = document.getElementById("email");
// assign the email address here based on your need.
emailTextBox.value = selection;
}
Demo
Is there a way of inserting a string into a field, whereby the string is predetermined depending on what options are selected from two drop down menus?
This is so that a combination of two drop down menus creates a unique SKU for that product, and that string referred to as a SKU is inserted into the input value of the item_number variable and then passed to paypal during checkout.
I will use the example of selling tee-shirts. So the combinations will be black/small, black/large, white/small, & white/large. And each will have a unique SKU of TEESHIRT-BS, TEESHIRT-BL, TEESHIRT-WS & TEESHIRT-WL respectively.
Here is my HTML for the option selects, however, I think I need some JavaScript to insert the SKU into the value field.
<input type="hidden" name="on0" value="colour"><b>select colour</b></><br>
<select name="os0" >
<option value="black">black</option>
<option value="white">white</option>
</select>
<br>
<br>
<input type="hidden" name="on1" value="size"><b>select size</b></><br>
<select name="os1" >
<option value="small">small</option>
<option value="large">large</option>
</select>
<!-- SKU-->
<input type="hidden" name="item_number" value="">
Try the following:
var sizeList = document.getElementById('size');
var colorList = document.getElementById('color');
sizeList.onchange = function() {
generateSku();
};
colorList.onchange = function() {
generateSku();
};
function generateSku() {
var selectedSize = sizeList.options[sizeList.selectedIndex].text;
var selectedColor = colorList.options[colorList.selectedIndex].text;
document.getElementById('sku').value = 'TEESHIRT-' + selectedColor.charAt(0).toUpperCase() + selectedSize.charAt(0).toUpperCase();
}
generateSku();
<input type="hidden" name="on0" value="colour"><b>select colour</b></><br>
<select id="color" name="os0" >
<option value="black">black</option>
<option value="white">white</option>
</select>
<br>
<br>
<input type="hidden" name="on1" value="size"><b>select size</b></><br>
<select id="size" name="os1" >
<option value="small">small</option>
<option value="large">large</option>
</select>
<!-- SKU-->
<input id="sku" name="item_number" value="">
I'm working on a website project and really need help as I'm new to all this. I'm basically given values to every option in the drop down menu's and make them add together which I've managed. But then I want to the total value from the menus to then be the range for a pseudo random to be a generated and added to the age I input.
When I hit submit I'd like it to calculate all that and display the result on a new page. I want to be able to do all this within javascript and html.
Any help would be greatly appreciated! My coding is below. Thanks so much!
<body>
<form id="form1" action="" method="post" onsubmit="return calcTotal(this)">
<select name=select1>
<option selected="selected" value="0">Chinese Zodiac</option>
<option value="3">Rat</option>
<option value="3">Ox</option>
<option value="4">Tiger</option>
<option value="2">Rabbit</option>
<option value="4">Dragon</option>
<option value="5">Snake</option>
<option value="3">Horse</option>
<option value="3">Sheep</option>
<option value="4">Monkey</option>
<option value="5">Rooster</option>
<option value="3">Dog</option>
<option value="3">Pig</option>
</select>
</select>
<br />
<select name=select2>
<option selected="selected" value="0">Star Sign</option>
<option value="2">Aries</option>
<option value="4">Taurus</option>
<option value="3">Gemini</option>
<option value="4">Cancer</option>
<option value="3">Leo</option>
<option value="2">Virgo</option>
<option value="2">Libra</option>
<option value="3">Scorpio</option>
<option value="2">Sagittarius</option>
<option value="4">Capricorn</option>
<option value="2">Aquarius</option>
<option value="3">Pisces</option>
</select>
<br />
<select name=select3>
<option selected="selected" value="0">Blood Type</option>
<option value="3">O</option>
<option value="2">A</option>
<option value="1">B</option>
<option value="3">AB</option>
</select>
<br />
<select name=select4>
<option selected="selected" value="0">Favourite Colour</option>
<option value="3">Black</option>
<option value="3">Blue</option>
<option value="2">Brown</option>
<option value="2">Green</option>
<option value="3">Orange</option>
<option value="3">Pink</option>
<option value="2">Purple</option>
<option value="4">Red</option>
<option value="2">Yellow</option>
<option value="2">White</option>
<option value="5">Other</option>
</select>
<br />
Age<input name="" type="number" value="" />
<br />
<input name="" type="submit" value="Total" />
<span>Total: </span><span id="result"></span>
</form>
<script type="text/javascript">
function calcTotal(oForm){
var sum = 0;
for(i=0; i < oSels.length; i++){
sum += new Number(oSels[i].value);
}
document.getElementById('result').innerHTML = sum;
return false;
}
window.onload=function(){
oSels = document.getElementById('form1').getElementsByTagName('select');
for(i=0; i < oSels.length; i++){
oSels[i].onchange=function(){
document.getElementById('result').innerHTML = '';
}
}
}
</script>
I played with your code. I don't now if it's someting like that that you wanted but here is an example of random score.
It now use the age to generate a value.
Take a look if you like it at my codepen.
I changed the age input:
Age<input id="age" name="" type="number" value="" />
I also added a new function to generate random number between min-max:
function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
And modified how the sum is calculated:
var age = document.getElementById('age').value;
sum = parseInt(age) + parseInt(getRandomInt(sum-(age / 4),sum+(age / 4)));
//Add some random. The more you are older, the more random it is.
You can do a lot of different generated sum. If you want less modifications, we also can take the last digit of the age to get the min/max value generated...
Edit:
To help you share variables between pages, Look at this question.
Adding this as an answer as the submitter considers it a good idea:
Put the result from all your maths into hidden fields. Then when you submit the form, the values will be passed along.
You don't need to do anything special really. Just add fields like this:
<input type="hidden" value="[yourValue]" name="fieldName" id="fieldId" />
For the yourValue part, simply insert your caclulated value from the JavaScript:
document.getElementById("fieldId").value = calculatedValue;
Since it's all part of the same form that you're submitting anyway, they will all be past along. You can retrieve the fields on the receiving page as normal.
I downloaded and edited your entire code block. I changed a couple of things.
1. You don't need the onsubmit on your form. You need a call the JavaScript function on a Total button. The submit button is added to submit the form when the user is done.
2. A hidden field to hold your result is added to the form.
3. The function where you do your calculation has an addition to send the calulated total to the new hidden field.
4. You need to add something to the ACTION, so it knows where to submit the form. You can also remove the ALERT. I just added that to be sure it worked right.
I've run and tested this, and it works exactly as expected. This is what the edited code looks like:
<body>
<form id="form1" action="" method="post">
<select name=select1>
<option selected="selected" value="0">Chinese Zodiac</option>
<option value="3">Rat</option>
<option value="3">Ox</option>
<option value="4">Tiger</option>
<option value="2">Rabbit</option>
<option value="4">Dragon</option>
<option value="5">Snake</option>
<option value="3">Horse</option>
<option value="3">Sheep</option>
<option value="4">Monkey</option>
<option value="5">Rooster</option>
<option value="3">Dog</option>
<option value="3">Pig</option>
</select>
</select>
<br />
<select name=select2>
<option selected="selected" value="0">Star Sign</option>
<option value="2">Aries</option>
<option value="4">Taurus</option>
<option value="3">Gemini</option>
<option value="4">Cancer</option>
<option value="3">Leo</option>
<option value="2">Virgo</option>
<option value="2">Libra</option>
<option value="3">Scorpio</option>
<option value="2">Sagittarius</option>
<option value="4">Capricorn</option>
<option value="2">Aquarius</option>
<option value="3">Pisces</option>
</select>
<br />
<select name=select3>
<option selected="selected" value="0">Blood Type</option>
<option value="3">O</option>
<option value="2">A</option>
<option value="1">B</option>
<option value="3">AB</option>
</select>
<br />
<select name=select4>
<option selected="selected" value="0">Favourite Colour</option>
<option value="3">Black</option>
<option value="3">Blue</option>
<option value="2">Brown</option>
<option value="2">Green</option>
<option value="3">Orange</option>
<option value="3">Pink</option>
<option value="2">Purple</option>
<option value="4">Red</option>
<option value="2">Yellow</option>
<option value="2">White</option>
<option value="5">Other</option>
</select>
<br />
Age<input name="" type="number" value="" />
<br />
<input name="" type="button" value="Total" onclick="calcTotal();" />
<input name="submit" type="submit" value="Submit" />
<span>Total: </span><span id="result"></span>
<input type="hidden" value="0" name="resultIs" id="resultIs" />
</form>
<script type="text/javascript">
function calcTotal(oForm) {
var sum = 0;
for (i = 0; i < oSels.length; i++) {
sum += new Number(oSels[i].value);
}
//This is what you are using to display the result to your user.
document.getElementById('result').innerHTML = sum;
//This will add the value of the result to a hidden field I added to the form. When you submit it, just request the value of "resultIs"
document.getElementById("resultIs").value = sum;
alert(sum);
return false;
}
//I really don't even see that this is needed. Your form doesn't need to be cleared onLoad.
window.onload = function() {
oSels = document.getElementById('form1').getElementsByTagName('select');
for (i = 0; i < oSels.length; i++) {
oSels[i].onchange = function() {
document.getElementById('result').innerHTML = '';
}
}
}
</script>