www.webdeveloper.com
Results 1 to 5 of 5

Thread: How to continue displaying on the same page?

  1. #1
    Join Date
    Apr 2009
    Posts
    49

    Question How to continue displaying on the same page?

    My Javascript code displays a form to input a word. It passes to function checkWord via <form action="#" onsubmit="return checkWord();">. The function either confirms the word entered or says it's not in the data, which exists as words in an array. All display commands use document.write(). Problem: the confirmation or denial display wipes out the original word entry form and displays on a new page. How do I display it on the same page, just under the form where the word was submitted?
    Thanks for your help.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Write to an existing element with innerHTML or create a new element
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Apr 2009
    Posts
    49
    Thanks, Fang. I tried, and used the links provided in your response, but I can't get anywhere. Problem is I don't understand the logic of creating a new element just to keep displaying on the original page. The code is below. Any help there is appreciated.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>DICTIONARY3</title>

    <script type="text/javascript">

    var nword="";
    var okay=0;
    var b=new Array();
    var c=new Array();
    var d=new Array();
    var e="";
    var end=new Array();

    function readDictCookie()
    {
    c[0]="horse1dog1teeth1fork1gyroscope1";
    }

    function unpackDict()
    {
    for (i=0; i<20; i++)
    {end[i]=c[i].indexOf("1");
    b[i]=c[i].substring(0,end[i]);
    c[i+1]=c[i].substring(end[i]+1,c[i].length);
    }
    }

    var ele=null;
    var msg=null;
    function checkWord()
    {
    //FOLLOWING 4 LINES ADDED AFTER FANG'S SUGGESTION.
    var ele=document.createElement("div");
    ele="just before usermessage";
    msg=document.getElementById("usermessage");
    document.body.insertBefore(ele,msg);
    if (document.forms[0].aword.value <= 0)
    {alert("Please enter a word."); }
    else
    {nword = String(document.forms[0].aword.value); }
    okay=0;
    for (var i=0; i<20; i++)
    {if (nword == b[i])
    {okay=1;
    document.write("word "+nword+" okay = "+okay);
    }
    }
    if (okay==0)
    {document.write("<b>"+nword+"</b> not in dictionary. Is <b>"+nword+"</b> a legitimate word? <br><br>");
    document.write("<form onsubmit='return addWord();'><input type='radio' name='choose' value='Yes' />Yes <input type='radio' name='choose' value='No' />No <br><br>");
    document.write("<input id='sb2' type='submit' value='Submit Answer' /></form>");
    //FOLLOWING 1 LINE ADDED AFTER FANG'S SUGGESTION.
    onclick=addWord();
    }
    }
    </script>
    </head>

    <body>
    <font face="Arial">
    <h2>Dictionary Version 4</h2>

    <script type = "text/javascript">
    readDictCookie();
    unpackDict();
    </script>

    <form action="#" onsubmit="return checkWord();">
    <table border="1" bgcolor="#D4E7B2">
    <tr>
    <td>Enter Word:</td>
    <td width="80" ><input id="spr" name="aword" type="text" size="18" /><td>
    </tr>
    </table>

    <br><br><p><input id="sb1" type="submit" value="Check Word" /></p>
    </form>
    <!--
    <div id="usermessage" />
    -->
    </body>
    </html>

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    ele.innerHTML="just before usermessage";
    and the return value must be false to prevent the document reloading.

    You can not use document.write after the page has loaded; it write a new document.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Apr 2009
    Posts
    49
    Ok Fang, many thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles