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>
Related
Now I do foreach the select option and do the required but when I foreach it only required the top option, the rest refuse required. How do I requried every option?
blade:
#foreach($student as $index => $students)
<input type="hidden" class="form-control" name="student_id[]" value="{{$students->student_id}}">
<input type="hidden" class="form-control" name="member_id" value="{{CurrentUser::user()->member_id}}">
<select name="status[]" class="form-control" style="width:70%;" id="status" required>
<option disabled selected value="" >
Choose...
</option>
<option name="status[]" value="Present">Present</option>
<option name="status[]" value="Absent">Absent</option>
<option name="status[]" value="Tardy">Tardy</option>
</select><br>
<p style="color:#D30707;font-size:5px;" id="check_status"></p>
#endforeach
js:
function myFunction() {
var status = document.getElementById("status");
if (!status.checkValidity()) {
document.getElementById("check_status").innerHTML = "Please choose status field.";
} else {
document.getElementById("check_status").innerHTML = "";
}
}
When you do foreach in blade you should generate unique ids for each of your input or element you want to select later using JavaScript. Now you have situation that you have generate N number of inputs with id="status" so your JavaScript code will select only first one.
You could instead of unique ids add some dummy class to your element and then select with JS all elements containing that class and loop trough them to check is required satisfied.
try this
<select name="status[]" class="form-control" style="width:70%;" id="status" onchange="myFunction()" multiple required>
<option disabled selected value="" >
Choose...
</option>
<option name="status[]" value="Present">Present</option>
<option name="status[]" value="Absent">Absent</option>
<option name="status[]" value="Tardy">Tardy</option>
</select>
<br>
<p style="color:#D30707;font-size:5px;" id="check_status"></p>
in js
function myFunction() {
var status = document.getElementById("status");
var selectedValues = Array.from(status.selectedOptions).map(option => option.value);
if (!selectedValues.includes('Absent')) { // change here containe value
document.getElementById("check_status").innerHTML = "Please choose status field.";
} else {
document.getElementById("check_status").innerHTML = "";
}
}
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="$<?php echo $total_discount; ?>"/></p>
<p>Grand Total: <input id="total" type="text" value="$<?php echo $total_cost; ?>"/></p>
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");
}
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()));
I can't seem to get this function to work out. I'm trying to change the "business" input value of my form based on an amount selected in the "amount" dropdown. What am I missing!!! I've been trying this for an hour.
<script type="text/javascript">
function chPy()
{
var businessvar = "paypals#ramatico.com";
if (document.forms['5'].amount.value > 11){
businessvar = "paypall#ramatico.com"
}
document.forms['5'].business.value = businessvar;
}
</script>
<form name="5">
<select name="amount" OnChange="chPy()">
<option value="na">Select</option>
<option value="1.00">$1</option>
<option value="5.00">$5</option>
<option value="10.00">$10</option>
<option value="15.00">$15</option>
<option value="20.00">$20</option>
<option value="25.00">$25</option>
</select>
<input name="business" type="text" value="">
</form>
Ok. The next step. I have about 100 of these forms on a page. Instead of creating one for each form, I'd like to have one script that changes based on which form is being changed with "onChange". Each of the forms on the page have values of the same name (but not ID) (they are for paypal). I think it will be ok if I can change the"formname" in the following: "document.forms['formname']" based on a variable populated by something like chPy("formname") etc..... I can't seem to get that to work either.
Removing the form reference would take care of both of your items.
<script type="text/javascript">
function chPy(oSelect)
{
var businessvar = "paypals#ramatico.com";
if (oSelect.form.amount.value > 11){
businessvar = "paypall#ramatico.com"
}
oSelect.form.business.value = businessvar;
}
</script>
<form name="5">
<select name="amount" OnChange="chPy(this)">
<option value="na">Select</option>
<option value="1.00">$1</option>
<option value="5.00">$5</option>
<option value="10.00">$10</option>
<option value="15.00">$15</option>
<option value="20.00">$20</option>
<option value="25.00">$25</option>
</select>
<input name="business" type="text" value="">
</form>
Problem is that you are using a number as form name.
Add some letters to the name and it will work:
<script type="text/javascript">
function chPy()
{
var businessvar = "paypals#XYZ.com";
if (document.forms['form5'].amount.value > 11){
businessvar = "paypall#XYZ.com"
}
document.forms['form5'].business.value = businessvar;
}
</script>
<form name="form5">
<select name="amount" OnChange="chPy()">
<option value="na">Select</option>
<option value="1.00">$1</option>
<option value="5.00">$5</option>
<option value="10.00">$10</option>
<option value="15.00">$15</option>
<option value="20.00">$20</option>
<option value="25.00">$25</option>
</select>
<input name="business" type="text" value="">
</form>
HTML:
<form name="form5">
<select name="amount">
<option value="na">Select</option>
<option value="1.00">$1</option>
<option value="5.00">$5</option>
<option value="10.00">$10</option>
<option value="15.00">$15</option>
<option value="20.00">$20</option>
<option value="25.00">$25</option>
</select>
<input type="text" name="business">
</form>
JavaScript:
var form5 = document.forms['form5'];
form5.amount.onchange = function() {
form5.business.value =
(this.value > 11 ? 'paypall' : 'paypals') + '#ramatico.com';
}
Live demo: http://jsfiddle.net/Fx7zh/
For multiple forms, you can use this JavaScript code:
for (var i = 0, l = document.forms.length; i < l; i++) {
document.forms[i].amount.onchange = function(i) {
this.form.business.value =
(this.value > 11 ? 'paypall' : 'paypals') + '#ramatico.com';
}
}
Live demo: http://jsfiddle.net/Fx7zh/2/