I'm trying to run a function that will add commas to the results of a form that multiplies the values of two drop down boxes.
The function I have works on an html element such as p class="points" but it is not working on the output generated by id="results2"
Any idea what I'm doing wrong?
<form name="myForm" id="myForm">
<label>Select Amount</label>
<select id="box1" type="select" oninput="calculate()" />
<option value="choose" selected>Choose</option>
<option value="15000">$15,000</option>
<option value="20000">$20,000</option>
<option value="25000">$25,000</option>
<option value="30000">$30,000</option>
<option value="35000">$35,000</option>
</select>
<label>Select Type</label>
<select id="box2" type="select" oninput="calculate()" />
<option value="x" selected>Choose</option>
<option value=".21">1</option>
<option value=".40">2</option>
</select>
<input class="button" type="submit" value="Submit" id="multiply">
<p>
<strong>here are the results:</strong>
</p>
<h3>
<strong>$<span id="result2"></span></strong> a week
</h3>
</form>
<script>
$(document).ready(function(){
$('#multiply').click(function(event){
event.preventDefault();
var n1=$('#box1').val();
var n2=$('#box2').val();
var result=Math.round(n1*n2*25);
$('#resultholder4').fadeIn(200);
$('#number1').append(n1);
$('#number2').append(n2);
$('#result2').text(result);
});
});
</script>
<script type="text/javascript">
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
}
$('.points').each(function() {
var v_pound = $(this).html();
v_pound = numberWithCommas(v_pound);
$(this).html(v_pound)
})
</script>
You are just not calling numberWithCommas() on your result. Here is your code with one change (and I had to add the calculate function that is referenced by the select's oninput).
$(document).ready(function() {
$('#multiply').click(function(event) {
event.preventDefault();
var n1=$('#box1').val();
var n2=$('#box2').val();
var result=Math.round(n1*n2*25);
$('#resultholder4').fadeIn(200);
$('#number1').append(n1);
$('#number2').append(n2);
// added call to numberWithCommas, line had been:
//$('#result2').text(result);
// changed to:
$('#result2').text(numberWithCommas(result)); // <--------
});
});
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
}
$('.points').each(function() {
var v_pound = $(this).html();
v_pound = numberWithCommas(v_pound);
$(this).html(v_pound)
});
function calculate() {
// ?
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm" id="myForm">
<label>Select Amount</label>
<select id="box1" type="select" oninput="calculate()" />
<option value="choose" selected>Choose</option>
<option value="15000">$15,000</option>
<option value="20000">$20,000</option>
<option value="25000">$25,000</option>
<option value="30000">$30,000</option>
<option value="35000">$35,000</option>
</select>
<label>Select Type</label>
<select id="box2" type="select" oninput="calculate()" />
<option value="x" selected>Choose</option>
<option value=".21">1</option>
<option value=".40">2</option>
</select>
<input class="button" type="submit" value="Submit" id="multiply">
<p>
<strong>here are the results:</strong>
</p>
<h3>
<strong>$<span id="result2"></span></strong> a week
</h3>
</form>
Here is a quick dirty method:
function numberWithCommas(x) {
x = x.toString();
var pattern = /(-?\d+)(\d{3})/;
while (pattern.test(x))
x = x.replace(pattern, "$1,$2");
return x;
}
should add that this was provided by Peter Mortensen:
How to print a number with commas as thousands separators in JavaScript
here is a demo:
https://jsfiddle.net/keinchy/dx7qg4nk/1/
-cheers
Your event handler for #multiply never actually calls numberWithCommas. Replace
$('#result2').text(result);
with
$('#result2').text(numberWithCommas(result));
and it should work.
Related
I want to validate the select method with submit type button. I have created a form and under that, I have created the select method and given some options. By submit type, the onClick should validate my submit type with the options in the select method. How can I assign the value of option
to var t based on select?
According to the select option my var t should be changed.
If the value is volvo then it should print val11, similarly Saab= val14, opel= val82, Audi= val34
<select name="carlist" class="temp>
<option value="10">Volvo</option>
<option value="20">Saab</option>
<option value="30">Opel</option>
<option value="45">Audi</option>
</select>
<input type="submit" class="temp" value="submit the answer">
<script>
var t;
if () {
t=value;
} else if () {
t=value;
} else if () {
t=value;
}else {
t=value;
}
</script>
You can call a function on clicking the button. Inside the function get the text of the selected option:
function getValue(){
var el = document.querySelector('.temp');
var val = el.options[el.selectedIndex].text;
var t;
if(val == "Volvo")
t = 'val11';
else if(val == "Saab")
t = 'val14';
if(val == "Opel")
t = 'val82';
else if(val == "Audi")
t = 'val34';
alert(t);
}
<form>
<select name="carlist" class="temp">
<option value="10">Volvo</option>
<option value="20">Saab</option>
<option value="30">Opel</option>
<option value="45">Audi</option>
</select>
<input onclick="getValue()" type="submit" class="temp" value="submit the answer">
</form>
You can also think of using data attribute which is more cleaner and simpler:
function getValue(){
var el = document.querySelector('.temp');
var t = el.options[el.selectedIndex].getAttribute('data-val');
alert(t);
}
<form>
<select name="carlist" class="temp">
<option value="10" data-val="val11">Volvo</option>
<option value="20" data-val="val14">Saab</option>
<option value="30" data-val="val82">Opel</option>
<option value="45" data-val="val34">Audi</option>
</select>
<input onclick="getValue()" type="submit" class="temp" value="submit the answer">
</form>
You can do a few things, here's the simplest I could get away with.
function submitForm() {
const value = document.querySelector('[name="carlist"').value;
console.log(value);
return false; // to prevent it navigating away.
}
<form onsubmit="submitForm()">
<select name="carlist" class="temp">
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
<input type="submit" class="temp" value="submit the answer">
You can also have some validation running earlier, e.g. on change:
/**
* This function runs on form submit.
*/
function submitForm(event) {
const value = document.querySelector('[name="carlist"').value;
console.log(value);
// to prevent it navigating away.
event.preventDefault();
return false;
}
/**
* This function runs on selection change
*/
function validateCar(changeEvent) {
console.log('Change');
// do something with changeEvent
}
<form onsubmit="submitForm(event)">
<select name="carlist" class="temp" onchange="validateCar(event)">
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
<input type="submit" class="temp" value="submit the answer">
You can set an id attribute on the select element and then access it through a querySelector or getElementById.
<form id="carForm">
<select name="carlist" class="temp" id="car">
<option value="val11">Volvo</option>
<option value="val14">Saab</option>
<option value="val82">Opel</option>
<option value="val34">Audi</option>
</select>
</form>
let carForm = document.getElementById('carForm');
carForm.onsubmit = function(event) {
var t = document.getElementById('car');
...
}
See codepen example
My goal here is to be able to add preferences to a form I've made... I've created an array of objects containing the following fields like so...
var preferences =[{
base_field:"field1",
base_value:"1",
preference_type:"change",
target_field:"field2_div legend",
target_value:"New Field 2 Legend"
},
{
base_field:"field1",
base_value:"2",
preference_type:"change",
target_field:"field2_div legend",
target_value:"New Field 2 Legend"
}];
$.each(preferences, function(key, preference){
var baseField = $("#" + preference.base_field);
var baseValue = preference.base_value;
var targetField = $("#" + preference.target_field);
var targetValue = preference.target_value;
if (preference.preference_type == 'change') {
var originalValue = targetField.text();
baseField.change(function(){
if(baseField.val() === baseValue){
targetField.text(targetValue);
}
if(baseField.val() !== baseValue){
targetField.text(originalValue);
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="field1_div">
<fieldset>
<legend>Field 1 Legend</legend>
<label for="field1">Field 1</label>
<select id="field1" name="field1">
<option value="" selected>Field 1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</fieldset>
</div>
<div id="field2_div">
<fieldset>
<legend>Default Field 2 Legend</legend>
<input id="field2" type="text" name="field2">
</fieldset>
</div>
I want the text of '#field2_div legend' to change when the value of #field1 changes to '1' or '2' from 'Default Field 2 Legend' to 'New Field 2 Legend', and then if field1 changes to a value that is not '1' or '2', the text of '#field2_div legend' is restored to 'Default Field 2 Legend'
My problem is only the last change function sticks for when field1 = "2"... I think this is because the change function is getting overwritten. Any ideas on how to rewrite this for a more scalable approach?
Solved it like this... Thanks #ADyson !
var preferences =[{
base_field:"field1",
base_value:["1","2"],
preference_type:"change",
target_field:"field2_div legend",
target_value:"New Field 2 Legend"
}];
$.each(preferences, function(key, preference){
var baseField = $("#" + preference.base_field);
var baseValue = preference.base_value;
var targetField = $("#" + preference.target_field);
var targetValue = preference.target_value;
if (preference.preference_type == 'change') {
var originalValue = targetField.text();
baseField.change(function(){
if($.inArray(baseField.val(), baseValue) > -1){
targetField.text(targetValue);
} else{
targetField.text(originalValue);
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="field1_div">
<fieldset>
<legend>Field 1 Legend</legend>
<label for="field1">Field 1</label>
<select id="field1" name="field1">
<option value="" selected>Field 1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</fieldset>
</div>
<div id="field2_div">
<fieldset>
<legend>Default Field 2 Legend</legend>
<input id="field2" type="text" name="field2">
</fieldset>
</div>
add your code like following
$(function(){
$('#field1').change(function(){
if($.inArray($(this).val(), ['1','2']) >= 0){
$('#field2_div').children().find('legend').text('New Field 2 Legend');
}else{
$('#field2_div').children().find('legend').text('Default Field 2 Legend');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="field1_div">
<fieldset>
<legend>Field 1 Legend</legend>
<label for="field1">Field 1</label>
<select id="field1" name="field1">
<option value="" selected>Field 1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</fieldset>
</div>
<div id="field2_div">
<fieldset>
<legend>Default Field 2 Legend</legend>
<input id="field2" type="text" name="field2">
</fieldset>
</div>
Here is my approach when changing values on the fly in a form.
I left you some work to customize it to your liking.
<div id="field1_div">
<fieldset>
<legend>Field 1 Legend</legend>
<label for="field1">Field 1</label>
<select id="field1" name="field1">
<option value="" selected>Field 1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</fieldset>
</div>
<div id="field2_div">
<fieldset>
<legend>Default Field 2 Legend</legend>
<input id="field2" type="text" name="field2">
</fieldset>
</div>
<script>
function formChanger(inputValue) {
switch (inputValue) {
case '1':
// do something for selection 1
console.log('selected 1');
break;
case '2':
// do something for selection 2
console.log('selected 2');
break;
case '3':
// do something for selection 2
console.log('selected 3');
break;
case '4':
// do something for selection 2
console.log('selected 4');
break;
default :
// Probably want to remove any of the first 4 options that may have been implemented already.
return null;
}
}
$('#field1').change(function(){
formChanger($(this).val());
});
</script>
I am making a form where when I select familyname of the product, its values will be display in a box (I don't know what I should use todisplay it) and the box can't be edited (only can be read).
-HTML
<select name="fnme" onchange="setText(this)" multiple>
<option value="STR12(12,YU,IO)">STR12(12,YU,IO)</option>
<option value="STR13(13,YU,IO)">STR12(13,YU,IO)</option>
<option value="STR14(14,YU,IO)">STR12(14,YU,IO)</option>
<option value="STR15(15,YU,IO)">STR12(15,YU,IO)</option>
</select>
<td><textarea rows="10" cols="30" name="textBox" id="disabled" value=""/ disabled></textarea></td>
</br>
<p><input type="submit" value="Save"></p>
-ASPCode
<%
DIM fnm,element
fnm=Split(Request("fnme"),"\n")
FOR EACH element IN fnm
Response.Write("<p>--qq-- " & trim(element) & " </p>")
Next
%>
For now I'm using text area but still have a problem in displaying many value, it display on one selected value.
-JS
<script>
function setText(obj) {
var val = obj.value;
document.getElementById('textBox').value = val;
}
</script>
I want to know it is possible to display the multiple value?
When you do:
var val = obj.value;
you're only going to get the value of the first selected option, not all of them (unless you're using something like jQuery).
And the forward slash in:
<textarea ... id="disabled" value=""/ disabled>
doesn't help either. I'll assume that's just a posting typo.
function getMultiSelectValue(select) {
return [].reduce.call(select.options, function(values, option) {
option.selected? values.push(option.value) : null;
return values;
}, []);
}
function showValues(values){
document.getElementById('ta').value = values.join('\n');
}
<select onchange="showValues(getMultiSelectValue(this))" multiple>
<option value="0">0
<option value="1">1
<option value="2">2
</select>
<textarea id="ta" rows="3" readonly></textarea>
I think this could help you.
<html>
<body>
<form action="" name="tof">
<select name="fnme" onchange="setText(this)" multiple>
<option value="STR12(12,YU,IO)">STR12(12,YU,IO)</option>
<option value="STR13(13,YU,IO)">STR12(13,YU,IO)</option>
<option value="STR14(14,YU,IO)">STR12(14,YU,IO)</option>
<option value="STR15(15,YU,IO)">STR12(15,YU,IO)</option>
</select>
<textarea id="res" readOnly></textarea>
</form>
<p id="demo"></p>
<script>
function setText(ob){
var selected_options = document.forms['tof']['fnme'].selectedOptions
var selected_options_values = []
for(i=0; i<selected_options.length; i++){
selected_options_values.push(selected_options[i].value)
}
document.getElementById('res').value = selected_options_values.join('\n')
}
</script>
</body>
</html>
<select id="drp" value="maindrp" name="maindrp">
<option>Select Categories</option>
<option id="vhc" value="mainvhc">Vehicles</option>
<option id="re" value="mainre">Real Estate</option>
<option id="pt" value="mainpt">Pets</option>
<option id="el" value="mainel">Electronics</option>
<option id="cl" value="maincl">Clothing&Jewerly</option>
<option id="co" value="mainco">Computers&Network</option>
</select>
<input type="text" placeholder="Search" id="msc">
<input type="submit" value="Go" id="go" onclick= "go();">
function go() {
if (document.getElementById("vhc")) {
window.location="vehicles.php";
}else if (document.getElementById("re")) {
window.location="realestate.php"; } }
I want to navigate from selected item from drop down via button on click function.
Can anyone help me please?
Try this, you need the value of <select> tag
function go(){
var sel = document.getElementById('drp').value; // get value of <select>
if(sel=='mainvhc')
window.location.href='vehicles.php';
...
}
I need to combine two values and link to the selected site.
ex. select> Google> select>Translate
join two values
T2 [translate] T1 [.google.com] = translate.google.com Go
JS
<script>
function goToNewPage() {
var g=document.getElementById('target').value;
{
window.location.href = document.getElementById('target').value;
}
}
</script>
HTML
<form name="dropdown">
<select name="selected" id="target2" >
<option selected>Select...</option>
<option value=".google.com/">Google</option>
<option value=".search.com/">Bing</option>
</select>
<select name="selected" id="target" >
<option selected>Select...</option>
<option value="http://translate">Translate</option>
<option value="http://translate/">Translator</option>
</select>
<input type="button" value="Go" onclick="goToNewPage(document.dropdown.selected)">
</form>
Try this:
window.location.href = document.getElementById('target').value + document.getElementById('target2').value