Javascript-форум - Модифицировать скрипт для работы с несколькими формами на одной странице

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Модифицировать скрипт для работы с несколькими формами на одной странице (https://javascript.ru/forum/misc/67134-modificirovat-skript-dlya-raboty-s-neskolkimi-formami-na-odnojj-stranice.html)

Модифицировать скрипт для работы с несколькими формами на одной странице

Есть простейший скрипт, подсчитывающий количество знаков в поле 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;

Подскажите, пожалуйста, как работать с несколькими формами на одной странице в данном случае?

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>

Это просто чудо какое-то! :) Жаль только, что не всё в нем понятно. И есть еще одна проблемка. Форму для примера я сильно упростил для наглядности. Но дело в том, что в реальной форме есть несколько полей 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.

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

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

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>

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

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

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

Надо же его как-то вызвать. Можно конечно сделать чтобы повторных вызовов не было. Они на что-то влияют? И как я понимаю 'new_record' теперь не требуется, достаточно countChars()?

javascript_pupil,
зачем нужны повторные вызовы и какая разница как будет загружен скрипт ...

Цитата:

Сообщение от javascript_pupil

Я не перестаю удивляться.

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

Еще хотел спросить, почему обязательно писать в верхнем регистре TEXTAREA? Интересно прочитать, но не знаю что искать. В JavaScript Фленагана (5 издание) мне такое не попадалось.

Цитата:

Сообщение от javascript_pupil

почему обязательно писать в верхнем регистре TEXTAREA?

tagname