Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    67
    Thanks
    14
    Thanked 6 Times in 6 Posts

    Hidden input value interfering with javascript

    I'm trying to write a form in a php page, and everything has gone swimmingly until I've hit one snag. I'm trying to write a page where a checkbox, other_call, activates a textarea, other_input. Here's the code so far:

    Code:
    <head>
    
    	<title>Title Here</title>
    	
    	<SCRIPT type="text/javascript" language="JavaScript"><!--
    	function enableInput() {
    
    	if(document.f1.other_call.checked)
    	{
    	document.f1.other_input.disabled=false;
    	}
    
    	else
    	{
    	document.f1.other_input.disabled=true;
    	}
    	}
    
    	//-->
    	</SCRIPT> 
    	
    </head>
    
    <body>
    
    
    		<form name="f1">
    		
    			<input type="hidden" name="other_call" value="0">	
    			<input type="hidden" name="other_input" value="NULL">
    
    
    			
    			<p><font style="font-weight: bold;">Other Call</font>
    			<br><input type="checkbox" onclick="enableInput()" name="other_call" value="1">Other Call
    			<p><textarea disabled cols="40" rows="3" name="other_input"></textarea>
    			<p style="color: red;">Note: <b>DO NOT</b> enter any customer-specific information here.
    		
    			<p><input type="submit" value="Submit">&nbsp;<input type="button" value="Reset" onClick="window.location.reload()">
    
    		</form>
    
    </body>
    When I take out the hidden inputs, the texarea will enable and disable without a problem. With the hidden input values, however, the textarea will stay disabled, even after the checkbox is clicked. What am I missing?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    You are missing the fact that you named one of your hidden inputs the same as your checkbox.

    So now document.f1.other_call is *NOT* a checkbox any longer.

    It is, instead, an array of two elements, the first being the hidden element, the second the checkbox.

    The same applies to document.f1.other_input, which is now also an array.

    Why did you create a hidden element with the same name?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    why have you got multiple elements with the same name???

    Normally you give a set of radio buttons the same name or multiple checkboxes the same name when you want to send an array of checkboxes to the server. Give each element a unique name and your problem should disappear.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    There is one good reason to use a hidden element with the same name as a checkbox. It's a sneaky trick used by ASP/JSP programmers.

    If you create a <form> thus:
    Code:
    <form ...>
    <input type="checkbox" name="WHAT" value="1">
    <input type="hidden" name="WHAT" value="0">
    ...
    </form>
    then, when the form is submitted (I'll say to an ASP page) you can be sure to get a value for the checkbox (1 or 0) by doing something like this:
    Code:
    WHAT = Left( Request("WHAT"), 1 )
    And that works because, if the checkbox is *NOT* checked, then Request("WHAT") will be "0" whereas when it is checked, Request("WHAT") will be "1, 0". So if you get the leftmost character, you will get "0" or "1", as you would want.

    There are better techniques, but that one works and I've seen it used.

    However, it does require that the hidden field be *after* the checkbox within the <form>.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by Old Pedant View Post
    when the form is submitted (I'll say to an ASP page) you can be sure to get a value for the checkbox (1 or 0) by doing something like this:
    ino that's teaching bad coding habits because the hidden input in this case is really redundant and can only lead to confusion if it's not properly documented why it is there in the code.

    It's far better to validate the sent form data server side and assign any default values there if there is missing form data.

    If you wanted a 0 or 1 to be sent from the form, use a set of radio buttons and set 1 of them to checked as default.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Well, see the problem with a checkbox is that if it is UNCHECKED, then *NOTHING AT ALL* is sent from the browser to the server. And if you are using a server-side program that simply iterates through all form fields (that is, it has no prior knowledge of what the <form> is going to be sending it), that means the unchecked checkboxes don't appear at all and so the server doesn't know they are even there. The hidden field trick ensures that each field *WILL* appear at the server. Granted, the value of the checked checkbox then looks funny ("1, 0") but at least there is always *SOME* value.

    If you *KNOW* that a given checkbox exists, though, then it's easier to do something like
    Code:
    WHAT = ( Trim(Request("WHAT")) <> "" )
    And now the variable WHAT will be True/False depending on whether the checkbox was checked or not. (I won't bother telling you why that works...it depends upon another quirk in ASP...or rather in VBScript.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New Coder
    Join Date
    Jul 2012
    Posts
    67
    Thanks
    14
    Thanked 6 Times in 6 Posts
    Old pedant has it right. There's a bit more code here than I posted, in large part because it doesn't matter, but this is just a section of a larger form that I've built to store information in SQL tables. By using the hidden input, I can ensure that if a checkbox is not selected that it will not throw an error on the php page that processes the form and that I won't have a table full of empty columns (for my purposes, values of 0 and 1 work perfectly).

    Still... how can I solve this issue? I need to have default values, but I also need to disable the textarea until the other_call checkbox is selected. Any thoughts?

  • #8
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by Old Pedant View Post
    Well, see the problem with a checkbox is that if it is UNCHECKED, then *NOTHING AT ALL* is sent from the browser to the server.
    The server side script should know what data to expect from the form otherwise you are leaving the door ajar for potential hackers to send anything to try to cause some damage.

    A checkbox is for optional inputs from the user. If you must have a 0 or 1, as per your example, then use radio buttons or check server side if the checkbox was sent. If it wasn't then assign the appropriate value for it.

    Having redundant hidden inputs is still bad and lazy coding on all levels imo.

  • #9
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by superwookie View Post
    Still... how can I solve this issue? I need to have default values, but I also need to disable the textarea until the other_call checkbox is selected. Any thoughts?
    Default values should be assigned server side if missing or invalid data was sent from the form. If you try to enforce default values only client side, they will be vulnerable and very easily side-stepped by any malicious users.

    You should be aware that any data can be sent to your server side script without even using your form in the first place. So all validation and assignment of default values should be done server side and not client side.

  • #10
    New Coder
    Join Date
    Jul 2012
    Posts
    67
    Thanks
    14
    Thanked 6 Times in 6 Posts
    Maybe I'm failing to grasp something here, but I really don't understand how the solution of having hidden inputs is "lazy" coding, and honestly I find the suggestion a bit offensive, even if perhaps that wasn't its intent.

    The truth is that you can find this solution presented all over the place for people dealing with form submission who want a quick, easy and effective way to assign values to unchecked checkboxes in form submissions. This is far from sub-standard practice, and so far as my research can tell presents no additional security, speed, or usability risk.

    Yes, I realize that people are capable of sending information to my server without using my form, and I have appropriate safeguards in-place to prevent that.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    But it's really easy to handle unchecked checkboxes *IF* you know the names of the checkboxes.

    In your PHP code you just do
    Code:
    $fooWasChecked = ( $_POST["foo"] == "1" );
    Assuming that you checkbox was
    Code:
    <input type="checkbox" name="foo" value="1"/>
    That is, if the value you get from $_POST["foo"] is anything other than the value= in the checkbox, then you know it wasn't checked.

    Again, the only reason I see to use the hidden form fields is when you don't know the names and expected values of the checkboxes.

    And there is *NEVER* any reason to use hidden field to back up field types other than radio buttons and checkboxes. All other field types (<input type="text">, <select>,<textarea>) always send SOME value to the server, though it may be a blank string.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by superwookie View Post
    honestly I find the suggestion a bit offensive, even if perhaps that wasn't its intent.
    I just expressed my opinion on why using redundant hidden inputs is lazy and bad coding. If you don't see it that way then just code the way you like. I do . If you don'r see the potential security risks, that's fine. I'm not telling you how you must code. I just never use redundant hidden inputs because of my earlier reasons.

  • #13
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by Old Pedant View Post
    But it's really easy to handle unchecked checkboxes *IF* you know the names of the checkboxes.
    I just don't see how a coder who knows what they are doing would not know the names of the input fields (individual or arrays) in his/her html form.

    Given that you know the names of the inputs, which could be individual inputs or an array of inputs, you simply use isset() to check if they were sent and then process the sent data. You can easily determine server side which, if any, inputs were not sent and then do any appropriate processing.

    You don't need redundant hidden inputs. It is possible for a hacker to send incorrect data for supposedly hidden inputs to your server side script. So any assignment of default values for further processing should be done server side and not via hidden inputs or other client side methods.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •