Passing the sum value from a textarea to an input field - javascript

How are you?
Here's what am trying to do:
I want to add every numbers typed by the user inside the textarea then, using javascript an <input> field will automatically sum it all up and displays the total. So once I click the Make Voucher submit button inside the save.php the sum total computed inside that <input> field will be enclosed inside a variable that will be inserted on the database.
In the image above you could see an Amount column which has a textarea below to which the user could put numbers to be added with. [See Figure 1] Then, Whatever the numbers a user has typed with it will be automatically computed and will be shown in Total Amount Due [See Figure 2]
As you can see everything is just working fine. In Figure 2, I used a <div> tag that will hold the total (or sum) of the value inserted by the user in the textare at the Figure 1. A button named Make Voucher does the trick by triggering the javascript to add the inserted values and retrieves the total and pass it on the <div> tag beside the Total Amount Due title.
See JSfiddle Please note that this code are perfectly working with my browser.
This is my way of getting the total (or sum) of the value inserted in the textarea so by the time the form calls the action in save.php I can pass the total 1170 to the database by the Insert statement through this.
$total = $_POST['totalAmount'];
But I found it hard doing so. Why? Because my concern is this:
1. I could not pass the sum 1170 to $total simple because it is not in the input field as I have said the javascript only shows the added (or sum) by using <div> tag.
2. You should have to click the Make Voucher button first before you could get the sum total.
So to be able to add this onto my INSERT statement the total value retrieved in <div id="res"></div> format must be placed inside the <input> field instead. I have tried doing this:
<input type="text" name="total" onKeyUp="calc()"> But still I can't post the value 1170 to $total in save.php.
My concern is this:
Is there any way I can put the sum total of the textarea values inside an input field instead of using <div> tag? So I can be able to save the total in the database? Or my code is simply not organized?

Here is JSFIDDLE
First you have to change onDomReady to No wrap-in <body> because onDomReady in these your js script are not working.
NOTE for you : If you got preferable answer than please accept so other person can't put answer here.

It is very simple, just have a hidden input field, suppose <input type="hidden" name="hdnTotalAmout" /> and pass the total amout value to hidden field along with DIV tag.
Then DIV will just show the total amount and use hidden field value to save in database at server-side. Like,
$total = $_POST['hdnTotalAmount']
Thank you.

Related

Update HTML form field selections to show a new calculated total before form submission

I can't find anything regarding this simple problem.
I'm trying to create an order page and allow the user to update the total of their order using a button (without having to submit the form). I'm calling an external JS file to make the necessary calcs based on the input selections made by the user, but when I click a "Calculate Total" button the form appears to submit and clears everything.
I'm confused as to how to define the form. Do you "POST" or "GET"? I'll eventually tie this to a PHP script on the action field, but I just want to do client-side updates for the order total so the user can see an updated total before they submit it.
<script type = "text/javascript" src="js/special_order_calcs.js"></script>
<form class="my_web_form" id="frmSpecialOrder" name="frmSpecialOrder" action="" method="">
... Here I do all my other fields definition, then ...
... Here is where the text box is created to store the calculated total ...
Order Total $: </strong><input class="my_form_input_short" type="textbox" id="ordertotal" name="ordertotal" readonly> USD
... Here's where I'm trying to update the order total within the JS file when the Calculate Total button is clicked ...
ot_final = qty1 + qty2 + qty3 + qty4 + ot_shipping_handling;
document.getElementById('ordertotal').value = ot_final;
// Set successful status
return true();
... Here are the button definitions ...
<!-- Create buttons -->
<button type="input" class="standard-button" onclick="calculate_total()" class="standard-button">Calculate Total</button> <button type="submit" class="standard-button">Submit</button> <button type="reset" class="standard-button">Reset</button></p>
I verified the calculation works via Alerts, so my goals is when I click Calculate Total, I'm expecting the updated calculation to show up in the 'ordertotal' textbox on the form so the user can see a new value if they change quantities, etc. without submitting the form. I know a zillion product websites use this and I'm just trying to do something simple. Thanks.
Instead of using <button type="input"> in the Form, try using <button type="button". Otherwise you will realize that by clicking on the button, it always refreshes your site, therefor deleting your previously input data.
For more info about how button behaves in a form, look at this thread. The attribute type of the html-tag button has only three values: submit/reset/button.
If an invalid type is used, in your case type="input" it behaves like type="submit", therefore submitting the form and refreshing the page
A tip from me: Use Console.log for error checking
So console.log(ot_final);, and afterwards:
return document.getElementById('ordertotal').value = ot_final;
Console.log() helps you find mistakes in your code way easier than using alert(). In this case alert fired of so you saw, that the result of the calculation was correct, but you didnt realize, that your site refreshed, after alert() was executed. Something that could have been prevented using console.log.
If I have not misunderstood, what you want to do is to calculate the total amount of an order. Well, to do that on the client side you don´t need a form because you don´t have to submit any data. Just get the input values, calculate the total price of the order and change the textarea value with .innerHTML

