Динамическое изменение класса HTML-элемента не работает эффективно - PullRequest
Новая
       24

Динамическое изменение класса HTML-элемента не работает эффективно

0 голосов
/ 18 августа 2011

Я написал HTML-страницу, которая содержит форму. Форма проверяется страницей PHP, имеющей в начале страницы HTML: 

<script type="text/javascript" src="js/mootools/core.js"></script> 
<script type="text/javascript" src="js/mootools/more.js"></script>
<script type="text/javascript" src="js/formcheck/lang/fr.js"> </script>
<script type="text/javascript" src="js/formcheck/formcheck.js"> </script>

<script type="text/javascript">
    window.addEvent('domready', function(){
       new FormCheck('form');
});
</script>

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

Следующий пример кода HTML-страницы - это переключатель, чтобы узнать, есть ли у посетителя страницы автомобиль. Если она / он задает «да», тогда добавляется класс «validate ['required»] »для выбора количества автомобилей, что означает, что пользователь должен выбрать значение (количество автомобилей). В противном случае у пользователя нет машины, и ему не нужно выбирать, а пустая строка по умолчанию принимается и передается. 

<input type="radio" name="cars" value="yes" onclick="document.getElementById('number_of_cars').setAttribute('class','validate[\'required\']');">oui
<input type="radio" name="cars" value="no" checked="checked">no



<label>How many cars do you have ? :</label>        
<select name="number_of_cars" id="number_of_cars">
<option value="">-</option>
<option value="01" >01</option>
<option value="02" >02</option>
<option value="03" >03</option>
</select>

Проблема, с которой я столкнулся, заключается в том, что при проверке с помощью Firebug элемент HTML имеет класс 'validate [' required ']' при необходимости (переключатель Да), но страница PHP, похоже, не работает, поскольку форма передается даже если пользователь не выбрал несколько машин.

Я предполагаю, что событие "domready" в части Javascript моей HTML-страницы не подходит, но я не знаю, что делать.

Редактировать: я изменил элемент javascript на onChange, но он тоже не работает.

1 Ответ

1 голос
/ 18 августа 2011

window.addEvent ('domready') является частью библиотеки MooTools , он не является частью самого Javascript. Мне кажется, что вы этим не пользуетесь, поэтому вам следует либо добавить скрипт MooTools в ваш html, либо использовать событие onLoad.

MooTools используется

Редактировать

Либо это, либо значение, которое вы отправляете с объектом FormCheck, неверно. FormCheck нужен идентификатор, а не тэг, поэтому у вас должно быть по крайней мере где-то: 

<form id="myForm">

new FormCheck('myForm');

Редактировать 2

Если вы уже используете MooTools, лучше всего использовать встроенные обработчики событий. Прямых подходов, таких как onClick и onLoad, следует избегать из-за кросс-браузерных проблем. Об этом позаботится MooTools. 

<script type="text/javascript">
  window.addEvent('domready', function(){
    $('cars').addEvent('click', function() {
      $('number_of_cars').addClass("validate['required']");
    });

    new FormCheck('form');
  });
</script>

MooTools нужны идентификаторы, чтобы это работало, поэтому: 

<input type="radio" name="cars" id="cars" value="yes">

Редактировать 3

Также внимательно прочитайте документы FormCheck. Они содержат много примеров кода: http://mootools.floor.ch/en/demos/formcheck/

Документы: http://mootools.floor.ch/docs/formcheck/files/formcheck-js.html

Надеюсь, это поможет

...