CODEWITHSUNDEEP
javascriptphpdocument.write
pcort
pcort

Reputation: 419

Javascript document.write() directing to another page

I have a page that's generated by PHP 

echo '
        <html lang="en-US">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Story Submission Page</title>
        <link rel="stylesheet" type="text/css" href="petercort.css" />
        <script type="text/javascript" src="javascript.js">
        </script>
        </head>
        ';

    echo '
        <div id="submissionform">
        <p><u><strong>Post Submission</strong></u></p>
        <form action="upload_file.php" method="post" enctype="multipart/form-data">

        <label for="title">Title: </label>
        <input type="text" name="title" id="title"><br>
        <br>
        <label for="summary">Summary: [TXT FILE]</label>
        <input type="file" name="summary" id="summary"><br>
        <br>
        <label for="story">Story: [TXT FILE]</label>
        <input type="file" name="story" id="story"><br>
        <br>
        <label for="previewpicture">Preview Picture: [PNG FILE]</label>
        <input type="file" name="previewpicture" id="previewpicture"><br>
        <br>
        <label for="contentpicture">Content Pic: [PNG File]</label>
        <input type="file" name="contentpicture" id="contentpicture"><br>

        <button onclick="addPictureLine()">Add Another Picture</button>

        <br>
        <input type="submit" name="submit" value="submit"><input type="reset" name="reset" value="reset">

        </form>

        </div>

        </body>
        </html>
    ';
    }
}
else {
    header('Location: adminpanel.html');
}

and an associated javascript code 

function addPictureLine() {
    document.write("<label for='contentpicture'>Content Pic: [PNG File]</label> <input type='file' name='contentpicture' id='contentpicture'><br>")
}

it works, but when I click the button to add another line for a user to add another picture to the submission, sends me to a blank page that has just the document.write() information in it. I want it to add another line to the existing page so I can upload multiple pictures.

Upvotes: 0

Views: 1286

Answers (1)

Jivings
Jivings

Reputation: 23250

When a webpage already contains content, document.write overwrites that content.

You should be inserting text to the DOM using the innerHTML property. Here is an example;

var div = document.createElement('div');
div.innerHTML = 'My content';
document.appendChild(div);

Upvotes: 3

Related Questions