Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.01.2017, 08:18
Профессор
Отправить личное сообщение для javascript_pupil Посмотреть профиль Найти все сообщения от javascript_pupil
 
Регистрация: 05.07.2009
Сообщений: 160

Модифицировать скрипт для работы с несколькими формами на одной странице
Есть простейший скрипт, подсчитывающий количество знаков в поле textarea. Вот он:

<!doctype html>
<html>
<head>
<script>
function countChars(name) {
var els = document[name].getElementsByTagName("textarea");
for (var i = 0; i < els.length; i++)
els[i].onkeyup = function () {
document[name]['field' + this.name].value = this.value.length;
};
}
</script>
<title>Счетчик</title>
</head><body>

<div class="wrap">

<form action="script.cgi" method="post" name="new_record" id="web">
<fieldset><label for="text">Текст
<br><span class="ta_count">знаков <input type="text" name="fieldtext" disabled></span></label>
<textarea id="text" name="text" placeholder="" required></textarea>
</fieldset>
<script>countChars('new_record');</script>
<input type="submit" value="Добавить запись"> <input type="reset" value="Сброс">
</form>

</div>
</body></html>


Возникла необходимость работать с несколькими одинаковыми формами на странице. Вот так, например:

<!doctype html>
<html>
<head>
<script>
function countChars(name) {
var els = document[name].getElementsByTagName("textarea");
for (var i = 0; i < els.length; i++)
els[i].onkeyup = function () {
document[name]['field' + this.name].value = this.value.length;
};
}
</script>
<title>Счетчик</title>
</head><body>

<div class="wrap">

<form action="script.cgi" method="post" name="new_record" id="web">
<fieldset><label for="text">Текст
<br><span class="ta_count">знаков <input type="text" name="fieldtext" disabled></span></label>
<textarea id="text" name="text" placeholder="" required></textarea>
</fieldset>
<script>countChars('new_record');</script>
<input type="submit" value="Добавить запись"> <input type="reset" value="Сброс">
</form>

<form action="script.cgi" method="post" name="new_record" id="web">
<fieldset><label for="text">Текст
<br><span class="ta_count">знаков <input type="text" name="fieldtext" disabled></span></label>
<textarea id="text" name="text" placeholder="" required></textarea>
</fieldset>
<script>countChars('new_record');</script>
<input type="submit" value="Добавить запись"> <input type="reset" value="Сброс">
</form>

</div>
</body></html>


Изменить названия и идентификаторы форм, а также поля "text" нельзя, а поля, где отображаются счетчики - можно. Например, можно их пронумеровать.

Непонятно как изменить скрипт. Пробовал так, но не работает:

