SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Make Result 2 Stay on Same Page

    When I hit the submit button, the result are display on a new page. how do I force it to stay on the same page, here's my code.

    Code:
    <HTML>
    <HEAD>
    <TITLE>Test Input</TITLE>
    
    <script type="text/javascript">
    function addtext() {
       var newtext = document.myform.inputbox.value;
       document.writeln(newtext);
    }
    </script>
    
    </HEAD>
    
    <BODY>
    
    <FORM NAME="myform">Enter something in the box: <BR>
    <INPUT TYPE="text" NAME="inputbox" VALUE="">
    <INPUT TYPE="button" NAME="button" Value="Check" onClick="addtext()">
    </FORM>
    
    
    </BODY>
    </HTML>
    any comments or suggestions would be greatly appreciated.

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're not actually submitting the form to anything because you don't have a submit button. To submit a form to somewhere you need an input with type="submit" or use the form's submit method in js.

    All you are doing is using an ordinary button with an onclick event handler that calls a js function.

    Your js function is using document.writeln() wich displays the results in a new page because the current page has already completed loading when addtext() is called.

    You should be using DOM methods and not document.writeln() to output results to the same page.

  3. #3
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have modified your script to write to the same page and also to submit the form. The submit part is a note only at this stage.

    <html>

    <head>

    <title>Test Input</title>
    <script type="text/javascript">
    <!--
    function addtext()
    { var newtext = document.myform.inputbox.value;
    var elem=document.getElementById("writeHere");
    elem.innerHTML=newtext;
    // to sumbit the form at this point use
    // document.myform.submit();
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    body { font-family:arial, sans-serif; font-size:13px; font-weight:normal; color:#000; background-color:#FFF; }
    .a14B { font-weight:bold; font-size:18px; color:#F00; }
    -->
    </style>
    </head>

    <body>

    <form name="myform" action>
    <p>Enter something in the box: <br>
    <input type="text" name="inputbox" value size="20">
    <input type="button" name="button" value="Check" onclick="addtext()"></p>
    </form>
    <!-- end myform -->
    <div id="writeHere" class="a14B">
    Will write here</div>
    <!-- end writeHere -->

    </body>

    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •