Form Calculation in CodeIgniter - javascript

i want to do is after typing quantity, the balance and quantity should do addition and place the answer to balance automatically. this is a piece of codeigniter projet. the balance comes from database.
<form action="addnew" method="post">
<input type="text" name="io" placeholder="IN_OUT"><br>
<input type="date" name="date" placeholder="Date yyyy-mm-dd" value="<?php echo date("Y-m-d") ?>" disabled><br>
<input id="qty" type="number" name="qty" placeholder="Quantity"><?php echo $key->ns_balance; ?><br>
<input type="text" name="breed" placeholder="Breed"><br>
<input type="number" name="es_id" placeholder="Estate"><br>
<input type="number"
name="balance"
placeholder="Balance"
value="" disabled>
<br>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="Reset" value="Reset"
</form>
User interface image

try using this jquery code:
<div id="test"><input id="qty" type="number" name="qty" placeholder="Quantity"><?php echo $key->ns_balance; ?></div>
<input id="balance" type="hidden" value="<?php echo $key->ns_balance; ?>">
$("#qty").on("keyup", function(){
var qty = $("#qty").val();
var balance= parseInt($("#balance").val());
$("#test").text("Balance -"+qty*balance); //you can change the id to place result whereever you want
});

Related

Closest find a class and change the input value

I have added the hidden field in the form and inserting the data into the database. I have 16 fields on my page and If the user enters any value in the field then I have to change the value from 0 to 1 in the input field.
I tried the below code but it's not working.
$(document).ready(function() {
//Check this link
$(".onchangefield").change(function() {
var val = $(this).closest(".onchangefield").find(".haschange").val(1);
//$(".haschange").val(1);
alert(val);
});
});
<form action="process.php" name="employee" method="post">
<input type="text" name="name" class="onchangefield">
<input type="hidden" name="haschange[name]" class="haschange" value="0" />
<input type="email" name="email" class="onchangefield">
<input type="hidden" name="haschange[email]" class="haschange" value="0" />
<button type="submit" name="save">Save</button>
<button type="submit" name="send_for_approval">Send to approval</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
How to change the value in the foreach.
<?php
$i=1;
$arrayName = array('1','2','3');
foreach ($arrayName as $key => $value) {?>
<input type="file" name="slider[]" class="fileupload onchangefield">
<input type="hidden" name="haschange[slider][<?php echo $i;?>]" class="haschange" value="">
<?php $i++; } ?>
You can use .next() to get the reference of next input and change value there .
Demo Code :
$(".onchangefield").change(function() {
var selector = $(this).next() //get next input..
selector.val($(this).val() != "" ? 1 : 0) //depending on value change value of next
});
<form action="process.php" name="employee" method="post">
<input type="text" name="name" class="onchangefield">
<input type="text" name="haschange[name]" class="haschange" value="0" />
<input type="email" name="email" class="onchangefield">
<input type="text" name="haschange[email]" class="haschange" value="0" />
<button type="submit" name="save">Save</button>
<button type="submit" name="send_for_approval">Send to approval</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Ask user for amount and user value in a form

