Добавить в input формы html-код определенного элемента со страницы

Question

Подскажите, можно ли в тег input формы добавить html-код выбранного элемента страницы? У меня есть форма с динамически добавляемыми инпутами. И мне нужно добавлять в эти инпуты html-код выбранных пользователем строк прайса.

То есть, условно, нужен какой-то такой результат:

<form>
  <input name='userdata' value='<tr><td>Ля</td><td>Ля-ля</td><td>Ля-ля-ля</td></tr>' />
  <input name='userdata' value='<tr><td>Бум</td><td>Бум-бум</td><td>Ни-бум-бум</td></tr>' />
</form>

Можно ли так делать? Что-то я не нашла ничего толкового на сей счет в сети. Экранировать, может, нужно?

Мне требуется именно html-код строк прайса получать в инпуты формы и отправлять в localStorage или на сервер (в зависимости от статуса авторизации).

Если так нельзя делать, то как можно решить эту задачу?

Спасибо!

Answer 1

Надеюсь что верно понял вашу задачу. Если нет, то тогда мне остаётся надеяться только на то что написанный ниже пример кода хотя бы направит вас в нужном направлении или подаст идею. Удачи!

// Вешаем на всю страницу обработчик события клика.
document.addEventListener('click', getHtmlIntoInput, false);

// А вот и функция которую вам скорее всего нужно будет подправить под свои требования.
function getHtmlIntoInput(event) {
  const input = document.querySelector('#html-holder-input');
  input.value = event.target.outerHTML;
}

input {
  width: 320px;
  margin-bottom: 16px;
}

table {
  border: 1px solid dodgerblue;
  margin-bottom: 16px;
}

button {
  margin-bottom: 16px;
}

.card {
  padding: 16px;
  border: 1px solid dodgerblue;
}

<input id="html-holder-input" type="text" placeholder="сюда будем вставлять HTML выбранного элемента">

<br> //Ниже различные элементы (по нажатию на них будем помещать их HTML в инпут)
<br><br>

<table class="random-table">
  <thead>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>9</td>
      <td>10</td>
    </tr>
  </tbody>
</table>

<button id="btn">Button</button>

<div class="card">
  <h2>Карточка чего-либо</h2>
  <p>Описание карточки Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, earum?</p>
</div>

БЛОГ НА HUSL

Добавить в input формы html-код определенного элемента со страницы

Ответы (1 шт):