Как получить данные из опредленного инпута и передать в php через ajax в opencart'e?

Question

[Beka0101001]

Проблема в том что у меня на странице 3 form'а в котором есть 3 одинаковых инпутов с одинаковыми name и когда я нажимаю на кнопку отправить данные, данные у меня отправляются только из самого верхнего form'a а хотелось бы что бы отправлялись в той форме где я нажал кнопку

Первый форм
<form action="/" method="post" class="main-hero-form">
                <div class="form-row">
                  <input class="form-control" type="text" name="name" placeholder="Ваше имя" autocomplete="name" required="">
                  <input class="form-control" type="tel" name="tel" placeholder="Телефон" autocomplete="phone" required="">
                  <input class="d-none" type="text" name="service" value="Тепловые центры на жидком и газовом топливе с автономной работой">
                </div>
                <button type="submit" class="main-hero-form-send">Запросить стоимость, условия и времени поставки</button>
                <p class="main-hero-text">В течении <span>15 минут</span> вы получите звонок от нашего менеджера, который предоставит подробную консультацию.</p>
              </form>
 Третьи форм 

<form action="/" class="footer-form-2" method="post">
      <div class="form-row">
           <input autocomplete="name" name="name" placeholder="Ваше имя" required="" type="text">
           <input autocomplete="phone" name="tel" placeholder="Телефон" required="" type="tel"> 
           <input class="d-none" name="service" type="text" value="Необходима подробная консультация">
           <button class="btn btn-primary" id="footer-form-2-send" type="submit">Получить&nbsp;бесплатно</button>
      </div>
</form>

$(document).ready(function() {
    $('[type="submit"]').on('click', function() {
        $.ajax({
            url: 'index.php?route=demo/test&language=ru-ru',
            type: 'POST',
            dataType: 'json',
            data: {
                    firstname: $('input[name="name"]').val(),
                    telephone: $('input[name="tel"]').val(),
                    service: $('input[name="service"]').val(),
                 },
            success: function(data) {
                if(data.success) {
                    alert("Заметка добавлена!")
                } else {
                    alert("Ошибка записи!")
                }
            }
        });
    });
});

Controller

class Test extends \Opencart\System\Engine\Controller {
    public function index() {
        $this->load->model('demo/test');
        $json = array();

        date_default_timezone_set('Asia/Almaty');
    
        $firstname = $this->request->post['firstname']; // получаем обе эти переменные из посланных в аяксе через POST данных
        $telephone = $this->request->post['telephone']; 
        $service = $this->request->post['service']; 
        $today = date("Y-m-d H:i:s");
    
        try {
            $this->model_demo_test->addCustomer($firstname, $telephone, $service, $today);
            $json['success'] = 1;
        } catch (\Exception $e) {
            $json['success'] = 0; 
        }
        $this->response->addHeader('Content-Type: application/json');
        $this->response->setOutput(json_encode($json));    
    }
}

MODEL

class Test extends \Opencart\System\Engine\Model {

	public function addCustomer($name, $phone, $service, $today) {
        $this->db->query("INSERT INTO " . DB_PREFIX . "customer(customer_group_id, firstname, telephone, service,  date_added) VALUES (1, '$name', '$phone', '$service', '$today')");
    }
}

Answer 1

[tempick]

Код контроллера и модели тут лишние. Проблема именно здесь:

{
  firstname: $('input[name="name"]').val(),
  telephone: $('input[name="tel"]').val(),
  service: $('input[name="service"]').val(),
},

Значения берутся самые первые, а не из той формы, которая нужна. Вариантов несколько. Я, как слабенький во фронтенде, подскажу самый "тупой" вариант.

$(document).ready(function() {
    $('[type="submit"]').on('click', function() {
        $.ajax({
            url: 'index.php?route=demo/test&language=ru-ru',
            type: 'POST',
            dataType: 'json',
            data: {
                    firstname: $(this).parents('form').find('input[name="name"]').val(),
                    telephone: $(this).parents('form').find('input[name="tel"]').val(),
                    service: $(this).parents('form').find('input[name="service"]').val(),
                 },
            success: function(data) {
                if(data.success) {
                    alert("Заметка добавлена!")
                } else {
                    alert("Ошибка записи!")
                }
            }
        });
    });
});

Есть решения элегантнее, но просто непонятно, есть ли доступ к редактированию html, например

Comments

[Beka0101001]

Спасибо вам огромное за помощь! Доступ есть, если есть еще пути решения моей проблемы вы пишите!!