Как выделить данные формы HTML серым цветом? - PullRequest
Новая
       4

Как выделить данные формы HTML серым цветом?

3 голосов
/ 16 июня 2010

Каков наилучший способ скрыть текстовые вводы в форме HTML?Мне нужно, чтобы входы были серыми, когда пользователь установил флажок.Должен ли я использовать JavaScript для этого (не очень хорошо знаком с JavaScript) или я могу использовать PHP (с которым я более знаком)?

РЕДАКТИРОВАТЬ:

Посленемного читая, у меня есть немного кода, но это доставляет мне проблемы.По какой-то причине я не могу заставить мой скрипт работать, основываясь на состоянии ввода формы (включен или выключен) или состоянии моего флажка (установлен или не отмечен), но мой скрипт работает нормально, когда я основываю его на значениях формывходы.Я написал свой код точно так же, как несколько примеров в Интернете (в основном этот ), но безрезультатно.Ничто из того, что закомментировано, не сработает.Что я здесь не так делаю? 

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

РЕДАКТИРОВАТЬ:

Вот обновленный код, основанный на том, что предложил @ Chief17.Лучше всего я могу сказать, что ничего из этого не работает.Я использую value в качестве теста, потому что он работает по какой-то причине 

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

Ответы [ 4 ]

6 голосов
/ 16 июня 2010

К сожалению, поскольку вы делаете это в ответ на ввод пользователя без отправки формы обратно на сервер, вы должны сделать это через JavaScript.

элементы ввода в JavaScript имеют как readonly, так иdisabled атрибуты.Если вы хотите, чтобы они были полностью отключены, вам нужно использовать JavaScript (или библиотеку типа jQuery ), чтобы изменить значение атрибута disabled на «disabled».

Обратите внимание, что отключенные входы не будут иметьих значения отправляются на сервер при отправке формы.

2 голосов
/ 16 июня 2010

В основном, проходите через входы, проверяйте, не являются ли они флажками, добавляйте обработчики событий ...

Рабочий образец в простом старом javascript: http://www.theredhead.nl/~kris/stackoverflow/enable-or-disable-input-based-on-checkbox.html

код: 

<!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>
2 голосов
/ 16 июня 2010

Полностью удалил мой другой пост и заменил на него весь необходимый код: 

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

и 

    <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" />
0 голосов
/ 16 июня 2010

Самый простой способ - использовать JavaScript для включения или отключения элементов формы при изменении состояния флажка.

При этом вам все равно нужно будет фильтровать этот флажок при обработке сообщения на сервере, поскольку в некоторых браузерах JS отключен, и поэтому изменения не произойдут

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...