I'm trying to integrate a payment method called SiamPay on my website but I don't know javascript :(
On SiamPay website they have this instructions:
Copy the following program code to your payment page and
dynamic generate the Amount show below by yourself
<form name="payForm" method="post" action="https://www.siampay.com/b2c2/eng/payment/payForm.jsp">
<input type="submit" name="submit" value="Buy">
<input type="hidden" name="amount" value="Amount">
<input type="hidden" name="merchantId" value="76117579">
<input type="hidden" name="orderRef" value="76117579">
<input type="hidden" name="currCode" value="764" >
<input type="hidden" name="successUrl" value="">
<input type="hidden" name="failUrl" value="">
<input type="hidden" name="cancelUrl" value="">
<input type="hidden" name="remark" value="">
<input type="hidden" name="lang" value="E">
<input type="hidden" name="payMethod" value="ALL">
</form>
Example in jsp:
<%
double amount = qty * unitPrice ;
%>
<form name="payForm" method="post" action="https://www.siampay.com/eng/payment/payForm.jsp">
<input type="submit" name="submit" value="Buy">
<input type="hidden" name="amount" value="<%= amount %>">
<input type="hidden" name="merchantId" value="76117579">
<input type="hidden" name="orderRef" value="76117579">
<input type="hidden" name="currCode" value="764" >
<input type="hidden" name="successUrl" value="">
<input type="hidden" name="failUrl" value="">
<input type="hidden" name="cancelUrl" value="">
<input type="hidden" name="remark" value="">
<input type="hidden" name="lang" value="E">
</form>
I would like to create a field where the user can input an amount to pay in THB (Thai currency) and transport that value to this field:
< input type="hidden" name="amount" value="<%= amount %>">.
I think this is relatively easy but because I never user javascript I'm a little confused.
I appreciate any help.
Thank you so much.
Best Regards,
Alex
There's no need to create an extra input field. You have to change the name=amount input's type to number so that it will become visible to the user. Now the user can enter a number of their choice and click the pay button to submit the payment form.
<form name="payForm" method="post" action="https://www.siampay.com/eng/payment/payForm.jsp">
<input type="submit" name="submit" value="Buy">
<input type="number" name="amount" value="" placeholder="Enter amount in THB ">
<input type="hidden" name="merchantId" value="76117579">
<input type="hidden" name="orderRef" value="76117579">
<input type="hidden" name="currCode" value="764" >
<input type="hidden" name="successUrl" value="">
<input type="hidden" name="failUrl" value="">
<input type="hidden" name="cancelUrl" value="">
<input type="hidden" name="remark" value="">
<input type="hidden" name="lang" value="E">
</form>
To set value to an element, you can use the document.getElementById().value function. Set the amount data into the Amount variable as shown below.
var Amount = 123;
Also, modify the input tag for the amount to include the same id:
<input type="hidden" name="amount" id="amtId" value="Amount">
var Amount = 123;
function setAmountValue() {
document.getElementById('amtId').value = Amount;
}
<form name="payForm" method="post" action="https://www.siampay.com/b2c2/eng/payment/payForm.jsp">
<input type="submit" name="submit" value="Buy" onclick="setAmountValue();">
<input type="hidden" name="amount" id="amtId" value="Amount">
<input type="hidden" name="merchantId" value="76117579">
<input type="hidden" name="orderRef" value="76117579">
<input type="hidden" name="currCode" value="764">
<input type="hidden" name="successUrl" value="">
<input type="hidden" name="failUrl" value="">
<input type="hidden" name="cancelUrl" value="">
<input type="hidden" name="remark" value="">
<input type="hidden" name="lang" value="E">
<input type="hidden" name="payMethod" value="ALL">
</form>
try something like this:
<form name="payForm" method="post" action="https://www.siampay.com/eng/payment
/payForm.jsp">
<input type="submit" name="submit" value="Buy">
<input type="hidden" id="amount" value="<%= amount %>">
<input type="hidden" name="merchantId" value="76117579">
<input type="hidden" name="orderRef" value="76117579">
<input type="hidden" name="currCode" value="764" >
<input type="hidden" name="successUrl" value="">
<input type="hidden" name="failUrl" value="">
<input type="hidden" name="cancelUrl" value="">
<input type="hidden" name="remark" value="">
<input type="hidden" name="lang" value="E">
</form>
<button id='cmdSend'>Click me</button>
<input id='howmuch' type="number" name="amount" value=1000>
And the JS:
document.getElementById("cmdSend").addEventListener("click", myFunction);
function myFunction() {
document.getElementById("cmdSend").innerHTML = "YOU CLICKED ME!";
//Get the value the user typed:
var Value = document.getElementById("howmuch").value;
console.log(Value);
//Set the value into the hidden input, can be done in 2 ways:
document.getElementById("amount").value = Value;
document.getElementById("amount").setAttribute('value',Value);
//Check the value got assigned:
console.log(document.getElementById("amount").value);
}
Fiddle here: https://jsfiddle.net/s2ztkn8L/

JavaScript/Jquery : Multiple input value with multiple id

I have one html form
<form>
<input type="hidden" name="id" value="1" /><input type="text" name="qty" />
<input type="hidden" name="id" value="2" /><input type="text" name="qty" />
<input type="hidden" name="id" value="3" /><input type="text" name="qty" />
<input type="hidden" name="id" value="4" /><input type="text" name="qty" />
<input type="submit"/>
</form>
When I submit form,Say for id = 1 , qty is 5 or for id = 3, qty is 8. How to get this values in java script or jquery and submit this information to server? I get all the input text values. But I cannot differentiate which qty is for which value?
You should not have two or more elements with the same name or id!
names & ids are meant to be unique.
try this:
<form>
<input type="hidden" name="id[1]" value="1" /><input type="text" name="qty[1]" id="qty1" value="" />
<input type="hidden" name="id[2]" value="2" /><input type="text" name="qty[2]" id="qty2" value="" />
<input type="hidden" name="id[3]" value="3" /><input type="text" name="qty[3]" id="qty3" value="" />
<input type="hidden" name="id[4]" value="4" /><input type="text" name="qty[4]" id="qty4" value="" />
<input type="submit"/>
</form>
You can acces the data in JS like this:
using the element name:
var qty1 = document.forms[0].elements["qty[1]"].value;
Using the element id:
var qty1 = document.getElementById("qt1").value;
Well, to me, your hidden inputs are useless : You say that for input text one is a corresponding hidden field id with a defined value. Then you just have to name your input correctly and you know which id or something is correspondant.
If you want to use jQuery (javascript) as you said, then just do something like this :
<form>
<input type="text" name="qty1" id="qty1" />
<input type="text" name="qty2" id="qty2" />
<input type="text" name="qty3" id="qty3" />
<input type="text" name="qty4" id="qty4" />
<input type="submit" name='submit' id="submitButton" value="submit"/>
</form>
<script>
$('document').on('click','#submitButton',function(event){
event.preventDefault();
//this prevents the click to submit, as you want to get values by javascript... remove this if you post it with php
console.log('QTY1 : '+$('#qty1').val()+' - QTY2 : '+$('#qty2').val()+' - QTY3 : '+$('#qty3').val()+' - QTY 4 : '+$('#qty4').val());
//This is with jQuery, javascript would look like addEventListeneer, and get values like document.getElementById('id').value;
//then, ajax something if you really want to post your form through javascript, but this is not a good solution...
});
</script>
Other solution, better to me, would be just to use php and post directly your form...
<?php
if(isset($_POST['submit'])){
//then, user has clicked on submit button
//CONSIDERED THAT YOU HAVE CHECKED IF THE FIELDS ARE NOT EMPTY
$qty1 = $_POST['qty1'];
$qty2 = $_POST['qty2'];
$qty3 = $_POST['qty3'];
$qty4 = $_POST['qty4'];
//do your stuff with the posted values...
}else{
echo '
<form method="POST" action="yourPage.php">
<input type="text" name="qty1" id="qty1" />
<input type="text" name="qty2" id="qty2" />
<input type="text" name="qty3" id="qty3" />
<input type="text" name="qty4" id="qty4" />
<input type="submit" name="submit" id="submitButton" value="submit"/>
</form>
';
}
?>
Hope it helps
Your html is perfectly valid, but you're not using the name of the elements to your advantage.
<input type="hidden" name="id1" value="1" /><input type="text" name="qty1" />
This will return:
id1=1&qty1=X
But in the end I think your hidden field is just wasting space. All you seem to need is the quantity field with a proper name.
<input type="text" name="qty1" />
<input type="text" name="qty2" />
...
If you use the same name for the elements it will still give you the desired data, but it might need some parsing to figure out "what is what".
<input type="text" name="qty" />
<input type="text" name="qty" />
...
This will basically return:
qty=X,Y (or qty=X&qty=Y)
item ----0-1
You could wrap each pair of hidden-text inputs in div element, then iterate through these divs and find these two inputs inside each of the div elements. It might look like this:
<form>
<div id="keyValuePairs">
<div class="pair">
<input type="hidden" name="id" value="1" /><input type="text" name="qty" />
</div>
<div class="pair">
<input type="hidden" name="id" value="2" /><input type="text" name="qty" />
</div>
<div class="pair">
<input type="hidden" name="id" value="3" /><input type="text" name="qty" />
</div>
<div class="pair">
<input type="hidden" name="id" value="4" /><input type="text" name="qty" />
</div>
</div>
<input type="submit" id="sendBtn"/>
</form>
Then iterate with Jquery
$("#sendBtn").click(function(){
var arr = [];
$("#keyValuePairs .pair").each(function(){
var val = $(this).find("input[name='id']").val();
var key = $(this).find("input[name='qty']").text();
var obj = { val:val, key:key };
arr.push(obj);
});
// some ajax call or any way you want to post data server
});
at the end of iteration, arr should contain objects with val property containing what is in the value property of hidden input, and key property containing what the text present in text inputs.

PHP multiplication and subtraction scripts

I am attempting to make a php script that will calculate the total miles driven by a car rental customer (.12 cents per mile) which multiplies that value to the number of days they rented the car ($15 a day) and display that grand total in a textarea box along with their name and address. I am fairly new to php and I have no clue how to project this idea into php code. I have a fully html version of this code working, but am lacking the knowledge with php to translate it.
Anyone have any ideas on how I can write this script?
<?php
if(isset($_POST['submit'])) {
$x = $_POST['bOdometer'];
$y = $_POST['eOdometer'];
$z = $_POST['daysRented'];
$miles = $y - $x; {
$result = (15 * $z) + ($miles * 0.12);
echo $result; } }
?>
<body>
<div align="center">
<hr>
<br>
<form method="post" name id="Main">
<input type="text" id="name" name="customerName" placeholder="Enter your name here" size="30px">
<br><br>
<input type="text" id="address" name="customerAddress" placeholder="Enter your street address here" size="50px">
<br><br>
<input type="text" id="city" name="customerCity" placeholder="What city do you live in?" size="30px">
<br><br>
<input type="number" id="zip" name="customerZip" placeholder="Enter your zip code" size="30px">
<br><br>
<input type="number" id="bOdometer" name="beginningOdometerReading" placeholder="Start odometer reading" size="80px">
<br><br>
<input type="number" id="eOdometer" name="endingOdometerReading" placeholder="End odometer reading" width="80px">
<br><br>
<input type="number" id="daysRented" name="endingOdometerReading" placeholder="Days rented" size="50px">
<br><br>
<input type="button" id="total" value="Calculate how many miles you drove and your total cost!" onclick="javascript:multiply();"/>
<br><br>
Miles Driven: <input type="number" id='miles' min="1" max"10000" readonly="" />
Total Cost: <input type="number" id='result' min="1" max"10000" readonly="" />
<br><br>
<input type="button" value="Generate Summary!" onclick="javascript:calculate();"/>
<br><br>
Summary: <textarea cols="30" rows="2" id="textarea"> </textarea>
<br><br>
<input type="reset" value="Reset">
</form>
<hr>
</div>
</body>
Here is the working HTML version of this problem.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calculate() {
var customerName = Main.name.value;
var customerAdd = Main.address.value;
var totalCost = document.getElementById('result').value;
var area = document.getElementById("textarea");
area.value='Name: '+customerName+'\nAddress: '+customerAdd+'\nTotal Cost: $'+totalCost+'';}
</script>
<script type="text/javascript">
function multiply() {
var b = document.getElementById('bOdometer').value;
var e = document.getElementById('eOdometer').value;
var result = document.getElementById('miles');
var myResult = (e - b);
result.value= myResult;
var d = document.getElementById('daysRented').value;
var m = document.getElementById('miles').value;
var result2 = document.getElementById('result');
var myResult2 = (d * 15 + m * 0.12);
result2.value= myResult2;
}
</script>
</head>
<body>
<div align="center">
<hr>
<br>
<form name id="Main">
<input type="text" id="name" name="customerName" placeholder="Enter your name here" size="30px">
<br><br>
<input type="text" id="address" name="customerAddress" placeholder="Enter your street address here" size="50px">
<br><br>
<input type="text" id="city" name="customerCity" placeholder="What city do you live in?" size="30px">
<br><br>
<input type="number" id="zip" name="customerZip" placeholder="Enter your zip code" size="30px">
<br><br>
<input type="number" id="bOdometer" name="beginningOdometerReading" placeholder="Start odometer reading" size="80px">
<br><br>
<input type="number" id="eOdometer" name="endingOdometerReading" placeholder="End odometer reading" width="80px">
<br><br>
<input type="number" id="daysRented" name="endingOdometerReading" placeholder="Days rented" size="50px">
<br><br>
<input type="button" id="total" value="Calculate how many miles you drove and your total cost!" onclick="javascript:multiply();"/>
<br><br>
Miles Driven: <input type="number" id='miles' min="1" max"10000" readonly="" />
Total Cost: <input type="number" id='result' min="1" max"10000" readonly="" />
<br><br>
<input type="button" value="Generate Summary!" onclick="javascript:calculate();"/>
<br><br>
Summary: <textarea cols="30" rows="2" id="textarea"> </textarea>
<br><br>
<input type="reset" value="Reset">
</form>
<hr>
</div>
</body>
You haven't added a submit button yet.
Replace
input type="button" value="Generate Summary!" onclick="javascript:calculate();"/>
With
input type="submit" value="Calculate " />
<?php
if(isset($_POST['summary']))
{
$x = $_POST['bOdometer'];
$y = $_POST['eOdometer'];
$z = $_POST['daysRented'];
$name=$_POST["customerName"];
$address=$_POST["customerAdd"];
$city=$_POST["customerCity"];
$zip=$_POST["customerZip"];
$miles = $y - $x;
$result = (15 * $z) + ($miles * 0.12);
$summary= 'Name: '.$name. 'Address:'.$address.'Cost'.$result;
?>
<body>
<div align="center">
<hr>
<br>
<form method="post">
<input type="text" id="name" name="customerName" value ="<?php echo $name;?>" size="30px">
<br><br>
<input type="text" id="address" name="customerAddress" value ="<?php echo $address;?>"size="50px">
<br><br>
<input type="text" id="city" name="customerCity" value = "<?php echo $city;?>" size="30px">
<br><br>
<input type="number" id="zip" name="customerZip" value = "<?php echo $zip;?>" size="30px">
<br><br>
<input type="number" id="bOdometer" name="bOdometer" value ="<?php echo $x;?>" size="80px">
<br><br>
<input type="number" id="eOdometer" name="eOdometer" value ="<?php echo $y;?>" width="80px">
<br><br>
<input type="number" id="daysRented" name="daysRented" value="<?php echo $z;?>" size="50px">
<br><br>
<input type="button" id="total" value="Calculate how many miles you drove and your total cost!" onclick="javascript:multiply();"/>
<br><br>
Miles Driven: <input type="number" id="miles" name ="customerAdd" min="1" max"10000" readonly="" />
Total Cost: <input type="number" id= "result" name ="totalCost" min="1" max"10000" readonly="" />
<br><br>
<input type="submit" name ="summary" value="Generate Summary!" onclick="javascript:calculate();"/>
<br><br>
Summary: <textarea cols="30" rows="2" id="textarea" name ="txt" ><?php echo $summary;?></textarea>
<br><br>
<input type="reset" value="Reset">
</form>
<hr>
</div>
</body>
<?php
}
else
{
?>
<body>
<div align="center">
<hr>
<br>
<form method="post" name id="Main">
<input type="text" id="name" name="customerName" placeholder="Enter your name here" size="30px">
<br><br>
<input type="text" id="address" name="customerAddress" placeholder="Enter your street address here" size="50px">
<br><br>
<input type="text" id="city" name="customerCity" placeholder="What city do you live in?" size="30px">
<br><br>
<input type="number" id="zip" name="customerZip" placeholder="Enter your zip code" size="30px">
<br><br>
<input type="number" id="bOdometer" name="bOdometer" placeholder="Start odometer reading" size="80px">
<br><br>
<input type="number" id="eOdometer" name="eOdometer" placeholder="End odometer reading" width="80px">
<br><br>
<input type="number" id="daysRented" name="daysRented" placeholder="Days rented" size="50px">
<br><br>
<input type="button" id="total" value="Calculate how many miles you drove and your total cost!" onclick="javascript:multiply();"/>
<br><br>
Miles Driven: <input type="number" id='miles' name ="customerAdd" min="1" max"10000" readonly="" />
Total Cost: <input type="number" id='result' name ="totalCost" min="1" max"10000" readonly="" />
<br><br>
<input type="submit" name ="summary" value="Generate Summary!" onclick="javascript:calculate();"/>
<br><br>
Summary: <textarea cols="30" rows="2" id="textarea"> </textarea>
<br><br>
<input type="reset" value="Reset">
</form>
<hr>
</div>
</body>
<?php
}
?>
Few pointers
Please name each and every html control that you put in, so that retrieve by $_POST[]

iphone web form validation

I have this form for a dedicated iphone landing page. but cant find anything that will deal with the validation. i only need to validate the number but the name could also be usefull. i cant seem to find anything that will alert the user the field has not been entered.
this is iphone only and is a web form not a app
<form method="post" action="submitquote.php" name="quoteform">
<label>Your Full Name</label>
<input style="outline:none;" id="name" type="text" name="name" size="20" value="" class="elements"/>
<label>Your Email Address</label>
<input style="outline:none;" id="email" type="email" name="email" size="20" value="" class="elements"/>
<label>Your Telephone Number</label>
<input style="outline:none;" id="telephone" type="text" pattern="[0-9]*" name="telephone" size="20" value="" class="elements">
<label>Company Postcode</label>
<input style="outline:none;" id="postcode" type="text" name="postcode" size="20" value="" class="input" />
<div class="saveon">Save on..</div>
<div class="checkboxs">Gas<input type="hidden" name="gasresult" value="no" /><input name="gasresult" type="checkbox" value="yes" checked="checked" /> Electricity<input type="hidden" name="electricresult" value="no" /><input name="electricresult" type="checkbox" value="yes" checked="checked" /></div>
<input type="hidden" value="<?php echo $myid ?>" name="track" />
<input type="hidden" value="<?php echo $_GET['utm_source']; ?>" name="utm_source" />
<input type="hidden" value="<?php echo $_GET['utm_medium']; ?>" name="utm_medium" />
<input type="hidden" value="<?php echo $_GET['utm_term']; ?>" name="utm_term" />
<input type="hidden" value="<?php echo $_GET['utm_content']; ?>" name="utm_content" />
<input type="hidden" value="<?php echo $_GET['utm_campaign']; ?>" name="utm_campaign" />
<input type="submit" value="" class="submit" onclick="pageTracker._trackPageview('/HomePage/ClassicQuoteRequest/Submit')" />
</form>
You can use JavaScript to get the value of an input object of a form.
function nameOK() {
var myForm = document.quoteform; // document.#nameOfForm#
var input = myForm.name;
var content = input.value;
return (content != "");
}
It is untested, but I have recently done something similar to store cookies.
Hope it works,
ief2

Categories

Resources