Limit for Hidden Fields in HTML Form - javascript

<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.

Related

JavaScript/CSS - Update value *and* size of multiple input elements

I have a numerical base conversion page with html, javascript and css (no external jquery) where I type into one input field and then in real time it updates multiple other input fields with a corresponding value in a different base for each input field. These multiple values, about 5 dozen of them, are all different lengths, so I manually set up each of their input lengths with size="43", size="50", etc. Is it possible to also in real time update the size of each input field to match its dynamically-updated content, with javascript and css but not jquery? Each one is also in its own div if that helps, or it could be in its own span if needed.
I have tried at least half a dozen suggestions I found online but none have worked so far, because they all depend on either 1) "onkey" or "blur" events, of which there are none except on my 1 input field where I type, so that does not work for any of the other dozens of fields, or 2) updating one specific input field by specific name, and that doesn't apply either because I have dozens, each with a different input id.
A short and elegant solution would be preferable but I'm willing to try anything. thanks!
Use the setAttribute command to change the value of elements.Refer to the sample below.
HTML
<td><input type=text name=script_id id="id" onblur="myFunctionY(this)" placeholder="19506"></td>
<td><input type=text name=dep id="dep" placeholder="dependency"></td>
JS
<script type=text/javascript>
function myFunctionY(vari) {
console.log(vari.value);
document.query_form.dep.setAttribute("value",vari.value);
}
</script>
dep is the id for an input element
query_form is the form name
Essentially, call a function onblur,which then gets the input value entered.Use the setAttribute function for the form name to update a particular value of an input field.
solved it myself with :
document.getElementById("foo").style.width = ((document.getElementById("foo").value.length + 1) * 6.5);
it's pretty close, not 100%, as far as the style width matching the input element contents, but at least it's dynamic which is what I was looking for.

Radio buttons and checkboxes. Prevent changing of the value attribute

So you have a checkbox or a radio button with a predifined value to be sent to the database:
<input name="statement" type="radio" value="AWENSOME">
But someone or a script, with bad intention can easily change the value of your checkbox/radio button with for example a basic "browser page inspect" and then send other value to the databse. For example:
<input name="statement" type="radio" value="NOT SO AWENSOME! STUPID">
How can one prevent that guys? Thank you.
No, you can't, the best way is to gather all allowable input values in the database and check those values everytime on the server. It is easy in case of inputs like checkbox, select, radio, because you know exactly what the values can be. In case of text inputs, you have to use regex and sanitanization.
Maybe something like this in your model would help if your are using php:
if ($data['statement'] == 'AWENSOME' || $data['statement'] == 'FOOBAR' )
{
$statement = $data['statement'];
} else
{
// abort the app or return an error to the user
}
You cannot totally prevent the user from modifying the html scripts in the browser, but you can prevent unnecessary data to enter in your database..
In order to prevent that, you should have a validator in your php scripts in the server side.
There are many ways in preventing invalid data to enter in the db:
make a list of valid values in the database and once the user selects it, the server will check if the value in the checkbox or radio is existing
make the value fo radio/checkbox an encrypted or lets say there is some unique format like zkdie23doo44s that can be identified by your server..
periodically, check the html checkboxes and reload the values based from the original html script in the server
hope this helped you get an idea or two..
You can't do that you have to check once again on the server side and for the boxes like check box you know the value and for text box you can use regular expression

Passing the sum value from a textarea to an input field

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.

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

how to insert value in input, with javascript

So I tried to do something like this -
$('#price').val(price);
price is 300, and it shows good on browser, in input field, but when I want to take it out and mail it with PHP, in $_POST['price'] it doesn't show up, How can I insert something in inputs value with JavaScript, so I can mail it? It seems this is not an insertion in value, but just a feature to display something, correct?
Maybe this code can help you
document.getElementById('yorInputID').value = "Your Value";
There are a few possible reasons:
1) Your input field is not inside the form.
2) You are actually using a GET and not a POST.
Assuming that you can see the value updated in Firebug or Chrome's equivalent, it's gotta be one of those. Switch over to using $_REQUEST and see if that changes anything.
Your input for #price needs to also have a name "price"
<input id="price" value="price" />
From your question I'm assuming that this input is hidden -- and if that's the case I want to advise you not to rely on hidden fields + Javascript to provide you with security. It's so easily hackable I wouldn't even call it hacking.
Make sure the input is not "disabled" when the form submits.
if it's disabled the form don't send it.

Categories

Resources