HTML form to JS func using return 1

[shavenlunatic]

Hi,

I hope someone can help me out here.

I somehow managed to muddle my way through (with no prior knowledge) to making a shoutbox on a website using AJAX to avoid doing full screen refreshes.

The shoutbox (inside a div) works fine if the user "Clicks" the submit button... the data is sent, the chat-screen updates with no refresh.. but if return is pressed the whole screen refreshes and the message is not posted. It's very likely something very noobish and I'm surprised I managed to get this far to be honest.

Here is the form, all I want is the return key to do exactly the same thing as clicking submit does (runs lobbyshout().

<form name="lobby" method="get">
<input name="postshout" type="text" class="Style7" value="" size="35" maxlength="100" />
<input type="button" name="btnsubmit" value="Send" onclick="LobbyShout(this.form)" />
</form>

and the lobbyshout javascript, if it's of any use

function LobbyShout ()

{
var ShoutText = document.lobby.postshout.value

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }


var url="PostShout.php"
url=url+"?ShoutText="+ShoutText

var myDate = new Date();
var rand = myDate.getTime();
url=url+"&rand="+rand

xmlHttp.readystate
xmlHttp.open("GET",url,true)
xmlHttp.send(null)


document.lobby.postshout.value = ""
}

Thanks in advance for any advice

________
clueless

 

[shavenlunatic]

I meant to add, I did manage to get this to work using by adding the function into the form section with onsubmit and removing the button, but it works once and then the javascript seems to be disabled (likely due to the page not reloading)



________
clueless

 

[shavenlunatic]

semi-bump

i've even tried using the below

<input type="text" name="postshout" id="postshout" class="Style7" size="40" maxlength="100" onkeydown="if(event.keyCode==13){BattleShout()}">

and it works..but the whole screen still reloads when ajax calls the php...

help

________
clueless

 

[tsuji]

Just leave the whole form as such in your first post and add onsubmit handler to form element like this.
[tt] <form name="lobby" method="get" [blue]onsubmit="LobbyShout(this);return false"[/blue]>[/tt]

 

[tsuji]

Further note
If you use the scheme above, you can even spare the last input button and set it as submit type, then you have spare one handling setting dispersed in different places. Like this.
[tt]
<form name="lobby" method="get" onsubmit="LobbyShout(this);return false">
<input name="postshout" type="text" class="Style7" value="" size="35" maxlength="100" />
<input type="submit" name="btnsubmit" value="Send" />
</form>
[/tt]

 

[shavenlunatic]

cheers guys, happened to luck upon the solution just before I noticed there was a reply here. I would have still came looking for confirmation that I wasn't doing anything stupid.

Thanks

________
clueless