Javascript входные значения исчезают при нажатии кнопки

Question

Я пытаюсь смоделировать ввод данных для формы в ванили Javascript. Я не могу манипулировать HTML.

Мой код работает нормально, пока не будет нажата кнопка окончательного сохранения, а затем заполненные входы очищены. Как я могу заполнить поля ввода и убедиться, что данные не очищаются при нажатии на последнюю кнопку Сохранить?

HTML:

<input placeholder="What is the title" maxlength="50" type="text" data-vv-name="title" aria-label="form__text" class="form__text p--4" aria-required="true" aria-invalid="false">

<textarea placeholder="Describe it! (required)" maxlength="500" data-vv-name="description" aria-label="form__text" class="form__text listing-editor__description__input p--3" aria-required="true" aria-invalid="false" style="height: 135px;"></textarea>

Javascript:

if (document.querySelectorAll('.p--4')[0]) {
    document.querySelectorAll('.p--4')[0].value = "Wuthering Heights by Emily Brontë";
    document.querySelector('.p--4').dispatchEvent(new Event('change', {
        'bubbles': true
    }));
}
if (document.querySelectorAll('.p--3')[0]) {
    document.querySelectorAll('.p--3')[0].value = "Wuthering Heights is a novel by Emily Brontë published in 1847 under her pseudonym Ellis Bell. Brontë's only finished novel, it was written between October 1845 and June 1846. Wuthering Heights and Anne Brontë's Agnes Grey were accepted by publisher Thomas Newby before the success of their sister Charlotte's novel Jane Eyre. After Emily's death, Charlotte edited the manuscript of Wuthering Heights and arranged for the edited version to be published as a posthumous second edition in 1850.";
    document.querySelector('.p--3').dispatchEvent(new Event('change', {
        'bubbles': true
    }));
}

Answer 1

Ваш пример кода выглядит неполным, но я предполагаю, что эти элементы находятся внутри элемента form, а кнопка является элементом button с type="submit", а кнопка находится внутри формы.

Если вы не хотите, чтобы кнопка отправки публиковала форму, вам нужно запретить поведение по умолчанию:

const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  console.log('Do stuff here...');
});

<form>
  <button type="submit">Submit</button>
</form>