Каким образом можно объединить три похожих скрипта на jQuery в один?

Как я могу изменить скрипт, чтобы избежать его дублирования для каждой формы, сохранив при этом функциональность добавления заголовка секции в форму? Я пытался добавлять заголовок секции при нажатии на кнопку отправки, но он не успевает попасть в форму. Ниже приведен текущий код: 
<pre><code class="javascript">var titleService1 = $('#form-1').find('.form-title').text();
  $('#form-1 input.title_service').val(titleService1).toString().replace(/\s{2,}/g, ' ');

  var titleService2 = $('#form-2').find('.form-title').text();
  $('#form-2 input.title_service').val(titleService2).toString().replace(/\s{2,}/g, ' ');

  var titleService3 = $('#form-3').find('.form-title').text();
  $('#form-3 input.title_service').val(titleService2).toString().replace(/\s{2,}/g, ' ');</code></pre>
  • 25 сентября 2024 г. 6:23
Ответы на вопрос 2
Чтобы объединить три похожих скрипта в один и избежать дублирования, вы можете создать функцию, которая будет обрабатывать каждую форму. Ниже приведен пример, как это можно сделать:

```javascript
// Функция для установки заголовка секции в форму
function setTitleService(formId) {
    var titleService = $(formId).find('.form-title').text();
    $(formId + ' input.title_service').val(titleService.replace(/\s{2,}/g, ' '));
}

// Обработчик события отправки для всех форм
$('form').on('submit', function(event) {
    // Избегаем поведения по умолчанию
    event.preventDefault();
    
    // Устанавливаем заголовок для текущей формы
    setTitleService('#' + $(this).attr('id'));
    
    // Здесь можно добавить дополнительные действия по обработке формы, например, отправку данных
    console.log('Форма отправлена:', $(this).attr('id'));
});

// Пример добавления заголовка при загрузке страницы (если необходимо)
$(document).ready(function() {
    setTitleService('#form-1');
    setTitleService('#form-2');
    setTitleService('#form-3');
});
```

### Объяснение кода:

1. **Функция `setTitleService(formId)`** — принимает идентификатор формы в качестве аргумента, извлекает текст заголовка и устанавливает его в поле ввода `title_service`.

2. **Обработчик события `$('form').on('submit', function(event) {...})`** — добавляет обработчик события отправки для всех форм на странице. Когда форма отправляется, выполняется:
   - Установка заголовка оригинальной формы, используя идентификатор текущей формы.
   - `event.preventDefault()` предотвращает обычное поведение отправки формы (например, перезагрузку страницы), чтобы вы могли сначала выполнить необходимые операции.

3. **`$(document).ready(...)`** — если нужно установить заголовок при загрузке страницы, функция вызывается для каждой формы.

Таким образом, данный код поможет вам избежать дублирования и упростить управление заголовками форм.
Конечно, эта часть ничего не делает 
.toString().replace(/\s{2,}/g, ' ');
Если вам нужно как-то форматировать titleService,
то нужно это делать с ним, и там и так строка
titleService.replace(/\s{2,}/g, ' ');
А вставить можно циклом по всем формам
$('form').each(function() {
    var titleService = $(this).find('.form-title').text().replace(/\s{2,}/g, ' ');
    $(this).find('input.title_service').val(titleService);
  });
Похожие вопросы