using ajax and js

[dokula]

<script type="text/javascript" src="prototype.js"></script>
		<script>



	function sendRequest() {
	new Ajax.Request("bet.php", 
		{ 
		method: 'post', 
		parameters: {
		amount: $F('amount'),
		bet_kind: $F('bet_kind'),
		gamenumber: $F('gamenumber'),
		sporttype: $F('sporttype'),
		moneyline: $F('moneyline'),
		user_id: $F('user_id')
					},
		onComplete: showResponse 
		}
					);
							}			
	
	function showResponse(req){
				$('show').innerHTML= req.responseText;
			}
		</script>

<form id="test" onsubmit="return false;">
			<input type="hidden" name="bet_kind" value="0">
			<input type="hidden" name="gamenumber" value="<?php echo $feed->events->event->gamenumber;?>">
			<input type="hidden" name="sporttype" value="<?php echo $feed->events->event->sporttype;?>">
			<input type="hidden" name="user_id" value="<?php echo $find_user_id1[0];?>">
			<input type="checkbox" name="moneyline" value="<?php echo $game->periods->period->moneyline->moneyline_visiting; ?>"><?php echo $game->periods->period->moneyline->moneyline_visiting; ?> vs <br>
			<input type="checkbox" name="moneyline" value="<?php echo $game->periods->period->moneyline->moneyline_home; ?>"><?php echo $game->periods->period->moneyline->moneyline_home; ?><br>

			$<input type="text" name="amount" size="3" maxlength="3" id="amount" >
			<input type="submit" value="Bet" onClick="sendRequest()">
		</form>
		
		<div id="show"></div>

Any idea why this isn't working???? I get no response when pressing the Bet button

[jscheuer1]

First try:

<form id="test" method="post" action="bet.php">
			<input type="hidden" name="bet_kind" value="0">
			<input type="hidden" name="gamenumber" value="<?php echo $feed->events->event->gamenumber;?>">
			<input type="hidden" name="sporttype" value="<?php echo $feed->events->event->sporttype;?>">
			<input type="hidden" name="user_id" value="<?php echo $find_user_id1[0];?>">
			<input type="checkbox" name="moneyline" value="<?php echo $game->periods->period->moneyline->moneyline_visiting; ?>"><?php echo $game->periods->period->moneyline->moneyline_visiting; ?> vs <br>
			<input type="checkbox" name="moneyline" value="<?php echo $game->periods->period->moneyline->moneyline_home; ?>"><?php echo $game->periods->period->moneyline->moneyline_home; ?><br>

			$<input type="text" name="amount" size="3" maxlength="3" id="amount" >
			<input type="submit" value="Bet">
		</form>

If that gets no results, there's something wrong besides the javascript/prototype code.

Are you getting any script errors?

[dokula]

Yes, it all works correctly. It leads to bet.php and does what I want it to do.

[jscheuer1]

You didn't answer the question about script errors.

Anyways, see:

http://www.prototypejs.org/api/form/element/getValue

$F() is an alias for that. It requires an id or the element itself, so all of the inputs need id's. However, with moneyline you cannot do that. I made up a function to take care of that.

Here's the script code I used:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script type="text/javascript">
	function sendRequest() {
	function getMoneyline(){
		var ml = $('test').elements['moneyline'];
		for (var i = ml.length - 1; i > -1; --i){
			if(ml[i].checked) return $F(ml[i]);
		}
		return '';
	}
	new Ajax.Request("bet.php", 
		{ 
		method: 'post', 
		parameters: {
		amount: $F('amount'),
		bet_kind: $F('bet_kind'),
		gamenumber: $F('gamenumber'),
		sporttype: $F('sporttype'),
		moneyline: getMoneyline(),
		user_id: $F('user_id')
					},
		onComplete: showResponse 
		}
					);
							}			
	
	function showResponse(req){
				$('show').innerHTML = req.responseText;
			}
</script>

Here's the form:

