Why does my html output disappear?

Question

The below code displays the "Test" only for the loading period of the page and then it disappears..please advise

<input style="margin-left:40px;" type="submit" value="submit" name="submit" onclick="myFunction()"></input>

<script>
function myFunction()
{
document.getElementById("div6").innerHTML="Test";
}
</script>

Once the form is submitted, the page is refreshed. Do you want to prevent the form submission? Or do you want the "Test" message to persist after submission? — showdev, Jan 17 '14 at 18:17
@showdev I want the test message to persist after submission — ginter, Jan 17 '14 at 18:28

score 1 · Accepted Answer · edited May 23 '17 at 12:11

Once the form is submitted, the page is reloaded without the "Test" message.

Since you want the "Test" message to persist after form submission, I suggest some server-side code to display it conditionally (if the form has been submitted).

Using PHP, it would go something like this:

<?php

// determine if the form was submitted
$submitted=isset($_POST['submitted']) ? true : false;

?>

<form method="post" onsubmit="myFunction();" >
    <input type="submit" value="submit" name="submitted" />
</form>

<!-- echo message if form was submitted -->
<div id="div6"><?php echo $submitted ? "Test" : ""; ?></div>

<script>
function myFunction() {
    document.getElementById("div6").innerHTML="Test";
}
</script>

Alternatively, you could submit the form using AJAX so that the page does not reload.
But that's a different story.

score 0 · Answer 2 · answered Jan 17 '14 at 18:20

0

Use this:

function myFunction(event) {
    event.preventDefault();
    document.getElementById("div6").innerHTML="Test";
}

Cheers.

answered Jan 17 '14 at 18:20

TonyMtz

46
3

just now I have tried it...now, not only after the page load but also from the beginning of the page load the "Test" not appears – ginter Jan 17 '14 at 18:29

score 0 · Answer 3 · answered Jan 17 '14 at 18:26

The form is submitting and the page is reloading. that is why your text is "disappearing". Since the button is a submit button, the form will submit whenever the function returns true (default). You can prevent this by returning false:

<input style="margin-left:40px;" type="submit" value="submit" name="submit" onclick="myFunction(); return false"/>

<script>
function myFunction()
{
    document.getElementById("div6").innerHTML="Test";
}
</script>

I have tried it but unfortunately I still face the same trouble — ginter, Jan 18 '14 at 08:36

Why does my html output disappear?

3 Answers3