php - How to gray out HTML form inputs? - Stack Overflow

admin管理员组

文章数量:1245840

What is the best way to gray out text inputs on an HTML form? I need the inputs to be grayed out when a user checks a check box. Do I have to use JavaScript for this (not very familiar with JavaScript) or can I use PHP (which I am more familiar with)?

EDIT:

After some reading I have got a little bit of code, but it is giving me problems. For some reason I cannot get my script to work based on the state of the form input (enabled or disabled) or the state of my checkbox (checked or unchecked), but my script works fine when I base it on the values of the form inputs. I have written my code exactly like several examples online (mainly this one) but to no avail. None of the stuff that is mented out will work. What am I doing wrong here?

<label>Mailing address same as residental address</label>
<input name="checkbox" onclick="disable_enable()" type="checkbox" style="width:15px"/><br/><br/>

<script type="text/javascript">

    function disable_enable(){

        if (document.form.mail_street_address.value==1)
            document.form.mail_street_address.value=0;
            //document.form.mail_street_address.disabled=true;
            //document.form.mail_city.disabled=true;
            //document.form.mail_state.disabled=true;
            //document.form.mail_zip.disabled=true;

        else
            document.form.mail_street_address.value=1;
            //document.form.mail_street.disabled=false;
            //document.form.mail_city.disabled=false;
            //document.form.mail_state.disabled=false;
            //document.form.mail_zip.disabled=false;

    }

</script>

EDIT:

Here is some updated code based upon what @Chief17 suggested. Best I can tell none of this is working. I am using value as a test because it works for some reason

            <label>Mailing address same as residental address</label>
        <input name="checkbox" onclick="disable_enable()" type="checkbox" style="width:15px"/><br/><br/>

        <script type="text/javascript">

            function disable_enable(){

                if (document.getElementById("mail_street_address").getAttribute("disabled")=="disabled")
                    document.form.mail_street_address.value=0;
                    //document.getElementById("mail_street_address").removeAttribute("disabled");
                    //document.getElementById("mail_city").removeAttribute("disabled");
                    //document.getElementById("mail_state").removeAttribute("disabled");
                    //document.getElementById("mail_zip").removeAttribute("disabled");

                else
                    document.form.mail_street_address.value=1;
                    //document.getElementById("mail_street_address").setAttribute("disabled","disabled");
                    //document.getElementById("mail_city").setAttribute("disabled","disabled");
                    //document.getElementById("mail_state").setAttribute("disabled","disabled");
                    //document.getElementById("mail_zip").setAttribute("disabled","disabled");
            }

        </script>

What is the best way to gray out text inputs on an HTML form? I need the inputs to be grayed out when a user checks a check box. Do I have to use JavaScript for this (not very familiar with JavaScript) or can I use PHP (which I am more familiar with)?

EDIT:

After some reading I have got a little bit of code, but it is giving me problems. For some reason I cannot get my script to work based on the state of the form input (enabled or disabled) or the state of my checkbox (checked or unchecked), but my script works fine when I base it on the values of the form inputs. I have written my code exactly like several examples online (mainly this one) but to no avail. None of the stuff that is mented out will work. What am I doing wrong here?

<label>Mailing address same as residental address</label>
<input name="checkbox" onclick="disable_enable()" type="checkbox" style="width:15px"/><br/><br/>

<script type="text/javascript">

    function disable_enable(){

        if (document.form.mail_street_address.value==1)
            document.form.mail_street_address.value=0;
            //document.form.mail_street_address.disabled=true;
            //document.form.mail_city.disabled=true;
            //document.form.mail_state.disabled=true;
            //document.form.mail_zip.disabled=true;

        else
            document.form.mail_street_address.value=1;
            //document.form.mail_street.disabled=false;
            //document.form.mail_city.disabled=false;
            //document.form.mail_state.disabled=false;
            //document.form.mail_zip.disabled=false;

    }

</script>

EDIT:

Here is some updated code based upon what @Chief17 suggested. Best I can tell none of this is working. I am using value as a test because it works for some reason

            <label>Mailing address same as residental address</label>
        <input name="checkbox" onclick="disable_enable()" type="checkbox" style="width:15px"/><br/><br/>

        <script type="text/javascript">

            function disable_enable(){

                if (document.getElementById("mail_street_address").getAttribute("disabled")=="disabled")
                    document.form.mail_street_address.value=0;
                    //document.getElementById("mail_street_address").removeAttribute("disabled");
                    //document.getElementById("mail_city").removeAttribute("disabled");
                    //document.getElementById("mail_state").removeAttribute("disabled");
                    //document.getElementById("mail_zip").removeAttribute("disabled");

                else
                    document.form.mail_street_address.value=1;
                    //document.getElementById("mail_street_address").setAttribute("disabled","disabled");
                    //document.getElementById("mail_city").setAttribute("disabled","disabled");
                    //document.getElementById("mail_state").setAttribute("disabled","disabled");
                    //document.getElementById("mail_zip").setAttribute("disabled","disabled");
            }

        </script>

