Adding to a div (and AJAX)

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
toasty2
Forum Contributor
Posts: 361
Joined: Wed Aug 03, 2005 10:28 am
Location: Arkansas, USA

Adding to a div (and AJAX)

Post by toasty2 »

I'm trying to make it so that I can type things in and it will add them to a div, but it isn't working.

Code: Select all

<html><head>    <script language="JavaScript">    function addto()    {        var cmd = document.getElementById('cmd').value;        var el = document.getElementById('shell');        el.innerHTML = el.innerHTML + cmd;    }    </script></head><body onload="document.forms.cmdform.cmd.focus()"> <div style="width:100%;" name="shell"> </div><hr /><form name="cmdform">><input type="text" name="cmd" onUnfocus="addto('shell');" size="120" /><input type="submit" value="Enter" /></form></body></html> 
Last edited by toasty2 on Sun Mar 02, 2008 10:36 am, edited 1 time in total.
User avatar
Chalks
Forum Contributor
Posts: 447
Joined: Thu Jul 12, 2007 7:55 am
Location: Indiana

Re: Adding to a div

Post by Chalks »

I had this same issue. Here's how I solved it:

Code: Select all

 <script type="text/JavaScript">var ray1 = new Array();var ray2 = new Array();var currloc = 0; function gennew(length){  currloc = genrand(length);   if(ray1[currloc])  {    document.getElementById('display1').innerHTML = ray1[currloc];    document.getElementById('display2').innerHTML = ray2[currloc];    document.getElementById('show').style.visibility = 'visible';    document.getElementById('wordsleft').innerHTML = ray1.length + " words left";  }  else  {    document.getElementById('display1').innerHTML = "All data tested!  Click 'Return' or 'Reset'.";    document.getElementById('show').style.visibility = 'hidden';    document.getElementById('wordsleft').innerHTML = "0 words left";  }   document.getElementById('display2').style.visibility = 'hidden';  document.getElementById('right').style.visibility = 'hidden';  document.getElementById('wrong').style.visibility = 'hidden';} //more stuff</script></head><body onload="gennew(ray1.length); boring();"> <div id="content"> <div id="wordsleft"></div><div id="display1"></div><div id="display2" style="visibility: hidden;"></div> <div id="show"><input type="button" value="Show" onclick="show()" /></div><div id="wrong"><input type="button" value="Wrong" onclick="wrong()" /></div><div id="right"><input type="button" value="Right" onclick="right()" /></div> </div></body></html> 
If you want to see the full script you can look at http://spanish.chalksdesign.com/vocab then click either the challenge button, or the study button... then view source. I can't give you a direct link because I programmed it so you have to submit a form to get there.

Edit: read your post more carefully. I don't think we had _exactly_ the same issue, but this should help.
toasty2
Forum Contributor
Posts: 361
Joined: Wed Aug 03, 2005 10:28 am
Location: Arkansas, USA

Re: Adding to a div

Post by toasty2 »

I seem to have fixed it. I've added some AJAX and now I've got another problem. It reloads the page when I submit the form.

Code: Select all

<html><head>    <title>rrshell</title>    <style type="text/css">    body {background:black;color:white;font-family:courier new;}    </style>    <script language="JavaScript">    function cmd()    {      var cmd = document.getElementById('cmd').value;      var url = '/shell.php?cmd=' + cmd;      if (document.getElementById)      {        var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();      }      if (x)      {        x.onreadystatechange = function() {          if (x.readyState == 4 && x.status == 200)          {            el = document.getElementById(id);            el.innerHTML = el.innerHTML + '<br />' + x.responseText;          }        }        x.open("GET", url, true);        x.send(null);      }    }    </script></head><body onload="document.forms.cmdform.cmd.focus()"><div style="width:100%;height:400px;border:0;color:white;" name="shell" id="shell"></div><hr /><form name="cmdform" onSubmit="cmd();return false;"><span style="padding:2px;border:1px solid white;">><input type="text" name="cmd" id="cmd" style="border:0;color:white;background:black;font-family:courier new;" size="75" /></span><br /><br /><input type="submit" value="Enter" /></form></body></html>
If you're curious, this is part of a PHP AJAX shell I'm trying to make.
toasty2
Forum Contributor
Posts: 361
Joined: Wed Aug 03, 2005 10:28 am
Location: Arkansas, USA

Re: Adding to a div (and AJAX)

Post by toasty2 »

Basically, my problem is that I need something to happen when the form is "submitted" without it reloading the page. The form also has to be submittable by pressing enter.
Post Reply