CODEWITHSUNDEEP
javascriptdom
user1400312
user1400312

Reputation:

JavaScript innerHTML Issues

I have a piece of code that changes the inner HTML of a div tag to a status message, this is encased in a try method, the only problem is the status stays visible for about 3 seconds then vanishes. I presume this is due to the try method, is there any way I can stop this?

<script> 
        function goCouch(form){

            var xmlHttp = false; 
                try {
                    var couchURL = form.inputbox.value;

                    xmlHttp = new XMLHttpRequest();
                    xmlHttp.open( "GET", "http://" + couchURL + ":5984", false );
                    xmlHttp.send( null );
                    var couchWelcome = xmlHttp.responseText;
                    var requestedServerStatus = xmlHttp.status;

                    var status = document.getElementById("status")
                    status.innerHTML = couchWelcome;

                    //alert(requestedServerStatus);
                    //alert(couchWelcome); 
                } catch (failed) {
                  xmlHttp = false;
                }

                if (!xmlHttp){
                  //alert("Don't panic, but I can't connect to that server.");
                }
            }
        </script>

<div id="mainContent">


            <form action="" method="get" id="myform">
                Enter your database URL<br>
                <input type="url" name="inputbox" value="">
                <input type="submit" name="button" value="Go" onclick="goCouch(this.form)"></p>
            </form>

            <div id="status"></div>
        </div>

Upvotes: -1

Views: 255

Answers (4)

robbieAreBest
robbieAreBest

Reputation: 1771

I would just change your button type.

<input type="button" name="button" value="Go" onclick="goCouch(this.form)">

If you do need to end up submitting your form you could do a form.submit() in the javascript.

Upvotes: 0

user1400312
user1400312

Reputation:

To prevent a default action you can use the function

event.preventDefault()

Upvotes: 0

Deleteman
Deleteman

Reputation: 8680

Your submit button is going to submit the form, that will cause the page to reload. If you add a return false to the end of your function gotToCouch the submit should not happen (not 100% sure about this).

Asides from that, you're doing an ajax request,but you're not using a callback function to get the result back, you're forcing the request to be synchronous... that's probably not causing any issues, but will halt the browser untill the request gets a response back, just saying...

Upvotes: 0

Ian Clelland
Ian Clelland

Reputation: 44112

Your onClick handler is attached to the submit button of a form.

Since you don't return false, or otherwise prevent the default event action, I think what is happening is this:

  • You click the button, and the onClick handler starts running
  • The handler executes the synchronous XHR request, gets the response from the server, and updates the div.
  • Control passes back to the browser, which continues by submitting the form
  • Since the form action is "", the browser actually reloads the page
  • When the page is reloaded, the message is gone.

To fix this, add "return false" to the end of your goCouch function.

Upvotes: 1

Related Questions