Adding content using .append with multiple lines of code

Question

I have a form I am creating. This is the code for the form:

 <form action="post_2.php" method="post" class="pure-form pure-form-stacked">
        <fieldset id="DoctorInfo">
 <legend><strong>Part Two</strong> - Doctor Information</legend>
        <h2>Primary Doctor</h2>
        <div class="pure-g-r">
            <div class="pure-u-1-3">
                <label for="doctorFirstName">Doctor First Name<span style="color: red">*</span></label>
                <input id="doctorFirstName" name="doctorFirstName" type="text" required>
            </div>

            <div class="pure-u-1-3">
                <label for="doctorLastName">Doctor Last Name<span style="color: red">*</span></label>
                <input id="doctorLastName" name="doctorLastName" type="text" required>
            </div>

            <div class="pure-u-1-3">
                <label for="establishmentName">Practice Name<span style="color: red">*</span></label>
                <input id="establishmentName" name="establishmentName" type="text" required>
            </div>

            <div class="pure-u-1-3">
                <label for="focusOfPractice">Type of Doctor<span style="color: red">*</span></label>
                <input id="focusOfPractice" name="focusOfPractice" type="text" value="Primary Care Giver" readonly>
            </div>

            <div class="pure-u-1-3">
                <label for="doctorPhone">Practice Phone Number<span style="color: red">*</span></label>
                <input id="doctorPhone" name="doctorPhone" type="tel" required>
            </div>
        </div>

        <div id="docList"></div>
        </fieldset>


        <fieldset id="confirm2">
            <div class="pure-g-r">  
                <div class="pure-u-1">
                <style scoped>

                .button-next,
                .button-cancel,
                .button-back,
                .button-add{
                    color: white;
                    border-radius: 4px;
                    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
                }

                .button-next {
                    background: rgb(28, 184, 65);
                }

                .button-cancel {
                    background: rgb(202, 60, 60);
                }

                .button-back {
                    background: rgb(223, 117, 20);
                }

                .button-add {
                    background: rgb(66, 184, 221);
                }


            </style>
                    <a href="index.html"><button type="button" class="button-cancel pure-button">Cancel</button></a>
                    <a><button type="button" onclick="history.back();" class="button-back pure-button">Back</button></a>
                    <button type="button" name="add" class="button-add pure-button" id="addDoc">Add Another</button>
                    <a href="signup_3.php"><button type="submit" name="next" class="button-next pure-button">Next</button></a>
                </div>
            </div>
        </fieldset>
        </form>

I also am trying to make the form add another set of input fields using the .append() function from jQuery. Formating is in Pure-CSS.

here is the jsfiddle

I understand that this may be an error with multiple lines, and if that is the case, then I can move to the second part of my question. What do you typically type in JavaScript to help apostrophes and parenthesis meant to remain as part of the string not to truncate the code. For example:

 $(.this).append('<p>Tyler's dog says, "Woof"</p>');

Please keep in mind that I am not a professional programmer in the sense that I know all the jargon and typically obvious things you would expect somebody in CIT to know.

score 3 · Accepted Answer · edited May 23 '17 at 10:26

The string-escape character in JavaScript is the backslash \. You can put a \ at the end of a line in a multi-line string in order to allow it to span multiple lines. You can also use \ to embed quotes inside of strings (which are delineated by quotes). For example:

var myString = "My string\
has multiple lines\
and uses \"double quotes\" too!";

When the JavaScript parser sees \" or \' inside a string it is interpreted as a quote character instead of a closing quote. To get an actual backslash in a string you use \\. Putting a backslash at the end of the line is "escaping" the end-of-line character so that it's interpreted as a literal character instead of the end of a line of code. However, it's probably easier to just remove all the newlines instead of adding a backslash at the end of each line!

Xanarus · Answer 2 · 2014-06-02T23:14:07.067

If you mean that you want apostrophe characters inside the string also, you can use \' to put an apostrophe in a string delimited by apostrophes:

Example :

var quote_str = '\'<p>Tyler's dog says, "Woof"</p>\'';

Using :

var foo = '\'<p>Tyler's dog says, "Woof"</p>\'';
$(.this).append(foo);

About your question , you can add other field and input. But you must remove all blank space between

$(.this).append(<div class="pure-u-1-3"><label for="doctorPhone">Practice Phone Number<span style="color: red">*</span></label><input id="doctorPhone" name="doctorPhone" type="tel" required></div>);

If you don't remove blank space you will have "unexpected illegal token javascript" error.

Also, you should add string-escape character using backslash : .

Example :

var string = "Hello \
Second string \
third line..";

Adding content using .append with multiple lines of code

2 Answers2