# Ajax / PHP submit without button



## JoneeJay (Dec 20, 2004)

Hi guys,

I've had a little search but most of the threads are about how to use an alternative to a submit button...

Background info:
I'm building an epos system for a company using mysql / php... and I've built a simple order page where you type a quote number (or scan EAN) and 'enter' and this submits the form; post's it into mysql then returns you to the basket with the rows in that basket displayed. To the untrained eye this looks clever - adding the line to the basket without seeming to refresh the page...

Problem:
When a user enters more than ten items to the basket - it spreads itself down the page - giving them a scroll bar to go up/down with... When they enter a new product now - it appears to 'bounce' back up to the top ( but really it's just refreshing the page with the new line added );

Solution:
Ajax to post the data and add the new rows at the bottom.

BUT I don't know any ajax, so I've used a tutorial from a 'shoutbox' kind of application - I've modified it to do what I want it to do but the form (for quote number or scanning barcode) has a submit button - which houses the ajax request.

Now I don't know enough to edit that - and wondered if anyone knew how I can modify it to do the action which would have been onClick to just - on Enter... or something 

Here's the code of the form


```
[B][SIZE=14]Compose a new ajax message[/SIZE][/B]

    Subject:
    Message:
```
What I've tried so far - is changing the button to a hidden... which just processes the form... 
Putting the button in a div and hiding it - which doesn't do anything

Please can someone point me in the right direction... sorry for the massive post.

Cheers


----------



## cpscdave (Feb 25, 2004)

I'm not sure if this is the best method but:

On the page w/ the submit button you should have a javascript function that marshals the data between the webpage and the ajax call.

Use this code here to get a proper ajax handler
I sourced it from somewhere but can't remember where lol

```
function getAjaxHandler()
{
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
//	ajaxRequest.ajaxSetup({cache: false});
	return ajaxRequest;
}
```
So this function your going to write will
get a proper ajax method.

Pull the information about the item you're adding to the cart. 
Pass that information via ajax to the server eg:


```
function updateVars(var1, var2)
{
	ajax = getAjaxHandler();
	url = base + "ajax_update_var/?var1=" + var1 + "&var2=" + var2 
         ajax.onreadystatechange = function(){
		if(ajax.readyState == 4){
			document.getElementById("TheFieldHoldingTheList").innerHTML=ajax.responseText;
			//alert(ajax.responseText);
		}
	}

	ajax.open("GET", url, true);
	ajax.send(null); 
}
```
Lastly you have to write teh ajax_update_var function to add the item to the cart and then regenerate the html for the cart list thingy. 
Just simply output it, the ajax handler above will take that text and put it inside the field

Hope that helps 
(NOTE of course you'll have to tinker with this to make it work for you)


----------



## JoneeJay (Dec 20, 2004)

Cheers mate,

Before I try all that though... (I wasn't clear enough in my massive waffle lol)

I've already got the ajax bit working (but willing to switch to yours if it works) with a submit button...

But I don't want them to have to enter a quote then click on submit (It sounds daft - but it just looks unprofessional lol)

So I was hoping there's a way to make *onclick="ajaxRequest.addMessage();return false"* become

whenThisFormIsSubmittedJustWithEnterKey="ajaxRequest.addMessage();return false"

Do you know if that's possible mate?


----------



## cpscdave (Feb 25, 2004)

okay sorry I didnt quite follow what you were asking 

Build a javascript function on the webpage like updatevars. 
Then on your submit button have 
onclick="updatevars('var1,'var2');"

Thats how I've done it in the past myself. Not sure you can fully inline the ajax call inside the onclick, or if you can it woudl be ugly and hard to debug


----------



## JoneeJay (Dec 20, 2004)

Cheers mate,

Think I'll just make everything smaller so that more lines fit on lol... or a page 2 >> button haha

Thanks for all the helps


----------



## cpscdave (Feb 25, 2004)

ajax can be really powerfull or a giant pain in the ***.... or both 
Usually its both


----------