How to keep new updated input value while printing the html page?

I have some input fields that get default values.
A user can change the values of the inputs.
Then, I try to print the html page (window.print()) with the updated values, BUT the print preview shows the old default values (i.e., the printed page doesn't show the new inputs' values).
Any ideas? Thanks in advance.
I looked around a little bit and noticed the npm site successfully prints the entered value. I also noticed that the value in the input box gets live-updated in the html, which isn't how most input boxes work:
$('.classname').attr('value', newvalue);
If you have access to jquery, that code changes the value in the actual html, not just behind-the-scenes. Try that and see if it prints.
--- edit
I made a test html document with some inputs and I'm not having any trouble at all seeing changed input values with window.print(). You'll possibly need more context for your issue.
You could add an onChangeListener, which can print your value.
E.g.
function onChangeHandler(val) {
console.log(val);
}
And your input
<input type='text' value='myDefaultValue' onchange='onChangeHandler(this.value)' id='exampleInput' />

Populate array in Jquery and pass to controller

I have a simple C# program where a user enters the ID of a item to be discarded then the individual who is to take it away signs and does so.
Upon entering the ID, you click the "search" button, the purpose of that button is to ensure that such an item exist in the database.
Issue
This method works however,, if there are 50 items to discard, my program requires the individual to sign 50 times. I am trying to have it so that, when I enter the ID number I can keep adding then ask for a signature once that will cover all 50 items.
My question is, I am having some issue with constantly adding the ID number to my textbox. In my jquery I have the line document.getElementById('test').value = document.getElementById('refno').value;
which takes the value from the refno textbox and adds it to the test texbox. Obviously that simple replaces the value and I am not sure of how to append it. So my next bet is an array. My question therefore is, how do I when I click the "Add" button, store those value in an array and then pass it to my controller and at the same time display it on the UI so that it can be edited ie if an id was entered in error.
This should add the value instead of replace it:
document.getElementById('test').value += document.getElementById('refno').value + ';';

What is best way to make a calculation with input values from a html form?

I have a product form with 3 inputs
Price (fixed number)
Quantity (an input with type="text" where the user can enter a number)
Optional extra (a checkbox that the user can tick to add a number)
So far I have been using Javascript to get the value of the html elements, and then adding them and outputting the result into a html element.
I need the form to update on the fly, so that a user can enter a number into quantity and tick the box and the result update live. Unfortuantely I have been unbale to find a way to set variables when there is an update in a field, please see the link below of what I have done so far.
http://jsbin.com/tapen/2/watch?html,css,js,output
With Jquery its very easy to acess the value of an input field, or to set events to will execute when the field value is changed / updated.
As a pratical example i would suggest that you take a look in the code of a sample calculator using only jquery and html: http://firstemission.blogspot.com.br/2012/10/jquery-and-watermark-example.html

Limit for Hidden Fields in HTML Form

<input type="hidden" value="Is there any limit that how many Hidden Fields ? "/>
Is there any limit for the how many Hidden Fields can be used in the HTML Form?
If Yes, can you please elaborate the reason..?
Thanks..!
There is "NO" limit over how many hidden fields are there in a form..!
But, when you are trying to POST the value of all the hidden fields and normal should not more than post_max_size which is defined in php.ini
No. As long as each field has a unique name you are fine using as many as you would like:
<input type="hidden" name="must-be-unique" value="Some value"/>
EDIT: There is an exception to the unique name rule. In the case of radio buttons or anything where you'd like the data to be passed as an array, you may use the same name for multiple inputs.
Actually there are some PHP parameters that control/effect the processing of inputs $_POST and $_GET data.
These are
max_input_vars = ?? // default is 1000, the number of fields php will process
max_input_time = ?? // maximum time in seconds a script is allowed to parse input data, like POST and GET
post_max_size = ?? // Sets max size of post data allowed.
These are not specifically related to "hidden" fields but to the total number of fields or size of the buffer. If your hidden fields are the last fields defined on your form and the number of fields or size of POST buffer is to large, php just stops processing when the limit it reached. However you should see at least a warning in your php error log to say something like this has happened.
In case you are generating hidden fields dynamically using JS for example you can limit, else you cannot control and having many fields may make your page performance bad
You can make periodical check using JS to count hidden fields and you may delete last added ones based on your implementation
Also you can have N elements with same name in HTML but in PHP I don't know if you will face limitation or not
function checkDOMChange()
{
// check for any new element being inserted here,
// or a particular node being modified
// call the function again after 100 milliseconds
setTimeout( checkDOMChange, 100 );
}
Some browsers (ex: Netscape, IE) have a limit for hidden field content size, but not for field count. In those situations the quick walkaround is to divide content into multiple hidden fields.

Categories

Resources