i am using below three fields need to multiply the Word Count Values through PHP. ANy Help ? Code as -- 1 have to select the first dropdown from here..
<select name="sp" id="sp">
<option value="" selected>Please Select...</option>
<option value="Editing">Editing</option>
<option value="Writing">Writing</option>
</select>
Then i have a text box in which the number would be provide,like word 100 200 300, as
<input type="text" name="Word_Count" id="Word_Count" size="10">
and third field would be where the price would be calculated on behalf on word from above row (100 200 300 word), as
<input type="text" name="price" id="price" value="" readonly="" size="20">
Now if the user will select the Editing from select box, the price would be calculated as 100 x 0.02, 200 x 0.02, 300 x 0.02 like and the user will select the Writing, the price would be calculated at 100 x 0.04, 200 x 0.04, 300 x 0.04.
HOw can i make the sense to get the output more efficiently ? Any help ?
There are many complication that you will have to handle.
1) Check that the string entered in Word_Count is number. (Never trust user input. Apply validation techniques)
2) call a javascript function on Onkeyup event of Word_Count.
<input type="text" name="Word_Count" id="Word_Count" size="10" onkeyup="return somefunction()">
I have shown you, how to call a function by mentioning it in element. You can also bing jquery function on pageload. Better check-out official documentation if you want it that way.
Html select
<select name="sp" id="sp">
<option value="" selected>Please Select...</option>
<option value="0.02">Editing</option>
<option value="0.04">Writing</option>
</select>
Changed the value of options.
javascript/jquery function
function somefunction(){
//take value of Word_Count in one variable
var valWC = $("#Word_Count").val()
//take value of Word_Count in one variable
var valDP = $("#sp").val()
//sumd will hold the product of two numbers
var sumd = 0;
//apply validation technique
//multiply both values valWC and valDP
//sumd will have the product
sumd=Number(valWC)*Number(valDP);
//show it in third box
$("#price").val(sumd);
}
you can do this in Jquery itself.. What you have to do is,
$("#sp").change(function() {
// get the word count field value;
// split the values by using " " character and store it into an array
// loop the array [ inside the loop do your calculation according to the selection of the choice ]
// display the final value in the price field..
});
There are the steps to achieve it.
Related
I need some Javascript help here
I have a simple array
var price_eFile = [ //Prov Fee, Gov Fee
[49.99,0], //ON
[99.99,351.50], //BC
[79.99,250.00] //SK
];
And some values I use in a form calculator
price_eFileProv = 0;
price_eFileGov = 0;
And the following HTML
<div class="col-sm-9 col-xs-6">
<select name="eFileProv" class="form-control" id="eFileProv" onChange="checkeFileJur();Form_Calculator();">
<option selected>select province</option>
<option id="CAN-ON" value="ON">Ontario (ON)</option>
<option id="CAN-BC" value="BC">British Columbia (BC)</option>
<option id="CAN-SK" value="SK">Saskatchewan (SK)</option>
</select>
</div>
<div class="col-xs-4 col-sm-2">
<input name="dis_price_eFileProv" type="text" class="form-control fcalc" id="dis_price_eFileProv" value="" readonly>
</div>
<div class="col-xs-4 col-sm-2">
<input name="dis_price_eFileGov" type="text" class="form-control fcalc" id="dis_price_eFileGov" value="" readonly>
</div>
So if they select option2 I need to set dis_price_eFileProv and price_eFileProv as well as dis_price_eFileGov and price_eFileGov to their respective values based on the dropdown selection and corresponding array so that the second option would set the first two variables to 99.99 and the other 2 variables to 351.50
Note: I am not using jquery or anything like that, just good ole Javascript in the rest of my form calculator.
The first thing I would suggest is to not use an array but use an object/hash instead.
When using an array you're just arbitrarily connecting numeric indexes to values with no apparent meaning. You are also tied to the order and any changes might require multiple adjustments across the code.
With a hash you can map to your values with meaningful strings.
Here's one way to structure a hash for your use case:
var price_eFile = { //Prov Fee, Gov Fee
'ON': {
'prov': 49.99,
'gov': 0
},
'BC': {
'prov': 99.99,
'gov': 351.50
},
'SK': {
'prov': 79.99,
'gov': 250.00
}
};
Now it's easy to determine which prices are needed whenever a selection happens:
function FormCalculator(e) {
var state = e.target.value; // obtain the state from the selected option value
var prices = price_eFile[state]; // obtain the prices from the state name
// set proper prices to proper places
inputForProv.value = prices.prov;
inputForGov.value = prices.gov;
}
All that is left is to attach the above function to the DOM.
I have searched the web for answers and find none that I needed. So to the question. I am making a submit form (user selects fields and types an input number to determine the price of an order) which have 2 different select option fields and 1 input field.
<input type="text" id="number" placeholder="please enter a number">
(user entered 35 for example)</input>
<select id="firstpick">
<option value="50">Option 1</option>
<option value="150">Option 2</option>
<option value="100">Option 3</option>
</select>
<select id="secondpick">
<option value="10">Option 4</option>
<option value="15">Option 5</option>
<option value="20">Option 6</option>
</select>
<input disabled="disabled" type="text">(The total sum)</input>
I want to count sum of values for example: firstpick.option3 + (secondpick.option4 * number.35). In other meaning: 100 + (10 * 35) = 450. And I want to get that sum in a different disabled input field, so I can save it in database and show it to the user what is the total cost of an order by fields he selected and by number he typed in.
EDIT: The working code for you (the visitor)! http://jsfiddle.net/LoLd748n/4/
I am not entirely sure what you goal is, but this might be close. jQuery will be helpful.
function getSum() {
first = $("#firstpick").val();
second = $("#secondpick").val();
sum = first + second
return sum
}
It may be a good idea to add an event listener to your selects. This way your field will automatically update.
You do not have to have a disabled input, it could be type="hidden" instead. Then it will not show up on the page.
$("#firstpick").on("change", function() {
sum = getSum();
$("#my-hidden-input").val(sum);
});
$("#secondpick").on("change", function() {
sum = getSum();
$("#my-hidden-input").val(sum);
});
I have an <input readonly> field that contains a <?php echo $row['val'];?> value which is the total_price of a shopping cart. Also I have a <select> with options of transport type and its value can add or subtract more money to the total_price
Choose transport type:
<select id="transport">
<option value="0">Pick Up (costs 0$)</option>
<option value="5">UPS (costs 5$)</option>
</select>
<h3> Total: </h3>
<input id="totalprice" type="text" value="<?php echo $row['total_sum'];?>" readonly> $
What I would like to do is when I select "UPS (costs 5$)" and the total price input value is 50, it shows 55 $, and then if I select "Pick Up (costs 0$)" it shows 50 again.
Is there some way to achieve this with javascript? I've searched for an answer here in StackOverflow but the similar questions aren´t what I need, I would like to interact with the input value, not just showing the option.value in a <input>. Thank you!
Not tested but should work. Try this:
var totalPrice = parseInt($('#totalprice').val());
$('#transport').change(function(){
var dynamicPrice = totalPrice;
if(parseInt($(this).val()) != 0){
var newValue = dynamicPrice + parseInt($(this).val());
$('#totalprice').val(newValue);
}else{
$('#totalprice').val(totalPrice);
}
});
I've searched all over and cannot find a nice solution or if it's possible with client-side verification.
My client is asking that a user be restricted to a fixed-length digit combination based on a selection in a drop down.
Example:
Drop Down Selection
Utility A
Utility B
Utility C
Text Input
If User selects Utility A, they must provide an 8 digit account number.
If User selects Utility B, they must provide an 10 digit account number.
If User selects Utility C, they must provide an 12 digit account number.
Anyone know of a simply javascript solution that would provide the answer? I've beat myself to death over this.
Thanks!
Here you go!
HTML
<select id="Select" onchange="checkText()">
<option value="8"> A</option>
<option value="10"> B</option>
<option value="12"> C</option>
</select>
<input id="Enter" type="text" onchange="checkText()" />
<div id="Message"></div>
JavaScript
function checkText(input) {
if(document.getElementById("Enter").value.length != document.getElementById("Select").selectedOptions[0].value) {
document.getElementById("Message").innerHTML = "Your ID has to be " + document.getElementById("Select").selectedOptions[0].value + " digits long";
} else {
document.getElementById("Message").innerHTML = "";
}
}
This is not brilliant at all. But I will not do your work for you. You can easily pick up from here.
I also created a jsFiddle
Where select is your dropdown and input is your input string, you could use:
if ( !/^\d+$/.test(input) ||
input.length != [ 8, 10, 12 ][ select.selectedIndex ] ) {
// Input invalid
}
Further to #Amberland's feedback:
Or, for a more generic solution, store the number of required digits as the value of each option element, e.g. <option value=8>Utility A</option>, and use:
if ( !/^\d+$/.test(input) || input.length != select.value ) {
// Input invalid
}
Quick question on the .data() in jQuery: My variable "valone" reaches into a dropdown menu within some HTML for the "data-whatever" value in the dropdown and then plugs it into the jQuery equation. But it also seems to be getting the "option value" value from the dropdown and includes it into the math somehow, even though I don't specify it to do so...
var valone = $('#os0 option:selected').data('whatever');
Am I missing something in this .data() function? Or do I have something extra that is not necessary?
(I have the complete jQuery and HTML below.)
jQuery
$(document).ready(function(){
var valone = $('#os0 option:selected').data('whatever');
var valtwo = $('#os1').val();
var valthree = $('#os2').val();
var total = ((valone * 1) * (valtwo * 1) * (valthree * 1));
$('.calc').each(function(){
if($(this).val() != '')
{
total += parseInt($(this).val());
}
});
HTML
<select style="width: 190px;" class="calc"
name="os0" id="os0" type="text">
<option value="250" data-whatever="5">250
</option>
<option value="500" data-whatever="6">500 </option>
<option value="1000" data-whatever="7">1000
</option>
<option value="2000" data-whatever="8">2000
</option>
<option value="5000" data-whatever="9">5000
</option>
</select>
Any help or advice would be greatly appreciated!
.data is retrieving the correct value. The problem occurs with this piece:
$('.calc').each(function(){
if($(this).val() != '')
{
total += parseInt($(this).val());
}
});
The variable total is computed above this point is what you expect. .each is iterating over each select element again and adding the selected value to the total.
In answer to your question, you are missing nothing. Data stores one thing, the value set to it, either the hardcoded value in the element attribute, or the one set via jquery. What is the point in doing valone * 1, why not just valone? you are over complicating it. It should be
var total = valone * valtwo * valthree;
or
var total = (valone * valtwo) * valthree`; //valone will be multiplied with valtwo first before multiplying that total with valthree
Depending on what you are calculating.