Форма выбора объекта, динамически меняющего имя класса с помощью php и javascript? - PullRequest
Новая
       8

Форма выбора объекта, динамически меняющего имя класса с помощью php и javascript?

0 голосов
/ 12 октября 2010

Возникли проблемы с этим.

Настройка:

A select объект с выбором «Other»

Пользователь выбирает «Другое».

Скрипт запускается при выборе этого конкретного значения и динамически изменяет объект class из input с «скрыть» на «показывать» (скрытый и видимый с помощью css display). 

<p>Select a Grade:</p>
    <select name="grade" id="grade" onchange="changeCssClass('otherGrade')">
    <option value="No Specified Grade">Please Select</option>
    <option value="201">201</option>
        ...
    <option value="Secondary">Secondary</option>
    <option value="otherGrade">Other</option>
    </select>

<p>If "Other":</p>
<?php
    $otherGrade = $_POST['grade'];

    if($otherGrade = "otherGrade")
    {
    echo("<script language='javascript' type='text/javascript'>

        function changeCssClass(objInputID)
        {               

                    if(document.getElementById(objInputID).className=='hide')
            {
                        document.getElementById(objInputID).className = 'show';
            }
            else
            {
                document.getElementById(objInputID).className = 'hide';
            }
        }

        </script>");
    }
    else
    {
        echo ("");
    }
?>

<input type="text" name="otherGrade" id="otherGrade" class="hide" />

Должен ли я удалить событие onchange из объекта select? Если это так, я не знаю, как выполнить скрипт.

Любые решения будут с благодарностью.

Ответы [ 3 ]

1 голос
/ 12 октября 2010

Сценарий всегда должен быть включен на вашу страницу, так как вы хотите, чтобы он запускался при внесении изменений в раскрывающийся список. 

<script language='javascript' type='text/javascript'>
    function changeCssClass(objInputID, currentVal, correctVal)
    {         
       if(correctVal == currentVal)
        {
                    document.getElementById(objInputID).className = 'show';
        }
        else
        {
            document.getElementById(objInputID).className = 'hide';
        }
    }
</script>

<p>Select a Grade:</p>
<select name="grade" id="grade" onchange="changeCssClass('otherGrade', this.value, 'otherGrade')">
<option value="No Specified Grade">Please Select</option>
<option value="201">201</option>
    ...
<option value="Secondary">Secondary</option>
<option value="otherGrade">Other</option>
</select>

<p>If "Other":</p>

<input type="text" name="otherGrade" id="otherGrade" class="hide" />

Пример в реальном времени: http://www.jsfiddle.net/MVymF/

0 голосов
/ 12 октября 2010

При публикации страница будет обновляться, при повторной загрузке вы не сохраняете выбранное значение поля выбора.

Поле выбора не остается выбранным после публикации.Вы должны сделать это.

> Другое

По мере изменения значения параметра отображение скрытия также исчезло.Исправьте это

Если нет необходимости отправлять страницу.используйте это

http://api.jquery.com/val/

проверить демонстрацию выбора

0 голосов
/ 12 октября 2010

почему вы помещаете это в пост-событие?Вы можете просто представить это как стандартный JavaScript как часть страницы.

...