On submit, gather text from inputs and display it in a separate textarea

Question

Project: An editable HTML email template

Goal: Create a user friendly set of inputs that, upon form submission, gathers the inputted text and inserts it between specified p tags. The code that makes the email template is in a textarea at the bottom of the page, from which the user can copy the HTML and paste it into an email without having to go into the HTML to make changes. Each input in the form has an ID, as do their respective tags in the HTML where I want the inputted text to appear

Here is the form:

<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>

The text area at the bottom (which contains the HTML template) has p tags with their own IDs:

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

I am trying to use Javascript and Jquery to grab the input data and populate my p tags in the 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>

What are some solutions to make this work? Am I on the right track? I'm sure my JS/ JQ is where the problem is

What's the problem? Please include actual vs. expected behavior, JS console logs, etc. — Dave Newton, Sep 14 '15 at 20:56
The code has several problem including: wrong usage of jQuery, trying to select multiple IDs or doing the selection outside of any method (likely these elements don't exist when you call it). So ... all wrong I would say :) — Jan Zyka, Sep 14 '15 at 20:59

score 0 · Answer 1 · answered Sep 14 '15 at 21:01

Let's suppose you have a function called write, which expects an id and a text. I will assume that you already know how to implement that and that you have meant textarea when you mentioned input.

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

The first line creates a submit handler for your form, the second iterates the textarea elements inside the form and the third calls write for textarea elements. Note, that if you do not define names for your form elements, they will not be submitted to the server upon submit and note that when you are working with javascript, this refers to the function you are in.

On submit, gather text from inputs and display it in a separate textarea

1 Answers1