'Javascript function prints .innerHTML but HTML only appears for a moment before vanishing

I've got a button that calls a javascript function named "submit()". In that function I simply write document.getElementById('try').innerHTML="it worked"; to test out whether or not my button is passing data to the function or not.

The problem is "it worked" gets printed for about a half second before disappearing.

I made an entire form that printed processed data to the webpage perfectly using the same html page. The only difference is that I changed the structure of my form and moved my functions to a .js file.

Although now, even if I comment out the submit() function in the .js file and paste the function within the core html file the same thing happens. I can paste is above or below the form and the same thing results.

Here is my HTML:

<div class="formsection">
            <button type="Submit" onclick="Submit()">Submit</button>
        </div>
    </form>
</div>
<div id="output">
<p> Try this: <span id="try"></span></p>
</div>

Here is my javascript function:

<script type="text/javascript">
function Submit(){
document.getElementById("try").innerHTML="It worked";   
}
</script>
javascripthtmlfunctionsqlpostgresql


Solution 1:[1]

The issue you're experiencing is due to your markup, mainly this piece:

<button type="Submit" onclick="Submit()">Submit</button>

You've specified that the button should perform a form submission when clicked, hence the javascript fires, changes the text and the page is reloaded (post back occured).

To get around that, you implement one of the following changes:

  • Change your markup to just be a button that fires javascript:

<input type="button" onclick="Submit()">Submit</input>

  • Add a statement in your javascript that cancels the default action for your submit button:

event.preventDefault(); MDN Link

Solution 2:[2]

Your form is submitted, that's why you see "It worked" only for a second (if at all).

Your function isn't prevents form submission.

You can use onsubmit attribute of form to specify function which will be called before form is submitted and can decide whenever it allowed or not by returning Boolean value

Solution 3:[3]

Your form actually gets submitted:) Use this:

<button type="Submit" onclick="Submit(); return false;">Submit</button>

Solution 4:[4]

I don't see the FORM tag but if you do something like:

<form action="javascript:" onsubmit="Submit()">

Your function Submit will be called, and nothing more. The nice thing about using a input type="submit" is your user can submit a form by hitting Enter and don't have to manage it yourself.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 cillierscharl
Solution 2 Juicy Scripter
Solution 3 dbrin
Solution 4 Mic

Related Questions