Question : Call url's without leaving page

Hello

What I want to do is to have images on a web page (like a remote control) with arrows for up, down, right, left. When I click the arrow up button it calls a cgi function to start my motor.. When I mouseup (unclick the the arrow) it calls the cgi again to stop the motor.

I tried this as follows:

    <form>
         <table width="150">
           <tr>
             <td></td>
             <td><input type="image" src="images/arrow_up.bmp" onmousedown="moveforward()" onmouseup="stopmotor()"></input></td>
             <td></td>
           </tr>  
           <tr>
             <td><input type="image" src="images/arrow_left.bmp" onmousedown="moveleft()" onmouseup="stopmotor()"></input></a></td>
             <td></td>
             <td><input type="image" src="images/arrow_right.bmp" onmousedown="moveright()" onmouseup="stopmotor()"></input></a></td>
           </tr>  
           <tr>
             <td></td>
             <td><input type="image" src="images/arrow_down.bmp" onmousedown="moveback()" onmouseup="stopmotor()"></input></a></td>
             <td></td>
           </tr>                        
         </table>
    </form>    

Where the javascript included in my header is as follows:

<!--
function loadurl(dest) {
try {
        // Moz supports XMLHttpRequest. IE uses ActiveX.
        // browser detction is bad. object detection works for any browser
        xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
        // browser doesn't support ajax. handle however you want
}
 
// the xmlhttp object triggers an event everytime the status changes
// triggered() function handles the events
xmlhttp.onreadystatechange = triggered;
 
// open takes in the HTTP method and url.
xmlhttp.open("GET", dest);
 
// send the request. if this is a POST request we would have
// sent post variables: send("name=aleem&gender=male)
// Moz is fine with just send(); but
// IE expects a value here, hence we do send(null);
xmlhttp.send(null);
}
 
function triggered() {
// if the readyState code is 4 (Completed)
// and http status is 200 (OK) we go ahead and get the responseText
// other readyState codes:
// 0=Uninitialised 1=Loading 2=Loaded 3=Interactive
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
        // xmlhttp.responseText object contains the response.
        //document.getElementById("output").innerHTML = xmlhttp.responseText;
}
}
      function moveforward () {
            loadurl('Scripts/remoteControl.cgi?move=forward');
    }
      function stopmotor() {
            loadurl('Scripts/remoteControl.cgi?move=stop');      
    }    
      function moveback() {
            loadurl('Scripts/remoteControl.cgi?move=back');      
    }  
      function moveright() {
            loadurl('Scripts/remoteControl.cgi?move=right');                        
    }  
      function moveleft() {
            loadurl('Scripts/remoteControl.cgi?move=left');                        
    }              
//-->

This works fine however it refreshes the page after the mouseup occurs. I do not wish for this page refresh to occur.
I posted a similar question to this already in question http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26306102.html and received some good feedback from fredmc in this that I should use Ajax for my requirements.
fredmc posted a good example of this, however I have changed how I want my function to work since the post and cannot  alter fredmc's code for my needs or stop the page from refreshing using the code I have posted above.

Is it correct that I need to use Ajax for this? If so, does anyone have a simple example I can use for my purposes? Otherwiseif Ajax is not required, does anyone know how I can alter my code above for my needs?

Basically if I can get it to function for mousedown and mouseup events without a page refresh it would be perfect.

Thanks all for the help.

I'm very much a Javascript and/or Ajax novice!!!

Answer : Call url's without leaving page

just remove the <form element from around your tags.

1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17:

<table width="150"> <tr> <td></td> <td><input type="image" src="images/arrow_up.bmp" onmousedown="moveforward()" onmouseup="stopmotor()"></input></td> <td></td> </tr> <tr> <td><input type="image" src="images/arrow_left.bmp" onmousedown="moveleft()" onmouseup="stopmotor()"></input></a></td> <td></td> <td><input type="image" src="images/arrow_right.bmp" onmousedown="moveright()" onmouseup="stopmotor()"></input></a></td> </tr> <tr> <td></td> <td><input type="image" src="images/arrow_down.bmp" onmousedown="moveback()" onmouseup="stopmotor()"></input></a></td> <td></td> </tr> </table>