I have tried a thousand different tutorials and I'm pretty sure my code is correct, yet I can't get this to work. I'm trying to create a calculation that has a different value based on whether the user selects 'yes' or 'no'.
var people = document.getElementById('how-many');
people.onkeyup = function() {
guests = people.value;
if (document.getElementById('leftoversyes').checked) {
feeds = people.value * 2;
} else {
feeds = people.value * 1.5;
}
document.getElementById('turkey-number').innerHTML = guests;
document.getElementById('turkey-weight').innerHTML = feeds;
}
<form id="calculator">
<p>
<label for="how-many">How many people do you plan to feed?</label>
<br />
<input type="text" maxlength="3" name="how-many" id="how-many" />
</p>
<p>
<label for="leftovers">Would you like to have leftovers?</label>
<br />
<input type="checkbox" name="leftoversyes" value="Yes" id="leftoversyes" />Yes
<input type="checkbox" name="leftoversno" value="No" id="leftoversno" />No</p>
<p>
<input type="button" value="Calculate" id="calculate" class="btn" />
<input type="reset" value="clear" id="clearcalculator" />
</p>
</form>
<p>A <span id="turkey-weight"></span>-pound turkey will feed <span id="turkey-number"></span> guests<span id="turkey-leftovers"></span>.</p>
It works in that it will give me the multiply of 1.5, but nothing I do can get it to give me the multiply of 2.
Thanks in advance for the help!
You need to add another listener for when the value of <input type="checkbox" name="leftoversyes" value="Yes" id="leftoversyes" /> changes.
document.getElementById('leftoversyes').onchange = function() {
var guests = document.getElementById('how-many').value;
var feeds;
if (document.getElementById('leftoversyes').checked){
feeds = guests * 2;
} else {
feeds = guests * 1.5;
}
document.getElementById('turkey-number').innerHTML = guests;
document.getElementById('turkey-weight').innerHTML = feeds;
};
Which is identical to the original handler you wrote, so let's refactor it into:
function calculate() {
var guests = document.getElementById('how-many').value;
var feeds;
if (document.getElementById('leftoversyes').checked){
feeds = guests * 2;
} else {
feeds = guests * 1.5;
}
document.getElementById('turkey-number').innerHTML = guests;
document.getElementById('turkey-weight').innerHTML = feeds;
}
document.getElementById('how-many').onkeyup = calculate;
document.getElementById('leftoversyes').onchange = calculate;
Declare feeds variable , use onchange event of #leftovers element to call same function as onkeyup for #people element
var people = document.getElementById('how-many');
var leftovers = document.getElementById('leftoversyes');
function feeder() {
var feeds;
guests = people.value;
if (document.getElementById('leftoversyes').checked){
feeds = people.value * 2;
} else {
feeds = people.value * 1.5;
}
document.getElementById('turkey-number').innerHTML = guests;
document.getElementById('turkey-weight').innerHTML = feeds;
}
people.onkeyup = feeder;
leftovers.onchange = feeder;
<form id="calculator">
<p>
<label for="how-many">How many people do you plan to feed?</label><br />
<input type="text" maxlength="3" name="how-many" id="how-many" />
</p>
<p>
<label for="leftovers">Would you like to have leftovers?</label><br />
<input type="checkbox" name="leftoversyes" value="Yes" id="leftoversyes" /> Yes <input type="checkbox" name="leftoversno" value="No" id="leftoversno" /> No</p>
<p><input type="button" value="Calculate" id="calculate" class="btn" />
<input type="reset" value="clear" id="clearcalculator" /></p>
</form>
<p>A <span id="turkey-weight"></span>-pound turkey will feed <span id="turkey-number"></span> guests<span id="turkey-leftovers"></span>.</p>
Related
I need some help as I'm fairly new to JavaScript.
I wish to create a function that calculates a membership fee
I tried making a function in JavaScript that checks whether only one option has been selected, but I have no idea how to make it so that I can calculate the fee if a user is eligible for more than one or all discounts. There is no current JS for the age condition yet (between 60 and 80) as I am unsure how to do it.
function feeCalc() {
var ans = document.getElementById("answer");
if (document.getElementById('medicalCond-yes').checked) {
ans.value = calculate('medicalCond-yes');
}
if (document.getElementById('empstatus-yes').checked) {
ans.value = calculate('empstatus-yes');
}
if (document.getElementById('empstatus-no').checked) {
ans.value = calculate('empstatus-no');
}
if (document.getElementById('medicalCond-no').checked) {
ans.value = calculate('medicalCond-no');
}
}
function calculate(action) {
var standardRate = 10;
var ageRate = 0.1;
var medicalRate = 0.4;
var unemployedRate = 0.3;
var result;
switch (action) {
case 'medicalcond-yes':
discount = (standardRate * studentRate);
result = standardRate - discount;
break;
case 'empstatus-yes':
discount = (standardRate * unemployedRate);
result = standardRate - discount;
break;
case 'empstatus-no':
result = standardRate;
break;
case 'medicalcond-no':
result = standardRate;
break;
}
return result;
}
<div class="form">
<label>
Age
</label>
<input type="range" value="50" min="1" max="100" class="slider" id="age"/>
</div>
<div class="form">
<label>
Do you have any long-term medical conditions
that can affect daily life
</label>
<br/>
<input type="radio" name="status" value="yes" id="medicalCond-yes"/>Yes
<input type="radio" name="status" value="no" id="medicalCond-no"/>No
</div>
<div class="form">
<label>
Are you currently employed?
</label>
<br/>
<input type="radio" name="empstatus" value="yes" id="empstatus-yes"/>Yes
<input type="radio" name="empstatus" value="no" id="empstatus-no"/>No
</div>
<div class="form">
<label>
Membership Fee
</label>
<br/>
Total Fee:
<input type="text" id="answer" readonly/>
<input type="button" value="Calculate" onclick="feeCalc()"/>
</div>
Even though for the OP's problem it looks like over-engineering, the OP's provided code is nevertheless small enough in order to demonstrate the advantages of (more) generic approaches which are ...
Being forced to work with a clean HTML markup/structure as DOM and/or data base.
Decoupling (validation) code from very (business) case specific data like ... not depending anymore ...
on very specific DOM-element queries,
on "baked in" data for e.g. validation and edge case handling.
On long term base easier to maintain (in terms of changed business data) and to adapt to e.g. new discount options.
Especially the JavaScript code which implements a generic approach/behavior of cause is larger from the beginning than its very explicitly written competitor. But the former does not tend to grow or does not even need to get touched for new discount options or changed discount values. This part gets covered by cleaner more generic (hence reusable) substructures of the also generic calculator superstructure.
In addition such a generic component based approach automatically enables the usage of more than just one component at/within one and the same document.
function parseJson(str) {
let result;
try {
result = JSON.parse(str);
} catch (exc) {
result = null;
}
return result;
}
function getDevaluationFactorFromRange(formControl, range) {
let factor = 0;
range = parseJson(range);
if (range !== null) {
const controlValue = parseFloat(formControl.value);
Object
.entries(range)
.some(([devaluationKey, { min, max }]) => {
let isStopIteration = false;
if (
(controlValue >= parseFloat(min)) &&
(controlValue <= parseFloat(max))
) {
factor = parseFloat(devaluationKey);
isStopIteration = true;
}
return isStopIteration
});
}
return Number.isFinite(factor) ? factor : 0;
}
function getDevaluationFactor(formControl) {
const { dataset } = formControl;
let rawRange = dataset.devaluationRange ?? null;
let rawFactor = dataset.devaluationFactor ?? null;
let factor = (rawRange !== null)
? getDevaluationFactorFromRange(formControl, rawRange)
: 0;
factor = (
(factor === 0) && (rawFactor !== null) && parseFloat(rawFactor)
) || factor;
factor = Number.isFinite(factor) ? factor : 0;
if (factor !== 0) {
const { type } = formControl;
if ((type === 'radio') || (type === 'checkbox')) {
factor = formControl.checked ? factor : 0;
}
}
return factor;
}
function computeCurrentFee(rootNode, elmFee, baseFee) {
return Array
// array from `HTMLFormControlsCollection`
.from(rootNode.elements)
// calculate currrent fee from each form element's data
.reduce((currentFee, formControl) => {
return currentFee - (baseFee * getDevaluationFactor(formControl));
}, baseFee);
}
function updateCurrentValueAtBoundFeeContext(/*evt*/) {
const { rootNode, elmFee, baseFee } = this;
elmFee.value = computeCurrentFee(rootNode, elmFee, baseFee);
}
function displayCurrentValueAtBoundAgeContext(/*evt*/) {
const { elmRange, elmOutput } = this;
elmOutput.value = elmRange.value;
}
function initializeCurrentAgeDisplay(rootNode) {
const ageNode = rootNode.querySelector('[data-age-range]');
if (ageNode) {
const elmRange = ageNode.querySelector('input[type="range"]');
const elmOutput = ageNode.querySelector('output');
if (elmRange && elmOutput) {
const target = { elmRange, elmOutput };
const boundContextHandler =
displayCurrentValueAtBoundAgeContext.bind(target);
elmRange.addEventListener('input', boundContextHandler);
rootNode.addEventListener('reset', () =>
// decouple custom dom refresh from the system's one.
setTimeout(boundContextHandler, 0)
);
// display initial age value.
// // displayCurrentValueAtBoundAgeContext.call(target);
boundContextHandler();
}
}
}
function initializeMembershipFeeCalculator(rootNode) {
const DEFAULT_BASE_FEE = 10;
initializeCurrentAgeDisplay(rootNode);
const elmFeeValue = rootNode.querySelector('[data-fee-value]');
if (elmFeeValue) {
const baseFee = parseFloat(rootNode.dataset.baseFee);
const target = {
rootNode,
elmFee: elmFeeValue,
baseFee: Number.isFinite(baseFee) ? baseFee : DEFAULT_BASE_FEE,
};
const boundContextHandler =
updateCurrentValueAtBoundFeeContext.bind(target);
rootNode.addEventListener('input', boundContextHandler);
rootNode.addEventListener('reset', () =>
// decouple custom dom refresh from the system's one.
setTimeout(boundContextHandler, 0)
);
// compute initial fee value.
// // updateCurrentValueAtBoundFeeContext.call(target);
boundContextHandler();
rootNode.addEventListener('submit', evt => {
evt.preventDefault();
return false;
});
}
}
function main() {
document
.querySelectorAll('form[data-membership-fee-calculator]')
.forEach(initializeMembershipFeeCalculator);
}
main();
body, form {
margin: 0;
padding: 0;
}
form {
float: left;
width: 50%;
margin-top: -2px;
}
fieldset {
position: relative;
margin: 0 0 2px 0;
padding: 0 10px 2px 10px;
}
fieldset p {
margin: 1px 0 2px 0;
}
fieldset output {
color: #333;
font-weight: bolder;
}
label {
display: inline-block;
}
input[type="range"] {
width: 70%;
}
[data-age-range] output {
display: inline-block;
overflow: hidden;
max-width: 25%;
max-height: 1.2em;
position: relative;
top: 1px;
}
[type="reset"] {
position: absolute;
right: 4px;
top: -4px;
}
<form data-membership-fee-calculator data-base-fee="10">
<fieldset data-age-range>
<legend>
Age
</legend>
<input
type="range"
name="age" id="age"
value="50" min="1" max="100"
data-devaluation-range='{"0.1":{"min":60,"max":80}}'
/>
<output for="age">### not yet computed ###</output>
</fieldset>
<fieldset>
<p>
Do you have any long-term medical conditions
that can affect daily life?
</p>
<label>
<input
type="radio"
name="status"
value="yes"
data-devaluation-factor="0.4"
/>
<span class="label-copy">
Yes
</span>
</label>
<label>
<input type="radio" name="status" value="no" />
<span class="label-copy">
No
</span>
</label>
</fieldset>
<fieldset>
<p>
Are you currently employed?
</p>
<label>
<input
type="radio"
name="empstatus"
value="yes"
data-devaluation-factor="0.3"
/>
<span class="label-copy">
Yes
</span>
</label>
<label>
<input type="radio" name="empstatus" value="no" />
<span class="label-copy">
No
</span>
</label>
</fieldset>
<fieldset>
<legend>
Membership Fee
</legend>
<label>
<span class="label-copy">
Total Fee:
</span>
<output data-fee-value>### not yet computed ###</output>
</label>
<button type="reset">Restore base fee</button>
</fieldset>
</form>
<form data-membership-fee-calculator data-base-fee="20">
<fieldset data-age-range>
<legend>
Age
</legend>
<input
type="range"
name="age" id="age"
value="21" min="1" max="100"
data-devaluation-range=
'{"0.05":{"min":60,"max":69},"0.1":{"min":70,"max":79},"0.2":{"min":80,"max":120}}'
/>
<output for="age">### not yet computed ###</output>
</fieldset>
<fieldset>
<p>
Do you have any long-term medical conditions
that can affect daily life?
</p>
<label>
<input
type="radio"
name="status"
value="yes"
data-devaluation-factor="0.3"
/>
<span class="label-copy">
Yes
</span>
</label>
<label>
<input type="radio" name="status" value="no" />
<span class="label-copy">
No
</span>
</label>
</fieldset>
<fieldset>
<p>
Are you currently employed?
</p>
<label>
<input
type="radio"
name="empstatus"
value="yes"
data-devaluation-factor="0.3"
/>
<span class="label-copy">
Yes
</span>
</label>
<label>
<input type="radio" name="empstatus" value="no" />
<span class="label-copy">
No
</span>
</label>
</fieldset>
<fieldset>
<legend>
Membership Fee
</legend>
<label>
<span class="label-copy">
Total Fee:
</span>
<output data-fee-value>### not yet computed ###</output>
</label>
<button type="reset">Restore base fee</button>
</fieldset>
</form>
Instead of switch-case routing into a single branch, you probably want to check through all cases in one go.
function feeCalc() {
var ans = document.getElementById("answer");
ans.value = calculateRate();
}
function calculateRate() {
let discount = 0;
const age = Number(document.getElementById('age').value);
if (age >= 60 && age <= 80) {
discount += 0.1;
}
if (document.getElementById('medicalCond-yes').checked) {
discount += 0.4;
}
if (document.getElementById('empstatus-no').checked) {
discount += 0.3;
}
return 1 - discount;
}
<div class="form">
<label>
Age
</label>
<input type="range" value="50" min="1" max="100" class="slider" id="age"/>
</div>
<div class="form">
<label>
Do you have any long-term medical conditions
that can affect daily life
</label>
<br/>
<input type="radio" name="status" value="yes" id="medicalCond-yes"/>Yes
<input type="radio" name="status" value="no" id="medicalCond-no"/>No
</div>
<div class="form">
<label>
Are you currently employed?
</label>
<br/>
<input type="radio" name="empstatus" value="yes" id="empstatus-yes"/>Yes
<input type="radio" name="empstatus" value="no" id="empstatus-no"/>No
</div>
<div class="form">
<label>
Membership Fee
</label>
<br/>
Total Fee:
<input type="text" id="answer" readonly/>
<input type="button" value="Calculate" onclick="feeCalc()"/>
</div>
I need some guidance in how to add my selection list to my total. I am still new to javascript so i did what i could but for some reason, i cannot figure out how to add the selection list to my total. the textboxes with 0.00 are there for me to see if the radios, checkboxes and selection are adding up properly.
``
`
function customerInfo(cName){
var dinerName = document.getElementById(cName).value;
document.getElementById('cust_name').innerHTML = dinerName;
}
// format val to n number of decimal places
function formatDecimal(val, n) {
n = n || 2;
var str = "" + Math.round ( parseFloat(val) * Math.pow(10, n) );
while (str.length <= n) {
str = "0" + str;
}
var pt = str.length - n;
return str.slice(0,pt) + "." + str.slice(pt);
}
function getRadioVal(form, name) {
var radios = form.elements[name];
var val;
for (var i=0, len=radios.length; i<len; i++) {
if ( radios[i].checked == true ) {
val = radios[i].value;
break;
}
}
return val;
}
function getToppingsTotal(e) {
var form = this.form;
var val = parseFloat( form.elements['tops_tot'].value );
if ( this.checked == true ) {
val += parseFloat(this.value);
} else {
val -= parseFloat(this.value);
}
form.elements['tops_tot'].value = formatDecimal(val);
updatePizzaTotal(form);
}
function getSizePrice(e) {
this.form.elements['sz_tot'].value = parseFloat( this.value );
updatePizzaTotal(this.form);
}
function getDeliveryPrice(e){
selectElement = document.querySelector('#pick_delivery');
output = selectElement.options[selectElement.selectedIndex].value;
console.log(output);
}
function updatePizzaTotal(form) {
var sz_tot = parseFloat( form.elements['sz_tot'].value );
var tops_tot = parseFloat( form.elements['tops_tot'].value );
form.elements['total'].value = formatDecimal( sz_tot + tops_tot );
}
// removes from global namespace
(function() {
var form = document.getElementById('pizzaForm');
var el = document.getElementById('pizza_toppings');
// input in toppings container element
var tops = el.getElementsByTagName('input');
for (var i=0, len=tops.length; i<len; i++) {
if ( tops[i].type === 'checkbox' ) {
tops[i].onclick = getToppingsTotal;
}
}
var sz = form.elements['size'];
for (var i=0, len=sz.length; i<len; i++) {
sz[i].onclick = getSizePrice;
}
// set sz_tot to value of selected
form.elements['sz_tot'].value = formatDecimal( parseFloat( getRadioVal(form, 'size') ) );
updatePizzaTotal(form);
})(); // end remove from global namespace and invoke
<form name="pizzaOrder" method="post" id="pizzaForm" enctype="text/plain">
<fieldset style="width: 60%;">
<legend>Create Your Pizza</legend>
<h3>Customer's Name:</h3>
<p>
<input type="text" name="client_name" id="client_name" value="First and Last Name" size="30" value="" />
<input type="button" onclick="customerInfo('client_name')" value="Enter"></button>
</p>
<h3>Pick Your Size:</h3>
<p>
<label><input type="radio" name="size" value="8" /> Small</label>
<label><input type="radio" name="size" value="10" /> Medium</label>
<label><input type="radio" name="size" value="12" /> Large</label>
<label><input type="radio" name="size" value="14" checked/> Extra Large</label>
<input type="text" name="sz_tot" value="0.00" />
</p>
<h3>Pick Your Toppings</h3>
<p id="pizza_toppings">
<label><input type="checkbox" name="Pineapple" value="1.50" /> Pineapple</label>
<label><input type="checkbox" name="Onions" value="1.50" /> Onions </label>
<label><input type="checkbox" name="Ham" value="1.50" /> Ham</label>
<label><input type="checkbox" name="Sausage" value="1.50" /> Sausage</label>
<label><input type="checkbox" name="Pepperoni" value="1.50" /> Pepperoni</label>
<input type="text" name="tops_tot" value="0.00" />
</p>
<h3>Delivery Or Pick Up</h3>
<p>
<select class="delivery" id="pick_delivery" size="2">
<option value="0">Pick Up: Free</option>
<option value="2">Delivery: $2</option>
</select>
<input type="button" onclick="getDeliveryPrice()" id="delivery_pick" value="enter" /></button>
</p>
<p>
<label>Total: $ <input type="text" name="total" class="num" value="0.00" readonly="readonly" /></label>
</p>
<p>
<input type="button" value="Confirm" />
<input type="button" value="Cancel">
</p>
</fieldset>
</form>
<div>
<h2>Your Order:</h2>
<p>
<h4>Your Name: <span id="cust_name"> </span></h4>
<h4>Your Pizza Size:</h4>
<h4>Toppings Selected:</h4>
</p>
</div>
</fieldset>
</form>```
On the bottom of the page the results should look similar to this:
Your Name: Pam Love
Pizza Size Selected: Extra Large
Toppings Selected: Bacon, Pineapple, Ham
Total: 20.50
When clicked on confirm order, the onclick button should redirect the page to a new tab that says:
Your order will be ready in 20 minutes.
or if cancelled then the user clicks the cancel button also redirected to a new tab:
Your order is cancelled.
You can just use some css selectors to accomplish most of this.
Here is how you can get your selected size:
document.querySelector('input[type="radio"][name="size"]:checked').value
And here is how you can get the list of toppings:
[...document.querySelectorAll('input[type="checkbox"][name="topping"]:checked')].map((t) => t.value).join(', ')
The remaining things should be pretty easy to find using querySelector or getElementById
I'm trying to configure a live caluator based on the Input of a form field.
My problem is, that I simply can not figure out how I would display the result on the Website.
<label class="contactform-label" for="contactform-member"><span class="contact_form_span">Member*:</span> </label>
<input class="contactform-input" type="text" id="contactform-member" placeholder="Member" name="member" value="" />
<span id="member-kosten">
<script type="text/javascript">document.write(ausgabe)</script>
</span>
var price = 90;
var member = document.getElementById("contactform-member").value;
var calculate = Math.sqrt(price * member);
var ausgabe = (calculate);
Use this code:
function fun(){
var price = 90;
var member = document.getElementById("contactform-member").value;
var calculate = Math.sqrt(price * member);
var ausgabe = (calculate);
document.getElementById("member-kosten").innerHTML = ausgabe;
}
<label class="contactform-label" for="contactform-member"><span class="contact_form_span">Member*:</span> </label>
<input class="contactform-input" type="text" id="contactform-member" placeholder="Member" name="member" value="" onkeyup="fun()" />
<span id="member-kosten">
</span>
Set the html of element member-kosten from the script (last line):
var price = 90;
var member = document.getElementById("contactform-member").value;
var calculate = Math.sqrt(price * member);
document.getElementById("member-kosten").innerHTML = calculate;
<label class="contactform-label" for="contactform-member"><span class="contact_form_span">Member*:</span> </label>
<input value="10" class="contactform-input" type="text" id="contactform-member" placeholder="Member" name="member" value="" />
<span id="member-kosten">
</span>
I'm making an html question form. Based on the answers, it performs JavaScript algorithms. Then JavaScript takes the numbers it calculated and uses document.getElementById to put the answers in a hidden html form. PHP puts the form into variables, and updates the MYSQL row that was selected. I didn't show the actual calculations because it is over 300 lines of code. The values in the database are blank every time I click submit. Thanks to anyone who can help me out!!!
<html>
<form method="post" id="formformid">
//These are where the JavaScript values are entered.
<input class="hidden" name="processfnumaa" id="processfnum" type="number" value="0">
<input class="hidden" name="technologyfnumaa" id="technologyfnum" type="number" value="0">
<input class="hidden" name="staffingfnumaa" id="staffingfnum" type="number" value="0">
<input class="hidden" name="Question4aa" id="Question4aa" type="text">
<input class="hidden" name="Question5aa" id="Question5aa" type="text">
<input class="hidden" name="Question6aa" id="Question6aa" type="text">
<input class="hidden" name="Question7aa" id="Question7aa" type="text">
<input class="hidden" name="Question8aa" id="Question8aa" type="text">
<input class="hidden" name="Question9aa" id="Question9aa" type="text">
<input class="hidden" name="Question10aa" id="Question10aa" type="text">
<input class="hidden" name="Question11aa" id="Question11aa" type="text">
<input class="hidden" name="Question12aa" id="Question12aa" type="text">
<input class="hidden" name="Question13aa" id="Question13aa" type="text">
<input class="hidden" name="Question14aa" id="Question14aa" type="text">
<input class="hidden" name="Question15aa" id="Question15aa" type="text">
<input class="hidden" name="Question16aa" id="Question16aa" type="text">
<input class="hidden" name="Question17aa" id="Question17aa" type="text">
<input class="hidden" name="Question18aa" id="Question18aa" type="text">
<input class="hidden" name="Question19aa" id="Question19aa" type="text">
<input class="hidden" name="Question20aa" id="Question20aa" type="text">
<input class="hidden" name="Question21aa" id="Question21aa" type="text">
<input class="hidden" name="Question22aa" id="Question22aa" type="text">
<input class="hidden" name="Question23aa" id="Question23aa" type="text">
<input class="hidden" name="Question24aa" id="Question24aa" type="text">
<input class="hidden" name="Question25aa" id="Question25aa" type="text">
<input type="button" id="savebutton" onclick="submitthatform()" value="Save Changes" style="display: none;" />
</form>
//This function is called when the user is done editing the answers in a different form.
<script type="text/javascript">
function submitthatform() {}
document.getElementById("Question4aa").value = a;
document.getElementById("Question5aa").value = b;
document.getElementById("Question6aa").value = c;
document.getElementById("Question7aa").value = d;
document.getElementById("Question8aa").value = e;
document.getElementById("Question9aa").value = f;
document.getElementById("Question10aa").value = g;
document.getElementById("Question11aa").value = h;
document.getElementById("Question12aa").value = i;
document.getElementById("Question13aa").value = j;
document.getElementById("Question14aa").value = k;
document.getElementById("Question15aa").value = l;
document.getElementById("Question16aa").value = m;
document.getElementById("Question17aa").value = n;
document.getElementById("Question18aa").value = o;
document.getElementById("Question19aa").value = p;
document.getElementById("Question20aa").value = q;
document.getElementById("Question21aa").value = r;
document.getElementById("Question22aa").value = s;
document.getElementById("Question23aa").value = t;
document.getElementById("Question24aa").value = u;
document.getElementById("Question25aa").value = v;
var awsasdg = document.getElementById("Question4aa").value;
alert(awsasdg);
document.getElementById("processfnum").value = processfinalnumber;
document.getElementById("technologyfnum").value = technologyfinalnumber;
document.getElementById("staffingfnum").value = staffingfinalnumber;
document.getElementById("formformid").submit();
}
</script>
</html>
<?php
//Here, I'm trying to update a row in my database. This is just the part of the file that ends up blank in the database.
$Question4aa = mysql_real_escape_string($_POST['Question4aa']);
$Question5aa = mysql_real_escape_string($_POST['Question5aa']);
$Question6aa = mysql_real_escape_string($_POST['Question6aa']);
$Question7aa = mysql_real_escape_string($_POST['Question7aa']);
$Question8aa = mysql_real_escape_string($_POST['Question8aa']);
$Question9aa = mysql_real_escape_string($_POST['Question9aa']);
$Question10aa = mysql_real_escape_string($_POST['Question10aa']);
$Question11aa = mysql_real_escape_string($_POST['Question11aa']);
$Question12aa = mysql_real_escape_string($_POST['Question12aa']);
$Question13aa = mysql_real_escape_string($_POST['Question13aa']);
$Question14aa = mysql_real_escape_string($_POST['Question14aa']);
$Question15aa = mysql_real_escape_string($_POST['Question15aa']);
$Question16aa = mysql_real_escape_string($_POST['Question16aa']);
$Question17aa = mysql_real_escape_string($_POST['Question17aa']);
$Question18aa = mysql_real_escape_string($_POST['Question18aa']);
$Question19aa = mysql_real_escape_string($_POST['Question19aa']);
$Question20aa = mysql_real_escape_string($_POST['Question20aa']);
$Question21aa = mysql_real_escape_string($_POST['Question21aa']);
$Question22aa = mysql_real_escape_string($_POST['Question22aa']);
$Question23aa = mysql_real_escape_string($_POST['Question23aa']);
$Question24aa = mysql_real_escape_string($_POST['Question24aa']);
$Question25aa = mysql_real_escape_string($_POST['Question25aa']);
$processfnumaa = mysql_real_escape_string($_POST['processfnumaa']);
$technologyfnumaa = mysql_real_escape_string($_POST['technologyfnumaa']);
$staffingfnumaa = mysql_real_escape_string($_POST['staffingfnumaa']);
if($_SERVER['REQUEST_METHOD'] === 'POST'){
mysql_query("UPDATE HuronForm1 SET Question4aa='$question4aa',Question5aa='$question5aa',Question6aa='$question6aa',Question7aa='$question7aa',Question8aa='$question8aa',Question9aa='$question9aa',Question10aa='$question10aa',Question11aa='$question11aa',Question12aa='$question12aa',Question13aa='$question13aa',Question14aa='$question14aa',Question15aa='$question15aa',Question16aa='$question16aa',Question17aa='$question17aa',Question18aa='$question18aa',Question19aa='$question19aa',Question20aa='$question20aa',Question21aa='$question21aa',Question22aa='$question22aa',Question23aa='$question23aa',Question24aa='$question24aa', processfnum='$processfnumaa', technologyfnum='$technologyfnumaa',staffingfnum='$staffingfnumaa',Question25aa='$question25aa' WHERE Id='$idchosen'");
}
?>
Maybe you would use the same case for variables?
If you have var $Question4aa, it should be the same in mysql string, not $question4aa
I have a form that I need to figure out the code on how to make sure a radio button is selected
Here is the form
<body>
<div id="content">
<p>Enter the values below and click "Calculate".</p>
<label for="length">Length:</label>
<input type="text" id="length" /><br />
<label for="width">Width:</label>
<input type="text" id="width" /><br />
<label for="answer">Answer:</label>
<input type="text" id="Answer" disabled="disabled" /><br />
<input type="radio" name="Area" value="Area" check="checked"/>Area<br />
<input type="radio" name="Parimeter" value="Parimeter" />Parimeter<br />
<label> </label>
<input type="button" id="calculate" value="Calculate" /><br />
</div>
</body>
</html>
here is the code
var $ = function (id) {
return document.getElementById(id);
}
var calculate_click = function () {
var length = parseFloat( $("length").value );
var width = parseFloat( $("width").value );
// $("area").value = "";
if (isNaN(length) || length <= 0) {
alert("Length must be a valid number\nand greater than zero.");
} else if(isNaN(width) || width <= 0) {
alert("Width must be a valid number\nand greater than zero.");
}
} else {
var area = width * length;
var perimeter = 2 * width + 2 * length;
$("area").value = area.toFixed(2);
$("perimeter").value = perimeter.toFixed(2);
}
}
window.onload = function () {
$("calculate").onclick = calculate_click;
$("length").focus();
}
Here are some links that may help you finish your homework:
http://www.w3schools.com/html/html_forms.asp
http://www.w3schools.com/jquery/default.asp
http://jsfiddle.net