<form id="test" onsubmit="return false;">
			<input type="hidden" name="bet_kind" id="bet_kind" value="0">
			<input type="hidden" name="gamenumber" id="gamenumber" value="5">
			<input type="hidden" name="sporttype" id="sporttype" value="Baseball">
			<input type="hidden" name="user_id" id="user_id" value="Bob">
			<input type="checkbox" name="moneyline" value="Marlins">Marlins vs <br>
			<input type="checkbox" name="moneyline" value="Phillies">Phillies<br>

			$<input type="text" name="amount" size="3" maxlength="3" id="amount" >
			<input type="submit" value="Bet" onclick="sendRequest();">
		</form>

Notice the id's for each form element except moneyline for which I made a custom function. I also filled in the PHP tokens in the form with hard coded values consistent with what I guessed they could be because I have nowhere to pull those values from. But you may replace my hard coded values with your PHP tokens again, as long as they resolve to something usable by the form (they should, the earlier test tends to confirm that) and you keep the added id's:

<form id="test" onsubmit="return false;">
			<input type="hidden" name="bet_kind" id="bet_kind" value="0">
			<input type="hidden" name="gamenumber" id="gamenumber" value="<?php echo $feed->events->event->gamenumber;?>">
			<input type="hidden" name="sporttype" id="sporttype" value="<?php echo $feed->events->event->sporttype;?>">
			<input type="hidden" name="user_id" id="user_id" value="<?php echo $find_user_id1[0];?>">
			<input type="checkbox" name="moneyline" value="<?php echo $game->periods->period->moneyline->moneyline_visiting; ?>"><?php echo $game->periods->period->moneyline->moneyline_visiting; ?> vs <br>
			<input type="checkbox" name="moneyline" value="<?php echo $game->periods->period->moneyline->moneyline_home; ?>"><?php echo $game->periods->period->moneyline->moneyline_home; ?><br>

			$<input type="text" name="amount" size="3" maxlength="3" id="amount" >
			<input type="submit" value="Bet" onclick="sendRequest()">
		</form>

Added Later:

This could be made reusable for - say multiple forms with the same fields on the same page, or as an external script used by many pages with one or more forms on it that have those fields. If you're interested in that, let me know.

Also - the checkboxes should be radio buttons. Otherwise both could be checked.

[jscheuer1]

Here's an even better method, requires Prototype 1.6 or greater:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script type="text/javascript">
document.observe('dom:loaded', function(){
	function sendRequest(form, result){
		new Ajax.Request('bet.php', { 
			method: 'post', 
			parameters: $(form).serialize(true),
			onComplete: function(req){$(result).innerHTML = req.responseText;}
		});
		return false;
	}
	$('test').observe('submit', function(e){
		Event.stop(e);
		sendRequest(this, 'show');
	});
});
</script>
</head>
<body>
<form id="test">
	<input type="hidden" name="bet_kind" value="0">
	<input type="hidden" name="gamenumber" value="5">
	<input type="hidden" name="sporttype" value="Baseball">
	<input type="hidden" name="user_id" value="Bob">
	<input type="radio" name="moneyline" value="Marlins">Marlins vs <br>
	<input type="radio" name="moneyline" value="Phillies">Phillies<br>

	$<input type="text" name="amount" size="3" maxlength="3" >
	<input type="submit" value="Bet">
</form>

		
		<div id="show"></div>
</body>
</html>

Here's the form with your tokens:

<form id="test">
	<input type="hidden" name="bet_kind" value="0">
	<input type="hidden" name="gamenumber" value="<?php echo $feed->events->event->gamenumber;?>">
	<input type="hidden" name="sporttype" value="<?php echo $feed->events->event->sporttype;?>">
	<input type="hidden" name="user_id" value="<?php echo $find_user_id1[0];?>">
	<input type="radio" name="moneyline" value="<?php echo $game->periods->period->moneyline->moneyline_visiting; ?>"><?php echo $game->periods->period->moneyline->moneyline_visiting; ?> vs <br>
	<input type="radio" name="moneyline" value="<?php echo $game->periods->period->moneyline->moneyline_home; ?>"><?php echo $game->periods->period->moneyline->moneyline_home; ?><br>

	$<input type="text" name="amount" size="3" maxlength="3" >
	<input type="submit" value="Bet">
