Блог

Главная - Вопросы по программированию - Моя кнопка отправляет не ее форму, а другую форму

Моя кнопка отправляет не ее форму, а другую форму

#javascript #html #ajax #forms #input

Вопрос:

У меня есть 2 формы в моем html-коде, но когда я нажимаю кнопку form2, отправляется значение form1

   function chk() {
    var text = document.getElementById('text').value;
    console.log(text);

    return false;
  } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="form1">
  <input type="text" id="text" value="Hi">
  <input type="submit" id="submit1" onclick="return chk()">
  <label for="submit1">Hi</label>
</form>

<form id="form2">
  <input type="text" id="text" value="bonjour">
  <button id="submit2" onclick="return chk()">btn</button>
  <label for="submit2">bonjour</label>
</form>

Комментарии:

1. Чего вы пытаетесь достичь? Нажатие кнопки вызывает функцию, которая считывает и печатает значение ввода в первой форме. Если вы хотите отправлять только формы, создайте кнопки типа «отправить».

Ответ №1:

Идентификаторы должны быть уникальными на странице. Вместо этого вы можете использовать a name для входных элементов.

 function chk(formId) {
  var text = document.getElementById(formId).querySelector('input[name=text]').value;
  console.log(text);
  return false;
} 
 <form id="form1">
  <input type="text" name="text" value="Hi">
  <input type="submit" id="submit1" onclick="return chk('form1')">
  <label for="submit1">Hi</label>
</form>
<form id="form2">
  <input type="text" name="text" value="bonjour">
  <button id="submit2" onclick="return chk('form2')">btn</button>
  <label for="submit2">bonjour</label>
</form>

Комментарии:

1. @lucax979 Рад помочь.

Ответ №2:

идентификатор «текст» используется в вашем коде дважды, что может привести к путанице, вам следует попробовать изменить его на «текст1» и «текст2» И использовать тот, который вам нужен в вашей функции.

Комментарии:

1. на самом деле это не «ведет к путанице», а неправильно. Идентификатор должен быть уникальным. Лучшим в этих случаях является то, что первый элемент с идентификатором dup принимается во внимание, а остальные просто игнорируются

Метки: ,