Как использовать один js-обработчик для получения данных с разных форм?

Zerkysa
Zerkysa
793
3
Содержание:
  1. Комментарии
Доброго времени суток!
Суть проблемы.
Есть форма:
<?php
echo '<form action="" class="'.$row[1].'">';
echo '<input id="text" type="hidden" value="'.$row[1].'"></input>';
echo '<input onclick="send();" value="'.$row[1].'" type="button">';
echo '</form>';
?>

В это коде $row[1] — это переменная, которая используется для разделения одной формы от другой такой же формы.

Сам обработчик:

<script>
function send()
{
	$form = $(this); 
	//Получаем параметры
	var text = $('#text').val()
	// Отсылаем параметры
  $.ajax({
    type: "POST",
    url: "/action.php",
    data: "text="+text,
    //При удачном завершение запроса - выводим то, что нам вернул PHP
    success: function(html) {
		  //предварительно очищаем нужный элемент страницы
      $("#response").empty();
		  //и выводим ответ php скрипта
      $("#response").append(html);
    }
  });
}
</script>

Если одна форма проблем нету, если больше одной формы — то он все равно выводит данные от первой формы. Видимо не видит в теге form имя класса. Как поправить код, что можно было получить данные с разных форм используя один и тот же обработчик?

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

  1. Александр Мальцев
    Александр Мальцев
    10.05.2018, 17:03
    Добрый день!
    HTML-код лучше не смешивать с JavaScript.
    Для того чтобы к кнопкам добавить обработчик, их как-то нужно индентифицировать.
    Например, к ним можно давить класс send:
    echo '<input class="send" value="'.$row[1].'" type="button">';
    
    Кроме этого, давать элементов формы имена (если их тем более будет несколько и они должны иметь одинаковые поля) необходимо с помощью атрибута name:
    echo '<input name="text" type="hidden" value="'.$row[1].'"></input>';
    
    Пример, как можно добавить обработку события click для кнопок, имеющих класс send:
    <script>
    $('.send').click(function(){
      $btn = $(this); // this - это кнопка
      $form = $btn.closest('form'); // получаем форму, в которой находится эта кнопка
      var text = $form.find('[name="text"]').val(); // получим значение поля text, расположенной в форме $form
      ...
    });
    
    1. Zerkysa
      Zerkysa
      10.05.2018, 18:48
      Спасибо Александр! Не совсем понял фразу «HTML-код лучше не смешивать с JavaScript». Имеется ввиду писать функции JavaScript в отдельном файле и их потом подключать?
      1. Александр Мальцев
        Александр Мальцев
        11.05.2018, 13:15
        Не использовать их атрибутах HTML элементов.
    Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.