</form>

The id's are no longer required, see:

http://www.prototypejs.org/api/form/serialize

for more info. It uses dom:loaded and observe to assign the events so the inline events are removed.

see:

http://www.prototypejs.org/api/event/observe

and:

http://www.prototypejs.org/api/event#method-stop

[dokula]

Wow, thank you very much! I used the first method, since the 2nd didn't not work. I've ran into another problem lol.


Being the noob I am at JS...

I have these forms in a loop on the page. When I submit a form, the showResponse() always shows on the the first form. I was thinking I have to pass some sort of variable from the form to the $('xxxshow').innerHTML. Any ideas on how to do it? I've looked at var, but then how do I put it in the $('show').

and also I have to refresh the page to submit a second form after using the first form, which absolutely negates the AJAX. Any ideas on how to fix this?

[jscheuer1]

What version of prototype are you using? According to the doc's, the 2nd method requires version 1.6 or greater. I used 1.7, so it might be required for something in there. In any case it does work.

So again, what version of prototype are you using and would it break any other things you're doing to update to version 1.7? If you already are using version 1.7 or if the version you are using is adequate, it occurs to me that you might of missed some of the coding/markup changes for the second version.

Anyways, this works quite well under prototype 1.7 for multiple forms on the same page and will skip any form that doesn't have a bet_kind field in it:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script type="text/javascript">
document.observe('dom:loaded', function(){
	function sendRequest(form){
		new Ajax.Request('bet.php', { 
			method: 'post', 
			parameters: form.serialize(true),
			onComplete: function(req){$(form.id + 'show').innerHTML = req.responseText;}
		});
		return false;
	}
	$$('form').each(function(f){
		if(f.elements.bet_kind){
			f.observe('submit', function(e){
				Event.stop(e);
				sendRequest(this);
			});
		}
	});
});
</script>
</head>
<body>
<form id="game1">
	<input type="hidden" name="bet_kind" value="0">
	<input type="hidden" name="gamenumber" value="5">
	<input type="hidden" name="sporttype" value="Baseball">
	<input type="hidden" name="user_id" value="Bob">
	<input type="radio" name="moneyline" value="Marlins">Marlins vs <br>
	<input type="radio" name="moneyline" value="Phillies">Phillies<br>

	$<input type="text" name="amount" size="3" maxlength="3" >
	<input type="submit" value="Bet">
</form>
		
		<div id="game1show"></div>
<form id="game2">
	<input type="hidden" name="bet_kind" value="0">
	<input type="hidden" name="gamenumber" value="6">
	<input type="hidden" name="sporttype" value="Baseball">
	<input type="hidden" name="user_id" value="Bob">
	<input type="radio" name="moneyline" value="Mets">Mets vs <br>
	<input type="radio" name="moneyline" value="Braves">Braves<br>

	$<input type="text" name="amount" size="3" maxlength="3" >
	<input type="submit" value="Bet">
</form>
		
		<div id="game2show"></div>
</body>
</html>

Be sure to use the radio buttons, not checkboxes for the moneyline selection. The form with PHP tokens from my last post is the same for this, except care must be taken when PHP writes each form to the page to generate the required id's for each form and its show area. They are as shown game# for the forms and game#show for the show divisions. These may be edited in the script if you wish to generate something else, but they must be consistent. The form field tested for as to whether or not the form qualifies for this treatment (in this case bet_kind), can be changed as well. That test only determines if the field exist in the form, not its value.

As for the other form you have that - I take it submits to the page itself, it could perhaps do so via AJAX as well. The other alternatives would be to use a cookie or cookies to somehow store the data already on the page in the show divisions and then recall it or to use PHP to set the values when the AJAX calls were made and to retrieve them and execute them again as the page loads.

The least messy way might be the first option (have the form submit via AJAX). I need more information about what exactly happens when that form submits to tell though.