При отправке соберите текст из входных данных и отобразите его в отдельной текстовой области.

Проект: редактируемый HTML-шаблон электронной почты

Цель: создать удобный набор входных данных, который после отправки формы собирает введенный текст и вставляет его между указанными тегами p. Код, который создает шаблон электронной почты, находится в текстовой области внизу страницы, откуда пользователь может скопировать HTML-код и вставить его в электронное письмо, не заходя в HTML-код для внесения изменений. Каждый ввод в форме имеет идентификатор, как и соответствующие теги в HTML, где я хочу, чтобы введенный текст отображался

Вот форма:

<body>
<div id="content"> 
<div id="field">
    <form id="myForm" action="">
        <h2> Header </h2>
        <textarea id="header" cols="40" rows="5"></textarea> 
        <h2>Draft Details </h2>
        <textarea id="draft" cols="40" rows="5"></textarea>  
        <h2>Event 1 Image (left)</h2>
        <input id="ev1Img" type="file">
        <h2>Event 1 Details </h2>
        <textarea id="ev1Det" cols="40" rows="5"></textarea>
        <h2>Event 2 Image (right)</h2>
        <input id="ev2Img" type="file">
        <h2>Event 2 Details</h2>
        <textarea id="ev2Det" cols="40" rows="5"></textarea>
        <button type="submit">Generate Email Code</button>

    </form>
</div>

Текстовая область внизу (которая содержит шаблон HTML) имеет p тегов со своими собственными идентификаторами:

 <p id="Xheader"></p> ...etc

Я пытаюсь использовать Javascript и Jquery, чтобы получить входные данные и заполнить мои теги p в HTML:

    <script> 

       var dataY = document.getElementById("header", "draft", "ev1Det", "ev2Det").text();
       var dataX = document.getElementById("Xheader", "Xdraft", "Xev1Det","Xev2Det").text();
       document.ready(function() {
          document.getElementById("button").click(function() {
            dataX.text() = dataY.text();
          });
       });

    </script>

Какие есть решения, чтобы сделать эту работу? Я на правильном пути? Я уверен, что мой JS/ JQ - вот где проблема

Источник

1 ответ

Предположим, у вас есть function называется write, который ожидает id и text, Я предполагаю, что вы уже знаете, как реализовать это, и что вы имели в виду textarea когда ты упомянул input,

$("#myForm").submit(function() {
    $(this).find("textarea").each(function() {
        write($(this).attr("id"), $(this).val());
    });
});

Первая строка создает submit обработчик для вашего formвторая повторяет textarea элементы внутри form и третий звонки write за textarea элементы. Обратите внимание, что если вы не определите nameдля вашего form элементы, они не будут отправлены на сервер после submit и обратите внимание, что когда вы работаете с JavaScript, this относится к function Вы в.

Источник
Другие вопросы по тегам