views:

708

answers:

7

Probably something stupid I'm doing. I want to populate a hidden DIV with values of a form on submit.

The DIV does open with correct data, but then resets after the page is finished loading. What am I doing wrong?

Here's my test:

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <meta http-equiv="Content-Type" content=
    "text/html; charset=us-ascii" />

    <title>Test</title>
 <script type="text/javascript">
     function test(){

   var usr = document.getElementById('user').value;
   var pwd = document.getElementById('passwd').value;

   document.getElementById('out').innerHTML = usr + " " + pwd;
   document.getElementById('out').style.display = "block";

   return true;
  }
 </script>
</head>

<body>
    <form action="" onsubmit="return test()">
        <input type="text" id="user" name="user" />
  <input id="passwd" type="text" name="passwd" /> 

        <p><input type="submit" value="Go" /></p>
    </form>

    <div id="out" style="display:none;">
    </div>
</body>

+3  A: 

Short answer:

Change this

return true;

to this

return false;

Long answer:

Forms are designed to load a new page when they are submitted. However, with scripting we can prevent this behavior by stopping the submit event. This can be achieved in many ways, but for your example, simply returning "false" from your handler will cancel the event, but only if the onsubmit attribute also has a return statement (which you already had).

Peter Bailey
All answers were good. This was well stated. Thanks.
thermans
+1  A: 

The onsubmit function is submitting the form back to the page. You need to cancel the event to prevent it from submitting the data and reloading the page. The easy way to do this is to have your test() function return false. If you still want the form to submit and display the data in a div you'll want to submit the form via AJAX or in an iFrame.

illvm
+1  A: 

Try replacing "return true;" at the end of your function with "return false;". My reasoning is, because you have the action attribute specified but value, it may think that the current page is the value and since you're not cancelling the event the page reloads.

Andy E
+1  A: 

You need to return false

You see, the return value of onsubmit is used to decide whether to continue to submit the form. So if it's true, the page will reload and the values will be lost. If its false, it won't!

James
+1  A: 

This line is probably your problem:

<form action="" onsubmit="return test()">

The blank action attribute causes the page to bounce to itself (reload) when the form is submitted. You can prevent this by making sure test() returns false rather than true, which will keep the form from submitting at all.

Evan Hanson
+1  A: 

When you post the form, the data will be lost. You could stop the form from posting by setting return true to return false, or you could add some logic to print out the user and passwd fields in the DIV id="out" and set the display to block if user and passwd fields have a value.

Detect
+1  A: 

As an alternativ you can use a link which do the job without submittig the form.

<a href="#" onClick="test()"> Do </a>
Richard