Converting HTML functions into PHP scripts. (two select values to multiply) [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
My job is to convert the following javascript functions into PHP and display the correct results. How do you use PHP to multiply the two values of the NumA and NumB select options? The discount must be displayed in the discount input box, as well as the grand total in the total input box. I am having difficulties creating a PHP script that takes the two selected options's values and multiplies them, while displaying the two results in the boxes below.
This is the HTML code with the functions that I need to convert to PHP.
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script>
var numA = 0;
function totalA(valA) {
if (valA) {
numA = Number(valA);}
var disc = numB*numA;
var totalCost = (numA - disc);
document.getElementById("total").value = "$" + totalCost.toFixed(2);
document.getElementById("discount").value = "$" + disc.toFixed(2);}
var numB = 0;
function totalB(valB) {
if (valB) {
numB = Number(valB);}
var disc = numB*numA;
var totalCost = (numA - disc);
document.getElementById("total").value = "$" + totalCost.toFixed(2);
document.getElementById("discount").value = "$" + disc.toFixed(2);}
</script>
</head>
<div align="center">
<br>
<form name id="Main">
<select id="numA" placeholder="Please select a service" onchange="totalA(this.value);">
<option value="" disabled selected>Select your service</option>
<option value="125">Makeover</option>
<option value="60">Hair Styling</option>
<option value="35">Manicure</option>
<option value="200">Permanent Makeup</option>
</select>
<br><br>
<select id="NumB" placeholder="Please select the discount" onchange="totalB(this.value);">
<option value="" disabled selected>Select the discount</option>
<option value="0">0%</option>
<option value=".1">10%</option>
<option value=".2">20%</option>
</select>
<br><br>
<td>Discount Coupon: <input id="discount" name="showTotal" type="text" value="$0.00" size="10" readonly/></td>
<td>Grand Total: <input id="total" name="showTotal" type="text" value="$0.00" size="10" readonly=""/></td>
<br><br>
</form>
<hr>
</div>
</html>

First update your form:
<form action="" method="post">
<select name="service" id="service" placeholder="Please select a service">
<option value="" disabled selected>Select your service</option>
<option value="125">Makeover</option>
<option value="60">Hair Styling</option>
<option value="35">Manicure</option>
<option value="200">Permanent Makeup</option>
</select>
<br><br>
<select name="discount" id="discount" placeholder="Please select the discount">
<option value="" disabled selected>Select the discount</option>
<option value="0">0%</option>
<option value=".1">10%</option>
<option value=".2">20%</option>
</select>
<br><br>
<button type="submit">Calculate</button>
</form>
Process the form submission with PHP (Calculate total cost & discount):
<?php
$service = isset($_POST['service']) ? $_POST['service'] : 0;
$discount = isset($_POST['discount']) ? $_POST['discount'] : 0;
$total_discount = number_format($discount * $service, 2);
$total_cost = number_format($service - $total_discount, 2);
?>
Finally, display the total cost & discount:
<p>Discount Coupon: <input id="discount" type="text" value="&dollar;<?php echo $total_discount; ?>"/></p>
<p>Grand Total: <input id="total" type="text" value="&dollar;<?php echo $total_cost; ?>"/></p>

Related

Changing Variable in forms onclick

Okay guys... I've built an eCommerce site for my wife, who sells eLiquids.. The problem I am having has to do with the e-junkie cart I'm using... I am trying to change the hidden value of "amount" when a bottle size is selected from a dropdown box.. I would like the "amount" value to change depending on each size selection... nothing i've tried has worked.. here's the snippet
<form action="https://www.e-junkie.com/ecom/fgb.php?c=cart&cl=1&ejc=2" target="ej_ejc" method="POST">
<input type="hidden" name="amount" value="12.00"/>
<input type="hidden" name="quantity" value="1"/>
Bottle Size:
<input type="hidden" name="on1" value="Size"/>
<select name="os1" >
<option value="15">15 ML</option><option value="30">30 ML</option>
<option value="50">50 ML</option>
</select><br>
<input type="hidden" name="shipping2" value="0.5">
<input type="hidden" name="handling" value="0.5">
<input type="hidden" name="tax" value="0.50"/>
<input type="hidden" name="return_url" value="http://www.e-junkie.com/"/>
<input type="hidden" name="currency_code" value="USD"/>
<input type="image" src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" onClick="javascript:return EJEJC_lc(this.parentNode);">
I've tried using onClick with the on1, but it doesn't change the amount value...
I'm trying to change the hidden "amount" value to either 12 20 or 30 depending on which size is selected... any help would be great
You can change the value of the amount field by assigning an onchange function to the os1 select box. Here is an example javascript function:
function changePrice() {
var size = document.getElementById('os1').value;
var price = 12;
switch(size){
case '15':
price = 12;
break;
case '30':
price = 20;
break;
case '50':
price = 30;
break;
}
document.getElementById('amount').value = price;
}
You would then also need to give you amount input an ID:
<input type="hidden" name="amount" value="12.00" id="amount" />
And give the select box an ID, and assign it an onclick event:
<select name="os1" id="os1" onchange="changePrice();">
<option value="15">15 ML</option>
<option value="30">30 ML</option>
<option value="50">50 ML</option>
</select>
However - I don't recommend doing this if you are dealing with payments. It would be too easy for someone to change the amount value themselves in their browser and submit any amount they want to the payment process. At the very least you need to validate the bottle size and amount to pay on your server before processing the payment to prevent this kind of attack.
This is not nice and raw JavaScript but it should work for you.
Change
<input type="hidden" name="amount" value="12.00"/>
to
<input type="hidden" id="amount" name="amount" value="12.00"/>
And change:
<select name="os1" >
<option value="15">15 ML</option><option value="30">30 ML</option>
<option value="50">50 ML</option>
</select><br>
to
<select id="os1" name="os1" >
<option value="15">15 ML</option><option value="30">30 ML</option>
<option value="50">50 ML</option>
</select><br>
And finally change:
<input type="image" src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" onClick="javascript:return EJEJC_lc(this.parentNode);">
To
<input type="image" src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" onClick="return changeCost();">
<script type="text/javascript">
function changeCost(){
var amountElm = document.getElementById("amount");
var selectList = document.getElementById("os1");
var selectedValue = selectList .options[selectList .selectedIndex].value;
if(selectedValue == "15"){
amountElm.value "12.00";
}else if(selectedValue == "30"){
amountElm.value "20.00";
}else if(selectedValue == "50"){
amountElm.value "30.00";
}
return true;
}
</script>

Is it possible change some text along with some number...inside or outside the textbox onchange dropdown [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have a textbox which displays area(of square) in different units onchange dropdown...I was trying to display the units(like 54 sqm or 45 sqfeet) along with the value of area inside the text box......
or the units outside the textbox....
Please help.
<body>
<form>
Select unit:
<select id="myList" onchange="myFunction(this.value);prop(this.value)">
<option>
</option>
<option value="1">
meter
</option>
<option value="3.29">
Feet
</option>
<option value="4">
Inches
</option>
<option value="7">
centimeter
</option>
<option value="2">
meter
</option>
</select>
</br>
select decimal points:
<select id="g" onchange="myFunction('myList',this.id);prop('myList',this.id)"
;>
<option value="0">
</option>
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
<option value="4">
4
</option>
<option value="5">
5
</option>
<option value="6">
6
</option>
</select>
<p> diameter:
<input type="text" id="txtdia" onchange="myFunction();prop()" ;/>
</div>
</p>
<p>
Your new diameter is:
<input type="text" id="favorite" size="20" onchange="myFunction()">
</p>
<p>
Your Circumference is:
<input type="text" id="circum" size="20" />
<input type="button" value="calculate" onclick="prop()" />
</p>
</form>
<script>
function myFunction() {
var mylist = document.getElementById("myList");
//var dia=null;
var dia = document.getElementById("txtdia").value;
var g = document.getElementById("g");
var g = g.options[g.selectedIndex].value;
var newdia = dia / myList.options[myList.selectedIndex].value;
document.getElementById("favorite").value = newdia.toPrecision(g);}
function prop() {
var dia = document.getElementById("txtdia").value;
var myList = document.getElementById("myList");
var g = document.getElementById("g");
var g = g.options[g.selectedIndex].value;
var circumf = dia * 3.14 / myList.options[myList.selectedIndex].value;
document.getElementById("circum").value = circumf.toPrecision(g);}
</script>
Inside your prop() function, the last line, change it to:
document.getElementById("circum").value = circumf.toPrecision(g) + " " + myList.options[myList.selectedIndex].text;
Inside your myFunction() function, the last line, change it to:
document.getElementById("favorite").value = newdia.toPrecision(g) + " " + myList.options[myList.selectedIndex].text;
Maybe that's what you're looking for? It basically just adds a space and the text value of the selected dropdown option to your text field

Don't display number greater than 72

I have a sample site here.
In the bottom of the document, there's a section labeled 'Potential Gen Ed TOC'.
If you open the Accordion labeled Composition, you'll see dropdown menus on the right.
As you can see, in this JavaScript, it was based on whether or not a checkbox was activated. Then the 'Potential Gen Ed TOC' would display a number based on the assigned value.
$(function($) {
var sum = 0;
$('#CourseMenu :checkbox').click(function() {
sum = 0;
$('#CourseMenu :checkbox:checked').each(function(idx, elm) {
sum += parseInt(elm.value, 10);
});
$('#total_potential').html(sum);
});
});
As you continue to check boxes throughout the different courses, a sum would be displayed.
What' I'm trying to do now, is eliminate the checkbox trigger in the JS. I've replaced them with dropdown menus that say, "Credits - Select Credit".
Whenever someone selects a value, the "Potential Gen Ed TOC" slowly increases based on that value.
I would assume that all I have to do is assign value="Any Number" and the JavaScript would pick up on that.
In the JavaScript (above), I'm having trouble accounting for pulling these values from the dropdown menus. As you can see the JS is based on checked boxes.
Once I'm able to pull values from the dropdown menu, I want to have these values add up, but never display a number higher than 72, no matter how many total transfer credits are selected.
Does that make sense?
Edit: Here is some markup to understand where I'm trying to pull the values from (dropdown menu)...
<fieldset name = Comunication>
<legend>Transfer Course Information</legend>
<label for="School Int.">School Int.</label>
<input name="School Int." type="text" size="6" maxlength="6" />
<label for="ID">ID</label>
<input name="ID" type="text" id="ID" size="8" />
<label for="Name">Name</label>
<input name="Name" type="text" id="Name" size="25" />
<label for="Grade">Grade</label>
<input name="Grade" type="text" id="Grade" size="2" />
<label for="COM1"></label>
<form id="form2" name="form2" method="post" action="">
<label for="Credits">Credits</label>
<select name="Credits" id="Credits">
<option value="0">Select Credit</option>
<option value="0.67">1 QtrCr.</option>
<option value="1.33">2 QtrCr.</option>
<option value="2.00">3 QtrCr.</option>
<option value="2.67">4 QtrCr.</option>
<option value="3.33">5 QtrCr.</option>
<option value="4.00">6 QtrCr.</option>
<option value="4.67">7 QtrCr.</option>
<option value="5.33">8 QrtCr.</option>
<option value="6.00">9 QtrCr.</option>
<option value="6.67">10 QtrCr.</option>
<option value="1">1 SemCr.</option>
<option value="2">2 SemCr. </option>
<option value="3">3 SemCr.</option>
<option value="4">4 SemCr.</option>
<option value="5">5 SemCr.</option>
<option value="6">6 SemCr.</option>
<option value="7">7 SemCr. </option>
<option value="8">8 SemCr.</option>
<option value="9">9 SemCr.</option>
<option value="10">10 SemCr.</option>
</select>
</form>
Transferrable
<input name="COM105" type="checkbox" id="COM1" />
$('#total_potential').html(Math.min(sum,72));
Will display the sum up to 72 then just 72
Here's how you would do it with select inputs:
$(function($) {
$('#CourseMenu select').change(function() {
var sum = 0;
$('#CourseMenu select').each(function(idx, elm) {
sum += parseInt(elm.value, 10);
});
$('#total_potential').html(Math.min(sum,72));
});
});
Important note
You have some serious issues with your form HTML markup. You have repeating ids in some of your elements which represents invalid markup, id attributes must be unique in a page. Also some of your inputs have the same name, which mean only one value will be submitted with the form. You can use arrays in your inputs name to submit multiple values.
how about:
if (sum <= 72) {
$('#total_potential').html(sum);
} else {
$('#total_potential').html("72");
}

Calculate hidden fields with jquery

I have a form that i'm trying to calculate some monetary value based on 2 dropdowns then show the total amount only the total in a textbox called GrandTotal which is read only.
Page loads and gets pricing data from DB into hidden fields.
InitialPrice = 660 (Mandatory)
EQup1Price = 550
EQup2Price = 440
2 Drop downs (EQup1, EQup2) Values 1-5.
Buy greater than 1 and get one free for EQup1 and EQup2.
The calculation is whats doing my head in.
<p>InitialPrice -: <strong>$660.00</strong></p>
<form name="Edit" method="post" action="mypageprocess">
<p><label for="EQup1">How many Branches?</label><br /><select name="EQup1" onblur="calc(this.form)" id="EQup1"/>
<option value="0">Please select</option>
<option value="1" >One</option>
<option value="2" >Two</option>
<option value="3" >Three</option>
<option value="4" >Four</option>
<option value="5" >Five</option>
</select> x <strong>$550.00</strong>
</p>
<p><label for="EQup2">How many Satellits?</label><br /><select name="EQup2" onblur="calc(this.form)" id="EQup2"/>
<option value="0">Please select</option>
<option value="1" >One</option>
<option value="2" >Two</option>
<option value="3" >Three</option>
<option value="4" >Four</option>
<option value="5" >Five</option>
</select> x <strong>$440.00 </strong>
</p>
<input type="text" onfocus="this.blur();" name="GrandTotal" size="10" readonly="readonly"/>
<input type="hidden" name="InitialPrice" value="660" />
<input type="hidden" name="EQup1Price" value="550" />
<input type="hidden" name="EQup2Price" value="440" />
</form>
<script>
function calc(theForm) {
// console.log("calc(theForm)");
var myEquip1 = document.Edit.EQup1.value;
var myEquip2 = document.Edit.EQup2.value;
Var myFixedPrice = document.Edit.InitialPrice.value;
Var myEquip1Price = document.Edit.EQup1Price.value;
Var myEquip2Price = document.Edit.EQup2Price.value;
if (myEquip1 > 1)
{
var myEquip1Total = (myEquip1*myEquip1Price) - (myEquip1Price)
}
else
{
var myEquip1Total = (myEquip1*myEquip1Price) - (myEquip1Price)
}
if (myEquip2 > 1)
{
var myEquip2Total = (myEquip2*myEquip2Price) - (myEquip2Price)
}
else
{
var myEquip2Total = (myEquip2*myEquip2Price) - (myEquip2Price)
}
theForm.GrandTotal.value = (myEquip2Total + myEquip1Total + myFixedPrice)
}
</script>
to calculate hidden fields in jquery
$(":hidden").length
$("#GrandTotal").val(Number($("#EQup1").val()) + Number($("#EQup1").val()));

Updating form values with javascript

This works, does anyone see anything I shouldn't be doing?
My function that is called
function getWeight(){
var weight;
var quantity = document.dhform.quantity.value;
var cardSize = document.dhform.cardSize.value;
weight = quantity * cardSize;
document.rates.weight.value = weight;
}
takes values from these drop down menues
<td><span class="style29">Quantity</span><span class="style1"><br/>
<select id="Quantity" name="quantity" size="1">
<option value="250">250</option>
<option value="500">500</option>
<option value="1000" selected>1000</option>
<option value="1500">1500</option>
<option value="2000">2000</option>
<option value="2500">2500</option>
<option value="3000">3000</option>
<option value="4000">4000</option>
<option value="5000">5000</option>
</select>
</span></td>
<td><p><span class="style1"><span class="style29">Size</span><br/>
<select id="Size" name="Size" size="1" onChange="getWeight()">
<option value="0.00999" selected>8.5 x 3.5</option>
<option value="0.0146">11 x 4</option>
</select>
</span></p></td>
Value needs to be inserted into this text box
<td style="width: 115px; height: 49px;"><span class="style16">Weight</span><br/>
<input type="text" id="weight" name="weight" size="10" maxlength="4"/>
</td>
Yes, it's done with Javascript. Let's say the "choose something" part is a drop-down (an HTML select box). You add an "onchange" event handler to that select box which fires a javascript function (which will automatically get the changed select box element as a parameter). Within that function, you use the value of the select box to determine what you want the value of the other box to be, and you update that other box's value.
Example:
<head>
<script language="JavaScript">
function setToy(dropDown) {
var pet = dropDown.options[dropDown.selectedIndex].value);
var newBox = document.getElementById("toy");
var toyText = "";
switch(pet) {
case "dog": toyText = "bone";
case "cat": toyText = "mouse";
default:toyText = "";
}
newBox.innerHTML = toyText;
}
</script></head>
<body>
<select name="petDropDown" onChange="updateToy(this)">
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select><br />
Preferred Toy: <input id="toy" />
</body>
I'll add that if you do this stuff a lot, you should look into jQuery, which makes this kind of thing much easier.

Categories

Resources