function countChars(name, number) {
...
document[name]['field' + this.name + number].value = this.value.length;


Подскажите, пожалуйста, как работать с несколькими формами на одной странице в данном случае?
Ответить с цитированием
  #2 (permalink)  
Старый 30.01.2017, 08:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,785

javascript_pupil,
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
<script>
window.addEventListener('DOMContentLoaded', function() {
  [].forEach.call(document.querySelectorAll('form'), function(form) {
          form.addEventListener('input', function() {
              form.fieldtext.value = form.text.value.length;
          });
      });
    });
</script>
<title>Счетчик</title>
</head><body>

<div class="wrap">

<form action="script.cgi" method="post" name="new_record" id="web">
<fieldset><label for="text">Текст
<br><span class="ta_count">знаков <input type="text" name="fieldtext" disabled></span></label>
<textarea id="text" name="text" placeholder="" required></textarea>
</fieldset>
<script>countChars('new_record');</script>
<input type="submit" value="Добавить запись"> <input type="reset" value="Сброс">
</form>

<form action="script.cgi" method="post" name="new_record" id="web">
<fieldset><label for="text">Текст
<br><span class="ta_count">знаков <input type="text" name="fieldtext" disabled></span></label>
<textarea id="text" name="text" placeholder="" required></textarea>
</fieldset>
<script>countChars('new_record');</script>
<input type="submit" value="Добавить запись"> <input type="reset" value="Сброс">
</form>

</div>
</body></html>
Ответить с цитированием
  #3 (permalink)  
Старый 30.01.2017, 09:36
Профессор
Отправить личное сообщение для javascript_pupil Посмотреть профиль Найти все сообщения от javascript_pupil
 
Регистрация: 05.07.2009
Сообщений: 160

Это просто чудо какое-то! Жаль только, что не всё в нем понятно. И есть еще одна проблемка. Форму для примера я сильно упростил для наглядности. Но дело в том, что в реальной форме есть несколько полей textarea и в javascript'е надо их формировать "на лету". Вот это и непонятно как?

Когда поле одно, то работает
form.fieldtext.value = form.text.value.length;


А когда там еще и fieldtext2 и text2, то они разумеется не подсчитываются, т.к. имена у них уже другие. У меня вот эта строка именно такой и была из-за этого:

document[name]['field' + this.name].value = this.value.length;


Т.к. "this" был разный у разных полей. Т.е. в форме, например, 3 textarea с разными именами. Пока форма была одна на странице - у меня все работало, как только их потребовалось больше одной - перестало. А все счетчики формировались с ключевым словом field для возможности последующей обработки как javascript, так и в CSS.
Ответить с цитированием
  #4 (permalink)  
Старый 30.01.2017, 09:49
Профессор
Отправить личное сообщение для javascript_pupil Посмотреть профиль Найти все сообщения от javascript_pupil
 
Регистрация: 05.07.2009
Сообщений: 160

Т.е. такая конструкция уже не работает.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
<script>
function countChars(name) {
window.addEventListener('DOMContentLoaded', function() {
  [].forEach.call(document.querySelectorAll('form'), function(form) {
          form.addEventListener('input', function() {
              form.fieldtext.value = form.text.value.length;
          });
      });
    });
}
</script>
<title>Счетчик</title>
</head><body>

<div class="wrap">

<form action="script.cgi" method="post" name="new_record" id="web">
<fieldset><label for="text">Текст
<br><span class="ta_count">знаков <input type="text" name="fieldtext" disabled></span></label>
<textarea id="text" name="text" placeholder="" required></textarea>
</fieldset>
<fieldset><label for="note">Примечание
<br><span class="ta_count">знаков <input type="text" name="fieldnote" disabled></span></label>
<textarea id="text" name="note" placeholder="" required></textarea>
</fieldset>
<script>countChars('new_record');</script>
<input type="submit" value="Добавить запись"> <input type="reset" value="Сброс">
</form>

<form action="script.cgi" method="post" name="new_record" id="web">
<fieldset><label for="text">Текст
<br><span class="ta_count">знаков <input type="text" name="fieldtext" disabled></span></label>
<textarea id="text" name="text" placeholder="" required></textarea>
</fieldset>
<fieldset><label for="note">Примечание
<br><span class="ta_count">знаков <input type="text" name="fieldnote" disabled></span></label>
<textarea id="text" name="note" placeholder="" required></textarea>
</fieldset>
<script>countChars('new_record');</script>
<input type="submit" value="Добавить запись"> <input type="reset" value="Сброс">
</form>

</div>
</body></html>
Ответить с цитированием
  #5 (permalink)  
Старый 30.01.2017, 10:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,785

javascript_pupil, вызывать скрипт, который ниже в коде, повторно не нужно. достаточно одной таблетки!
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
<script>
document.addEventListener("input", function(a) {
    a = a.target;
    var b;
    "TEXTAREA" == a.tagName && (b = a.parentNode.querySelector("input")) && (b.value = a.value.length)
});
</script>
<title>Счетчик</title>
</head><body>

<div class="wrap">

<form action="script.cgi" method="post" name="new_record" id="web">
<fieldset><label for="text">Текст
<br><span class="ta_count">знаков <input type="text" name="fieldtext" disabled></span></label>
<textarea id="text" name="text" placeholder="" required></textarea>
</fieldset>
<fieldset><label for="note">Примечание
<br><span class="ta_count">знаков <input type="text" name="fieldnote" disabled></span></label>
<textarea id="text" name="note" placeholder="" required></textarea>
</fieldset>

<input type="submit" value="Добавить запись"> <input type="reset" value="Сброс">
</form>

<form action="script.cgi" method="post" name="new_record" id="web">
<fieldset><label for="text">Текст
<br><span class="ta_count">знаков <input type="text" name="fieldtext" disabled></span></label>
<textarea id="text" name="text" placeholder="" required></textarea>
</fieldset>
<fieldset><label for="note">Примечание
<br><span class="ta_count">знаков <input type="text" name="fieldnote" disabled></span></label>
<textarea id="text" name="note" placeholder="" required></textarea>
</fieldset>

<input type="submit" value="Добавить запись"> <input type="reset" value="Сброс">
</form>

</div>
</body></html>
Ответить с цитированием
  #6 (permalink)  
Старый 30.01.2017, 11:14
Профессор
Отправить личное сообщение для javascript_pupil Посмотреть профиль Найти все сообщения от javascript_pupil
 
Регистрация: 05.07.2009
Сообщений: 160

Я не перестаю удивляться. Спасибо, сейчас всё работает.

Что касается "одной таблетки". Дело в том, что сам javascript находится во внешнем файле, его нет на странице. Формы же формируются динамически и не во всех из них есть textarea. Если же она присутствует, то следом за ней автоматически вставляется

<script>countChars('new_record');</script>


Надо же его как-то вызвать. Можно конечно сделать чтобы повторных вызовов не было. Они на что-то влияют? И как я понимаю 'new_record' теперь не требуется, достаточно countChars()?
Ответить с цитированием
  #7 (permalink)  
Старый 30.01.2017, 11:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,785

javascript_pupil,
зачем нужны повторные вызовы и какая разница как будет загружен скрипт ...
Сообщение от javascript_pupil
Я не перестаю удивляться.
Ответить с цитированием
  #8 (permalink)  
Старый 30.01.2017, 11:49
Профессор
Отправить личное сообщение для javascript_pupil Посмотреть профиль Найти все сообщения от javascript_pupil
 
Регистрация: 05.07.2009
Сообщений: 160

Уберу, а то меня уже совесть замучила, что программа их лишний раз вставляет.

Еще хотел спросить, почему обязательно писать в верхнем регистре TEXTAREA? Интересно прочитать, но не знаю что искать. В JavaScript Фленагана (5 издание) мне такое не попадалось.
Ответить с цитированием
  #9 (permalink)  
Старый 30.01.2017, 11:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,785

Сообщение от javascript_pupil
почему обязательно писать в верхнем регистре TEXTAREA?
tagname
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Простейший скрипт для Оперы, нужна помощь horse Opera, Safari и др. 1 31.10.2015 12:20
Не выполняется скрипт на подгружаемой странице AlThar ExtJS 1 21.01.2011 14:10
Скрипт для выдачи одной из трех случайных ссылок+iframe nv43 Общие вопросы Javascript 2 09.12.2010 12:20
Модуль для работы с модулями JSprog Ваши сайты и скрипты 29 02.09.2009 12:31
Два одинаковых сценария на одной странице Genetics Общие вопросы Javascript 7 12.07.2009 00:46