I really don't know how to program in Javascript, yet I've tried to do some stuff. I have values to be summed if some are selected. The following function does sum operation and show result at once without clicking a button only for checkbox fields, not for the dropdown list and text fields.
However, I need to involve the selected values as well from the dropdown lists and entered both text fields in the same manner of the checkboxes and their immediate responses(output).
I think change method can be used in the same manner.
#Edit:
Sorry, I forgot the tell but, I need to multiply the m2 entered value by before summing with 3134,204499 and Bina Yasi with -566,2202888.
function calcAndShowTotal() {
var total = 55435.04798; // it is constant value which must be the beginning value.
$('#housepriceguesslist :checkbox:checked').each(function() {
total += parseFloat($(this).attr('price')) || 0;
});
$('#total').val(total);
}
$('#housepriceguesslist :checkbox').change(calcAndShowTotal).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="housepriceguesslist">
<select id="ilce">
<option value="0">Choose a state</option>
<option value="63999.50712318567">Adalar</option>
<option value="6259.918435398593">Ataşehir</option>
<option value="46285.35729304834">Beykoz</option>
<option value="54258.92953697798">Kadıköy</option>
<option value="-3500.620905653726">Kartal</option>
<option value="12889.41219909602">Maltepe</option>
<option value="-33711.83156847153">Pendik</option>
<option value="-34577.42485251657">Sancaktepe</option>
<option value="-52183.1608811019">Sultanbeyli</option>
<option value="-34760.71735007784">Tuzla</option>
<option value="-27379.87966213786">Çekmeköy</option>
<option value="-5332.203990418937">Ümraniye</option>
<option value="26485.33532820411">Üsküdar</option>
<option value="-18732.62070553167">Şile</option>
</select>
<select id="odasalon">
<option value="0">Choose room number</option>
<option value="5940.027623576261">1+0</option>
<option value="-1399.625767475593">1+1</option>
<option value="-3033.638999060459">2+1</option>
<option value="11519.83954756076">3+1</option>
<option value="-7018.52116545078">4+1</option>
<option value="-6008.081239150166">5+1</option>
</select>
m2: <input type="text" id="m2" /> Bina Yasi: <input type="text" id="binayasi" />
<br/>
<br/> Features:
<br/>
<br/>
<input type="checkbox" id="Bati" value="Bati" price="-783.4452683566533" /> <label for="Bati">Bati</label>
<br/>
<input type="checkbox" id="Dogu" value="Dogu" price="-4895.732009084263" /> <label for="Dogu">Dogu</label>
<br/>
<input type="checkbox" id="Guney" value="Guney" price="-2599.001349652765" /> <label for="Guney">Guney</label>
<br/>
<input type="checkbox" id="Kuzey" value="Kuzey" price="3832.013070771234" /> <label for="Kuzey">Kuzey</label>
<br/>
<input type="checkbox" id="Amerikan Mutfak" value="Amerikan Mutfak" price="2346.347889828301" /> <label for="Amerikan Mutfak">Amerikan Mutfak</label>
<br/>
<input type="checkbox" id="Dusakabin" value="Dusakabin" price="-176.5092353740256" /> <label for="Dusakabin">Dusakabin</label>
<br/>
<input type="checkbox" id="Akilli Ev" value="Akilli Ev" price="-4756.206384200719" /> <label for="Akilli Ev">Akilli Ev</label>
<br/>
<input type="checkbox" id="Ebeveyn Banyosu" value="Ebeveyn Banyosu" price="10135.50644456019" /> <label for="Ebeveyn Banyosu">Ebeveyn Banyosu</label>
<br/>
<input type="checkbox" id="Kiler" value="Kiler" price="-10693.49979821809" /> <label for="Kiler">Kiler</label>
<br/>
<input type="checkbox" id="Kuvet" value="Kuvet" price="-941.0629741243247" /> <label for="Kuvet">Kuvet</label>
<br/>
<input type="checkbox" id="Parke Zemin" value="Parke Zemin" price="-8453.847199707092" /> <label for="Parke Zemin">Parke Zemin</label>
<br/>
<input type="checkbox" id="Seramik Zemin" value="Seramik Zemin" price="1545.025601000643" /> <label for="Seramik Zemin">Seramik Zemin</label>
<br/>
<input type="checkbox" id="Sauna" value="Sauna" price="8677.708176289747" /> <label for="Sauna">Sauna</label>
<br/>
<input type="checkbox" id="Spor Salonu" value="Spor Salonu" price="1159.884679563385" /> <label for="Spor Salonu">Spor Salonu</label>
<br/>
<input type="checkbox" id="Tenis Kortu" value="Tenis Kortu" price="16065.26794172257" /> <label for="Tenis Kortu">Tenis Kortu</label>
<br/>
</div>
<input type="text" id="total" value="0" />
You can loop over all the <select> boxes and text inputs with:
function calcAndShowTotal() {
var total = 55435.04798; // it is constant value which must be the beginning value.
$('#housepriceguesslist :checkbox:checked').each(function() {
total += parseFloat($(this).attr('price')) || 0;
});
$("#housepriceguesslist select, #housepriceguesslist :text").each(function() {
let multiplier = 1;
if (this.id == "m2") {
multiplier = 3134.204499;
}
else if (this.id == "binayasi") {
multiplier = -566.2202888;
}
if (this.value) {
total += parseFloat(this.value) * multiplier;
}
});
$('#total').val(total);
}
And if you change the checkboxes to use value instead of price, you can do them all in one loop:
function calcAndShowTotal() {
var total = 55435.04798; // it is constant value which must be the beginning value.
$('#housepriceguesslist :checkbox:checked').each(function() {
total += parseFloat($(this).attr('price')) || 0;
});
$("#housepriceguesslist select, #housepriceguesslist :text, #housepriceguesslist :checkbox:checked").each(function() {
let multiplier = 1;
if (this.id == "m2") {
multiplier = 3134.204499;
else if (this.id == "binyasi") {
multiplier = -566.2202888;
}
if (this.value) {
total += parseFloat(this.value) * multiplier;
}
});
$('#total').val(total);
}
And call the function when any of the inputs are changed:
$('#housepriceguesslist input, #housepriceguesslist select').change(calcAndShowTotal).change();
This solution is simple, just the get the list of all the inputs (i.e. checkbox, and dropdown) using the .find() method and the selector 'input:checkbox, input:text, select'. Then verify if each one of these inputs elements has the attribute checked or select for the checkbox and select input types respectively, or it is a multiplier for the text inputs. This verification ca be done inside of the each() method callback. Finally, just convert then the value to a number, using the parseFloat() method and add it to the total accumulator.
Finally, sum the value to the total input. Like this:
let container;
let inputs;
let total;
function calcAndShowTotal() {
let sum = 55435.04798; // it is constant value which must be the beginning value.
let value;
inputs.each(function() {
if ($(this).is('input:checkbox:checked')) {
// If is a checkbox
value = parseFloat($(this).attr('price')) || 0;
sum += value;
} else if ($(this).is('input:text:not(#total)')) {
// If is a text wait until you move to another element
let factor = 1;
if (this.id == 'm2') {
factor = 3134.204499;
} else if (this.id == 'binayasi') {
factor = -566.2202888;
}
value = parseFloat($(this).val()) * factor || 0;
sum += value;
} else if ($(this).is('select')) {
// If is a option from the select element
value = parseFloat($('option:selected', this).val()) || 0;
sum += value;
}
});
total.val(sum);
}
function initHandlers() {
inputs.on('keydown', function(e) {
let focusable, next;
if (e.keyCode == 13) {
focusable = inputs.filter(':visible');
next = focusable.eq(focusable.index(this) + 1);
if (next.length) {
next.focus();
}
return false;
}
});
inputs.change(calcAndShowTotal);
calcAndShowTotal();
}
$(function() {
console.log('ready!');
total = $('#total');
container = $('#housepriceguesslist');
inputs = container.find('input:checkbox, input:text, select');
initHandlers();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="housepriceguesslist">
Total: <input type="text" id="total" value="0" />
<br/>
<br/>
<select id="ilce">
<option value="0">Choose a state</option>
<option value="63999.50712318567">Adalar</option>
<option value="6259.918435398593">Ataşehir</option>
<option value="46285.35729304834">Beykoz</option>
<option value="54258.92953697798">Kadıköy</option>
<option value="-3500.620905653726">Kartal</option>
<option value="12889.41219909602">Maltepe</option>
<option value="-33711.83156847153">Pendik</option>
<option value="-34577.42485251657">Sancaktepe</option>
<option value="-52183.1608811019">Sultanbeyli</option>
<option value="-34760.71735007784">Tuzla</option>
<option value="-27379.87966213786">Çekmeköy</option>
<option value="-5332.203990418937">Ümraniye</option>
<option value="26485.33532820411">Üsküdar</option>
<option value="-18732.62070553167">Şile</option>
</select>
<select id="odasalon">
<option value="0">Choose room number</option>
<option value="5940.027623576261">1+0</option>
<option value="-1399.625767475593">1+1</option>
<option value="-3033.638999060459">2+1</option>
<option value="11519.83954756076">3+1</option>
<option value="-7018.52116545078">4+1</option>
<option value="-6008.081239150166">5+1</option>
</select>
m2: <input type="text" id="m2" />
Bina Yasi: <input type="text" id="binayasi" />
<br/>
<br/> Features:
<br/>
<br/>
<input type="checkbox" id="Bati" value="Bati" price="-783.4452683566533" /> <label for="Bati">Bati</label>
<br/>
<input type="checkbox" id="Dogu" value="Dogu" price="-4895.732009084263" /> <label for="Dogu">Dogu</label>
<br/>
<input type="checkbox" id="Guney" value="Guney" price="-2599.001349652765" /> <label for="Guney">Guney</label>
<br/>
<input type="checkbox" id="Kuzey" value="Kuzey" price="3832.013070771234" /> <label for="Kuzey">Kuzey</label>
<br/>
<input type="checkbox" id="Amerikan Mutfak" value="Amerikan Mutfak" price="2346.347889828301" /> <label for="Amerikan Mutfak">Amerikan Mutfak</label>
<br/>
<input type="checkbox" id="Dusakabin" value="Dusakabin" price="-176.5092353740256" /> <label for="Dusakabin">Dusakabin</label>
<br/>
<input type="checkbox" id="Akilli Ev" value="Akilli Ev" price="-4756.206384200719" /> <label for="Akilli Ev">Akilli Ev</label>
<br/>
<input type="checkbox" id="Ebeveyn Banyosu" value="Ebeveyn Banyosu" price="10135.50644456019" /> <label for="Ebeveyn Banyosu">Ebeveyn Banyosu</label>
<br/>
<input type="checkbox" id="Kiler" value="Kiler" price="-10693.49979821809" /> <label for="Kiler">Kiler</label>
<br/>
<input type="checkbox" id="Kuvet" value="Kuvet" price="-941.0629741243247" /> <label for="Kuvet">Kuvet</label>
<br/>
<input type="checkbox" id="Parke Zemin" value="Parke Zemin" price="-8453.847199707092" /> <label for="Parke Zemin">Parke Zemin</label>
<br/>
<input type="checkbox" id="Seramik Zemin" value="Seramik Zemin" price="1545.025601000643" /> <label for="Seramik Zemin">Seramik Zemin</label>
<br/>
<input type="checkbox" id="Sauna" value="Sauna" price="8677.708176289747" /> <label for="Sauna">Sauna</label>
<br/>
<input type="checkbox" id="Spor Salonu" value="Spor Salonu" price="1159.884679563385" /> <label for="Spor Salonu">Spor Salonu</label>
<br/>
<input type="checkbox" id="Tenis Kortu" value="Tenis Kortu" price="16065.26794172257" /> <label for="Tenis Kortu">Tenis Kortu</label>
<br/>
</div>
Note:
Remember to round the numbers to get more precision. The text modification will apply after you tab, or move to another element. So I added an enter listener so when you press enter is gonna move to the next element like when you press tab. Also, I moved the total to the top so you can see the results in the preview.
Update:
I recommend you to use the $(function(){}); to get the document when is ready. Inside you can assign the values of your elements. I notice that there was a bug in my code whenever ever you uncheck a checked element the Total should be 55435.04798, but it shows the double it is because total is also a text input.
Similar to Barmar's, I added all elements to the .each() loop but also added the .change() handler to all elements:
var context = $('#housepriceguesslist');
var elems = $('input:checkbox, input:text, select', context);
function calcAndShowTotal() {
var total = 55435.04798; // it is constant value which must be the beginning value.
elems.each(function() {
if ( $(this).is('input:checkbox:checked') ) {
total += parseFloat($(this).attr('price')) || 0;
} else if ( $(this).is('#m2') ) {
total += parseFloat($(this).val()) * 3134.204499 || 0;
} else if ( $(this).is('#binayasi') ) {
total += parseFloat($(this).val()) * -566.2202888 || 0;
} else if ( $(this).is('select') ) {
total += parseFloat($('option:selected',this).val()) || 0;
}
});
$('#total').val(total);
}
elems.change(calcAndShowTotal); // handlers
calcAndShowTotal(); // first run
See example here: https://jsfiddle.net/qgvsern4/1/
Related
I'm trying to implement a form in which you choose a shape from a select tag and it calculates the area and perimeter.
I just want when I select the Square option from the select, radius input disabled like the image.
Please do not use JQuery
Please do not use JQuery
Please do not use JQuery
here is my form please help me with .js file
<div class="container">
<hr class="lighter">
<label for="shapes">Shapes :</label>
<select name="shapes" id="shapes">
<option value="rectangle">Rectangle</option>
<option value="square">Square</option>
<option value="circle">Circle</option>
<option value="cylindrical">Cylindrical</option>
</select>
<br><br>
<lable for="radius">Radius : </lable>
<input type="number" id="radius" disabled><br>
<lable for="shapeWidth">Widht : </lable>
<input type="number" id="shapeWidth"><br>
<lable for="shapeHeight">Height :</lable>
<input type="number" id="shapeHeight">
<hr>
<label for="area" id="area_result">Area :</label>
<label for="area_result"></label>
<br>
<label for="primiter" id="primiter_result">Primiter :</label>
<label for="primiter_result"></label>
</div>
const eleId = document.getElementById("shapes");
const radiusId = document.getElementById("radius");
eleId.addEventListener(
"change",
function () {
if (this.value === "square") {
radiusId.disabled = true;
} else {
radiusId.disabled = false;
}
},
)
<div class="container">
<hr class="lighter" />
<label for="shapes">Shapes :</label>
<select name="shapes" id="shapes">
<option value="rectangle">Rectangle</option>
<option value="square">Square</option>
<option value="circle">Circle</option>
<option value="cylindrical">Cylindrical</option>
</select>
<br /><br />
<lable for="radius">Radius : </lable>
<input type="number" id="radius" /><br />
<lable for="shapeWidth">Widht : </lable>
<input type="number" id="shapeWidth" /><br />
<lable for="shapeHeight">Height :</lable>
<input type="number" id="shapeHeight" />
<hr />
<label for="area" id="area_result">Area :</label>
<label for="area_result"></label>
<br />
<label for="primiter" id="primiter_result">Primiter :</label>
<label for="primiter_result"></label>
</div>
Her is a vanilla JS version
I fixed some spelling and added a "please select"
window.addEventListener("DOMContentLoaded", () => { // when the page has loaded
document.getElementById("shapes").addEventListener("change", function() { // when the select is changed
document.getElementById("radius").disabled = ["rectangle","square"].includes(this.value); // disable if square or rectangle.
})
});
<div class="container">
<hr class="lighter">
<label for="shapes">Shapes :</label>
<select name="shapes" id="shapes">
<option value="">Please select</option>
<option value="rectangle">Rectangle</option>
<option value="square">Square</option>
<option value="circle">Circle</option>
<option value="cylindrical">Cylindrical</option>
</select>
<br><br>
<label for="radius">Radius : </label>
<input type="number" id="radius" ><br>
<label for="shapeWidth">Width : </label>
<input type="number" id="shapeWidth"><br>
<label for="shapeHeight">Height :</label>
<input type="number" id="shapeHeight">
<hr>
<label for="area" id="area_result">Area :</label>
<label for="area_result"></label>
<br>
<label for="perimeter" id="perimeter_result">Perimeter :</label>
<label for="perimeter_result"></label>
</div>
A label element should not be treated like the majority of other HTML elements in that it is not supposed to be used without being referenced to an input element of some type. So you should not use them to present content such as the calculation results as you do!
If you use a form around these various input controls you can use the often overlooked dotted notation to access these various form elements ( though many browsers permit accessing elements directly by ID without even requiring document.getElementById these days since HTML5 ) which is useful within any routines to perform the calculations as it reduces the code required.
// precision for floats
const precision=3;
const d=document;
// get reference to the parent form
const f=d.forms.calculator;
// event handler
const evthandler=function(e){
// ensure all disabled elements are re-enabled
f.querySelectorAll('input:disabled').forEach( input => input.disabled=false );
// named form inputs/outputs etc
let oSel=f.shapes;
let oArea=f.area;
let oPer=f.perimeter;
let oRad=f.radius;
let oWidth=f.shapeWidth;
let oHeight=f.shapeHeight;
// The currently selected `option`
let option=oSel.options[ oSel.options.selectedIndex ];
// access a named dataset to identify which elements to disable.
if( option.dataset.disable!=null ){
f[ option.dataset.disable ].disabled=true;
}
// do the calculations and show the results...
oArea.textContent=area( oSel.value, oWidth.value, oHeight.value, oRad.value );
oPer.textContent=perimeter( oSel.value, oWidth.value, oHeight.value, oRad.value );
};
const area=(shape,w,h,r)=>{
switch( shape ){
case 'square':
case 'rectangle':return w * h;
case 'circle':return ( Math.PI * Math.pow( r, 2 ) ).toFixed(precision);
case 'cylindrical':return ( 2 * Math.PI * Math.pow( r, 2 ) + 2 * Math.PI * r * h ).toFixed(precision);
}
};
const perimeter=(shape,w,h,r)=>{
switch( shape ){
case 'square':return 4 * Math.min(w,h);
case 'rectangle':return ( 2 * w ) + ( 2 * h );
case 'circle':return ( Math.PI * r * 2 ).toFixed(precision);
case 'cylindrical': return ( 2 * ( Math.PI * ( r * 2 ) ) ).toFixed(precision);
}
};
// assign the delegated event handler to respond to any change events
f.addEventListener('change', evthandler )
label{display:block;width:40%;clear:both;padding:0.5rem;}
label input,label select{float:right;width:60%;padding:0.25rem}
hr{margin:1rem 0}
output{color:green}
<div class='container'>
<hr class='lighter'>
<!--
Form added to group together form elements and allow
named access using dot notation.
labels correctly spelled and inputs nested within
so that <br /> tags can be replaced with CSS blocks
Added a dataset ( data-disable )
-->
<form name='calculator'>
<label>Shapes :
<select name='shapes'>
<option disabled hidden selected>Please select
<option data-disable='radius' value='rectangle'>Rectangle</option>
<option data-disable='radius' value='square'>Square</option>
<option value='circle'>Circle</option>
<option value='cylindrical'>Cylindrical</option>
</select>
</label>
<label>Radius: <input type='number' name='radius' min=0 step=1></label>
<label>Width: <input type='number' name='shapeWidth' min=0 step=1></label>
<label>Height: <input type='number' name='shapeHeight' min=0 step=1></label>
<hr />
<!--
output tags for displaying output rather than labels.
-->
<label>Area: <output name='area'></output></label>
<label>Perimeter: <output name='perimeter'></output></label>
</form>
</div>
I have two data list in the below snippet and the values of the selected option should be shown beside them.
My First(Account) one is working properly, but second(Head) one is not working. The value is not getting selected for Head.
/*List function starts*/
document.querySelector('input[list]').addEventListener('input', function(e) {
var input = e.target,
list = input.getAttribute('list'),
options = document.querySelectorAll('#' + list + ' option'),
hiddenInput = document.getElementById(input.getAttribute('id') + '-hidden'),
inputValue = input.value;
hiddenInput.value = inputValue;
for (var i = 0; i < options.length; i++) {
var option = options[i];
if (option.innerText === inputValue) {
hiddenInput.value = option.getAttribute('data-value');
break;
}
}
});
/*List function ends*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="accntid">Account: </label>
<input id="accntid" name="taccntlist" list="accnt_list" value="" placeholder="Account" required />
<datalist id="accnt_list">
<option data-value="001">Dummy1</option>
<option data-value="0000000">Dummy</option>
</datalist>
<input type="text" name="txtaccnt" id="accntid-hidden" readonly>
<br /><br /><br />
<label for="headid">Head: </label>
<input id="headid" name="txtheadlist" list="head_list" value="" placeholder="Head" required />
<datalist id="head_list">
<option data-value="1">d1</option>
<option data-value="0000000000">dummy</option>
</datalist>
<input type="text" name="txthead" id="headid-hidden" readonly>
<br /><br /><br />
I changed your js code, and added method forEach(), having previously declared the call to the inputs like this:
let inputs = document.querySelectorAll('input[list]');
This means that e.target is no longer necessary to use.
let inputs = document.querySelectorAll('input[list]');
inputs.forEach(function(current, index) {
current.addEventListener('input', function() {
list = current.getAttribute('list'),
options = document.querySelectorAll('#' + list + ' option'),
hiddenInput = document.getElementById(current.getAttribute('id') + '-hidden'),
inputValue = current.value;
hiddenInput.value = inputValue;
for (var i = 0; i < options.length; i++) {
var option = options[i];
if (option.innerText === inputValue) {
hiddenInput.value = option.getAttribute('data-value');
break;
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="accntid">Account: </label>
<input id="accntid" name="taccntlist" list="accnt_list" value="" placeholder="Account" required />
<datalist id="accnt_list">
<option data-value="001">Dummy1</option>
<option data-value="0000000">Dummy</option>
</datalist>
<input type="text" name="txtaccnt" id="accntid-hidden" readonly>
<br /><br /><br />
<label for="headid">Head: </label>
<input id="headid" name="txtheadlist" list="head_list" value="" placeholder="Head" required />
<datalist id="head_list">
<option data-value="1">d1</option>
<option data-value="0000000000">dummy</option>
</datalist>
<input type="text" name="txthead" id="headid-hidden" readonly>
<br /><br /><br />
I have a pizza ordering form that contains checkboxes for toppings. Each new Pizza is an object that is placed into an array. One of the variables inside the pizza object is toppings. I would like the toppingsvariable to contain an array of all the checkboxes name attribute. How do I do that?
I have made an attempt, but it doesn't seem to work:
HTML:
<fieldset>
<form class="pure-form">
<legend>
<center><label><b>Name: </b></label>
<select class="nameSelection" name="nameSelectionPizza">
<option value="0">Please Select:</option>
</select></center>
</legend>
<br>
<label><b>Pizza Type: </b></label>
<select class="pizza" name="firstMenu" disabled>
<option data-price="0">Please Select:</option>
<option name="margarita">Margarita</option>
<option name="deep-pan">Deep Pan</option>
<option name="stuffed-crust">Stuffed Crust</option>
</select>
<span style="float:right">
<label><b>Pizza Size: </b></label>
<select class="pizzaSize" disabled>
<option data-price="0">Please Select:</option>
<option name="e-small" data-price="4.99">Extra Small - £4.99</option>
<option name="small" data-price="5.99">Small - £5.99</option>
<option name="medium" data-price="6.99">Medium - £6.99</option>
<option name="large" data-price="8.99">Large - £8.99</option>
<option name="e-large" data-price="9.99">Extra Large - £9.99</option>
<option name="f-size" data-price="10.99">Family Size - £10.99</option>
</select>
</span>
</form>
</fieldset>
<fieldset style = "border-top:0px">
<form class="pure-form">
<legend><b>Toppings (99p Each): </b></legend>
<input type="checkbox" class="toppings" name="onions" disabled>Onions</input>
<input type="checkbox" class="toppings" name="mushrooms" disabled>Mushrooms</input>
<input type="checkbox" class="toppings" name="peppers" disabled>Peppers</input>
<input type="checkbox" class="toppings" name="olives" disabled>Olives</input>
<input type="checkbox" class="toppings" name="garlic" disabled> Garlic</input>
<input type="checkbox" class="toppings" name="peperoni" disabled>Peperoni</input>
<input type="checkbox" class="toppings" name="cheese" disabled>Pesto</input>
</form>
</fieldset>
JS:
var pizzaArray = new Array();
function pizza(number, pizzaCost, toppingCost, name, pizzaType, pizzaSize, toppings) {
this.pizzaNumber = number;
this.pizzaCost = pizzaCost;
this.toppingCost = toppingCost;
this.name = name;
this.type = pizzaType;
this.size = pizzaSize;
this.toppings = toppings;
}
var pizzaCounter = 1;
pizzaArray.push(new pizza(pizzaCounter, 0.00, 0.00, "", "", "", ""));
$(document).on("change","input[type='checkbox']", function() {
var topArray = $(":checkbox:checked").next('name').map(function(){
return $(this).attr('name');
}).get();
var checked = $(this).parent().find(":checkbox:checked").length;
var toppingCost = (0.99 * checked);
var form = $(this).closest('div').attr("id");
var formID = form.replace( /^\D+/g, '');
for(var i = 0; i < pizzaArray.length; i++) {
if (pizzaArray[i].pizzaNumber == formID) {
pizzaArray[i].toppingCost = toppingCost;
pizzaArray[i].toppings = topArray;
alert((pizzaArray[i].toppings).toString());
calculateCost();
}
}
});
The error is in your use of next('name'). Remove that and your code should work fine:
var topArray = $(".toppings:checked").map(function(){
return this.name;
}).get();
Note that I changed the selector to use the class of the checkboxes to save any issues if you add further checkboxes to the page in future. I also used the name property directly from the DOMElement to save creating a needless jQuery object.
function radioVal(){
//var radVal = document.mainForm.rads.value;
var radVal = document.getElementsByName("rads").value;
result.innerHTML = 'You selected: '+radVal;
}
<div class="pres">
<input type="radio" id="radio01" name="rads" value="10" checked />
<label for="radio01" class="dis"><span>1 time service</span></label>
</div>
<div class="pres">
<input type="radio" id="radio02" name="rads" value="20" />
<label for="radio02" class="dis"><span>Every week</span></label>
</div>
<div class="pres">
<input type="radio" id="radio03" name="rads" value="15" />
<label for="radio03" class="dis"><span>Every 2 weeks </span></label>
</div>
<div class="pres">
<input type="radio" id="radio04" name="rads" value="10" />
<label for="radio04" class="dis"><span>Every 4 weeks</span></label>
</div>
<input type="text" value="" id="result" name="perce" />
<input type="text" value="" id="txtservV" name="servicename" />
<input type="text" value="" id="final_pay" name="final_pay" />
Hello i am using this function to get the value of a selected radio button in a textfield name perce and its value in a field name servicename any one help me in it to sourt it out. I am using this function in doucument.ready function.
Use Document.getElementsByName function which returns array of elements (or better collection, array-like object), so that you can access value of input by index (0 in your case):
var perceVal = document.getElementsByName("perce")[0].value
In case of radio buttons you have to iterate through elements and find which one is checked:
var rads = document.getElementsByName("rads");
var radsValue;
for (var i = 0; i < rads.length; i++) {
if (rads[i].checked) {
radsValue = rads[i].value // here is checked radio
break;
}
}
I've seen similar questions posted and tried to change them to meet my needs but I don't know enough about javascript to do it. All I want to do is limit a form input to 2 characters if they select "state" as their search option. This is what I have:
function changeValue(){
var option=document.getElementById('searchtype').id;
if (option == ("A") || ("B") ){
document.getElementById('field').size="40";
}
else if(option=="C"){
document.getElementById('field').size="2";
<form action="results.php" method="post">
Search By:<br />
<select id="searchtype" name="searchtype" onchange="changeValue();">
<option id="A" value="name">Hospital Name<br /></option>
<option id="B" value="city">City</option>
<option id="C" value="state">State</option>
</select>
<br /><br />
Search:<br />
<input id="field" name="searchterm" type="text" size="0">
Am I doing something wrong or is there a better way to do this?
I used Jack's code below and added a field.size attribute so my input matched the max allowed characters: (thanks Jack)
script type="text/javascript">
function changeValue(dropdown) {
var option = dropdown.options[dropdown.selectedIndex].value,
field = document.getElementById('field');
if (option == 'name' || option == 'city') {
field.maxLength = 40;
field.size = 40;
} else if (option == 'state') {
field.value = field.value.substr(0, 2);
field.maxLength = 2;
field.size = 2;
}
}
</script>
<h1>Hospital Search</h1>
<form action="results.php" method="post">
Search By:<br />
<select id="searchtype" name="searchtype" onchange="changeValue(this);">
<option id="name" value="name">Hospital Name<br /></option>
<option id="city" value="city">City</option>
<option id="state" value="state">State</option>
</select><br />
Search:<br />
<input id="field" name="field" type="text" size="40">
</input>
After deciding a dropdown with a list of states would be better, I changed it to this:
<form action="results.php" method="post">
Hospital Name:<br />
<input name="searchterm_name" type="text" size="40">
<br />
<input type="submit" name="submit" value="Search">
</form><br />
<form action="results.php" method="get">
City Name:<br />
<input name="searchterm_city" type="text" size="40"><br />
<select name="select_state">
<option value="">None
<option value="AL" Selected>Alabama
<option value="AK">Alaska
<option value="AZ">Arizona
</SELECT>
<input type="submit" name="submit" value="Search">
</form>
ED: Using form method "post" caused the browser to throw a warning every time I hit the back button to get to the results page. I changed to "get" since the information is not sensitive and now it goes back w/o warning.
Set the maxlength property:
document.getElementById('field').maxlength = 2;
I realize now that the rest of the code is not likely to work:
function changeValue(dropdown) {
var option = dropdown.options[dropdown.selectedIndex].value,
field = document.getElementById('field');
if (option == 'name' || option == 'city') {
field.maxLength = 40;
} else if (option == 'state') {
field.value = field.value.substr(0, 2); // before reducing the maxlength, make sure it contains at most two characters; you could also reset the value altogether
field.maxLength = 2;
}
}
Then in your HTML:
<select id="searchtype" name="searchtype" onchange="changeValue(this);">
try this
function changeValue() {
var option2 = document.getElementById('searchtype').options[document.getElementById('searchtype').selectedIndex].id;
if (option2 == ("A") || option2 == ("B")) {
document.getElementById('field').size = "40";
}
else if (option2 == "C") {
document.getElementById('field').size = "2";
}
}
Try this.
document.getElementById('field').setAttribute('size', "10");