• php
• javascript
• html
• forms
• input

Share Improve this question Follow edited Jun 15, 2010 at 23:36 ubiquibacon asked Jun 15, 2010 at 20:12 ubiquibaconubiquibacon 10.7k3030 gold badges115115 silver badges186186 bronze badges 4

• 2 You'll need JScript or actually JavaScript (confusing names for almost the same thing), since those actions take place in the browser (client-side) after the page is loaded, while PHP can only do things during the page load (i.e. PHP produces the page). – MvanGeest Commented Jun 15, 2010 at 20:15
• Yeah, I just realized I put JScript instead of JavaScript. Thanks for catching that. – ubiquibacon Commented Jun 15, 2010 at 20:16
• 1 instead of disabled=false it should be disabled="disabled"... take a look at my post, it says all you should need to know :o) – OdinX Commented Jun 15, 2010 at 22:03
• PHP can generate stuff if it's requested via AJAX, but it's not really efficient in this case. – Nik Commented Jun 15, 2010 at 23:58

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Unfortunately, since you're doing it in response to user input without a form being sent back to the server, you have to do it through JavaScript.

input elements in JavaScript have both readonly and disabled attributes. If you want them pletely disabled, you need to use JavaScript (or a library like jQuery) to change the disabled attribute's value to "disabled".

Note that the disabled inputs will not have their values sent to the server when the form is submitted.

Deleted my other post entirely and replaced with all the code you should need:

    <script type="text/javascript">

    function disable_enable()
    {
        if(document.getElementById("checkbox").checked != 1)
        {
            document.getElementById("input1").removeAttribute("disabled");
            document.getElementById("input2").removeAttribute("disabled");
            document.getElementById("input3").removeAttribute("disabled");
            document.getElementById("input4").removeAttribute("disabled");
        }
        else
        {
            document.getElementById("input1").setAttribute("disabled","disabled");
            document.getElementById("input2").setAttribute("disabled","disabled");
            document.getElementById("input3").setAttribute("disabled","disabled");
            document.getElementById("input4").setAttribute("disabled","disabled");
        }
    }

    </script>

and

    <label>Mailing address same as residental address</label>
    <input id="checkbox" onClick="disable_enable()" type="checkbox" style="width:15px"/><br/><br/>
    <input type="text" id="input1" />
    <input type="text" id="input2" />
    <input type="text" id="input3" />
    <input type="text" id="input4" />

Basically, loop through inputs, check if they're checkboxes, add event handlers...

Working sample in plain old javascript: http://www.theredhead.nl/~kris/stackoverflow/enable-or-disable-input-based-on-checkbox.html

the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title>Enable/disable input based on checkbox</title>
        <script type="text/javascript">
        // setup a bit of code to run after the document has loaded. (note that its set on window)
        window.addEventListener('load', function(){
            potential_checkboxes = document.getElementsByTagName('input');
            for(i = 0; i < potential_checkboxes.length; i ++) {
                element = potential_checkboxes[i];
                // see if we have a checkbox

                if (element.getAttribute('type') == 'checkbox') {
                    // initial setup
                    textbox = document.getElementById(element.getAttribute('rel'));
                    textbox.disabled = ! element.checked;

                    // add event handler to checkbox
                    element.addEventListener('change', function() {
                        // inside here, this refers to the checkbox that just got changed
                        textbox = document.getElementById(this.getAttribute('rel'));
                        // set disabled property of textbox to not checked property of this checkbox
                        textbox.disabled = ! this.checked;
                    }, false);
                }               
            }
        }, false);
        </script>
    </head>
    <body>
        <h1>Enable/disable input based on checkbox.</h1>

        <form>
            <label for="textbox_1">
                Textbox 1: 
                <input id="textbox_1" type="text" value="some value" />
            </label>
            <br />
            <input id=="checkbox_1" type="checkbox" rel="textbox_1" />
            <label for="checkbox_1">Enable textbox 1?</label>
            <hr />
        <form>
    </body>
</html>

The easiest way is to use JavaScript to enable or disable the form elements when the checkbox's checked status is changed.

That said, you will still need to filter for that checkbox when handling the post on the server, as some browsers will have JS turned off and thus the change will not happen

本文标签： phpHow to gray out HTML form inputsStack Overflow