Desperate ajax help needed

[Lionel]

I am working on a nice hack: Calendar sports predictions

I have my predictions.php where I have all the code laid out for submissions, but it is important to me that the prediction are done in ajax so the user does not leave the page which sometimes has multiple events, thus multiple predictions (for each event).

I sought help in the paid forums, got the run around by 2 wantabe coders so I decided to do it myself, and if not for the ajax, I am pretty much done.

What I am looking for is something in the manner of the Post Thank You hack to submit into a TABLE_PREFIX ."predictions.

That's all I need. As a picture is worth a thousand words, I am attaching two of them, both from calendar custom fields.

Please someone give me the ajax formula. I never worked on ajax before and I have no idea where to start. I need the formula when you click on submit to submit to predictions.php and the one when you click on remove simply deletes the predictions (once it is deleted the boxes reappear, providing that timenow is smaller than dateline_from, all that is done already)

[nico_swd]

Post your HTML form and I'll help you.

[Lionel]

nico, thank you. The html form really is just a simple form
<form action="predictions.php" method="post"><input type=hidden value="do"><input type="hidden" value="dopredict">
then I have the different fields which are dynamic
<input type=text value=Home>
<input type=text value=Away>
and the submit button



see, since this is for sports, I created two custom fields and named them Home and Away, and I get them with $customtitle for value. So the boxes are always right (they are in calendar_showevents_customfieldsbit)

The 2 templates that I am working with are calendar_showeventsbits
and calendar_showevents_customfields. The form is in the showevents and the fields are in the custom fields.

Since there was no hook for customfields, I had to do all the coding the php, at the foreach loop.

and my current database structure (which will be extended but has nothing to do with the ajax part)


id int(10) No auto_increment
eventid int(10) No 0
userid int(10) No 0
homepred int(3) No -1
awaypred int(3) No -1
homeactual int(3) No -1
awayactual int(3) No -1
hometeam varchar(50) No
awayteam varchar(50) No
iswinner tinyint(1) No 0

homeactual, awayactual and iswinner are not to be used with ajax. Those are moderator input and iswinner is dynamic that I use in leaderboard, results, stats etc...

[nico_swd]

Your form is somewhat messed up. I need the names of the input fields, and I need to know which values you want to send to your PHP script.

Here a raw example.


<script type="text/javascript">

function create_req_object()
{
var req = false;

if (window.XMLHttpRequest)
{
req = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
var msp = new Array('Microsoft', 'Msxml2');

for (var i in msp)
{
try
{
req = eval('ne' + 'w Act' + 'iveXObj'+ 'ect(msp[i] + ".XMLH'+ 'TTP");');
}
catch(e)
{
continue;
}
}
}

return req;
}

function submit_form(form)
{
var http = create_req_object();

if (!http)
{
return true;
}

http.open('POST', form.action);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.onreadystatechange = function()
{
if (http.readyState == 4 && http.status == 200)
{
alert("The data has been submitted.");
}
}
http.send('do=dopredict&foo='+ form.fieldname.value +'&bar='+ form.otherfield.value);
return false;
}

</script>
<form action="predictions.php" method="post" onsubmit="return submit_form(this);">
<input type="hidden" value="do"><input type="hidden" value="dopredict">
then I have the different fields which are dynamic
<input type=text value=Home>
<input type=text value=Away>
<input type="submit">
</form>



What this code would do is, if someone clicks submit, it will send the data via XMLHttpRequest to the PHP script, and show an alert once that happend.

You have to edit this line.

http.send('do=dopredict&foo='+ form.fieldname.value +'&bar='+ form.otherfield.value);


These are the variables that are sent to the script. You just have to change the names and maybe add more if necessary. it will send the data via POST, that means you can receive it's value with the $_POST or $vbulletin->GPC variables.

So if you'd do a print_r() for the example above you'd get something like this



Array
(
do => dopredict,
foo => (value of your field),
bar => (value of your field),
)


Hope that helps.

[Lionel]

this the calendar_showeventsbit template

<if condition="$show['customfields']">
<if condition="$calendarinfo[calendarid]=='4'">
<form action="prediction.php" method="post"><input type="hidden" name="do" value="addpredict">
<table class="tborder" cellspacing="1" cellpadding="4" border="0">
<tr><td class="tcat" colspan="5">Interactive game details</td></tr>
<tr><td class="thead">Your predictions</td><td class="thead">Actual</td><td colspan="2" align="center" class="thead">Teams</td><td class="thead">Colors</td></tr>
</if>
$customfields
<if condition="$calendarinfo[calendarid]=='4'">
<tr><td align="center">$button</td><td class="alt2" style="border-top:0px solid #c0c0c0;" align="center" colspan="4">insert link to leaderboard here</td></tr>
</table>
</form>
</if>
<hr size="1" style="color:$stylevar[tborder_bgcolor]" />
</if>]

and the fields are in calendar_showeventsbit_customfield
<if condition="$show['customoption']">
<div class="smallfont">
<if condition="$customtitle=='Home' OR $customtitle=='Away'">
<tr><td align="center">
$box
</td><td class="alt2" align="center">$score</td><td nowrap></if>
<strong>$customtitle</strong>:
<if condition="$customtitle=='Home' OR $customtitle=='Away'"></td><td>
</if>
$customoption
<if condition="$customtitle=='Home' OR $customtitle=='Away'">
</td><td><img src="images/calendarteams/$customoption.gif"></if>
</div>
</if>
<if condition="$customtitle=='Home' OR $customtitle=='Away'"></td></tr>
</if>


and the way it displays

<td align="center">
<input name="Home" type="text" size="1" value="">
</td><td class="alt2" align="center"></td><td nowrap>
<strong>Home</strong>:
</td><td>
US Freres
</td><td><img src="images/calendarteams/US Freres.gif">
</div>
</td></tr>

<div class="smallfont">

<tr><td align="center">
<input name="Away" type="text" size="1" value="">
</td>

and in calendar.php

$box="<input name=\"$customtitle\" type=\"text\" size=\"1\" value=\"\">";
$button="<input type=\"image\" src=\"$stylevar[imgdir_button]/predict.gif\">";

Nico,

I have some problems. The form submits, but it's not ajax.

and I also have a javascript error. Here is what I am submitting

<script type="text/javascript">
function create_req_object()
{
var req = false;

if (window.XMLHttpRequest)
{
req = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
var msp = new Array('Microsoft', 'Msxml2');

for (var i in msp)
{
try
{
req = eval('ne' + 'w Act' + 'iveXObj'+ 'ect(msp[i] + ".XMLH'+ 'TTP");');
}
catch(e)
{
continue;
}
}
}

return req;
}
function submit_form(form)
{
var http = create_req_object();

if (!http)
{
return true;
}
http.open('POST', form.action);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.onreadystatechange = function()
{
if (http.readyState == 4 && http.status == 200)
{
alert("The data has been submitted.");
}
}
http.send('do=addpredict&Home='+ form.Home.value +'&Away='+ form.Away.value +'&eventid='+ form.eventid.value +'&1Home='+ form.1Home.value +'&1Away='+ form.1Away.value');
return false;
}
</script>
<form action="predictions.php" method="post" onsubmit="return submit_form(this);">
<input type="hidden" name="do" value="addpredict">
<input type="hidden" name="eventid" value="32">
<table class="tborder" cellspacing="1" cellpadding="4" border="0">
<tr><td class="tcat" colspan="5">Interactive game details</td></tr>
<tr><td class="thead">Your predictions</td><td class="thead">Actual</td><td colspan="2" align="center" class="thead">Teams</td><td class="thead">Colors</td></tr>

<div class="smallfont">

<tr><td align="center">
<input type="hidden" name="1Home" value="RDG">
<input name="Home" type="text" size="1" value="">
</td><td class="alt2" align="center"></td><td nowrap>
<strong>Home</strong>:
</td><td>
RDG
</td><td><img src="images/calendarteams/RDG.gif">
</div>
</td></tr>

<div class="smallfont">

<tr><td align="center">
<input type="hidden" name="1Away" value="Victory">
<input name="Away" type="text" size="1" value="">
</td><td class="alt2" align="center"></td><td nowrap>
<strong>Away</strong>:
</td><td>
Victory
</td><td><img src="images/calendarteams/Victory.gif">
</div>
</td></tr>

<div class="smallfont">

<strong>Venue</strong>:

Gonaives - Parc Vincent

</div>


<div class="smallfont">

<strong>Competition</strong>:

Digicel Cloture

</div>


<div class="smallfont">

<strong>Round</strong>:

9

</div>


<tr><td align="center"><input type="image" src="<A href="/forums/images/kirsch/buttons/predict.gif"></td><td">/buttons/predict.gif"></td><td class="alt2" style="border-top:0px solid #c0c0c0;" align="center" colspan="4">insert link to leaderboard here</td></tr>
</table>
</form>

and here is my predictions.php

if ($_REQUEST['do'] == 'addpredict')
{
// get input data
$vbulletin->input->clean_array_gpc('r', array('eventid' => TYPE_UINT, 'Home' => TYPE_UINT, 'Away' => TYPE_UINT, '1Home' => TYPE_STR, '1Away' => TYPE_STR));

$eventid =& $vbulletin->GPC['eventid'];
$home =& $vbulletin->GPC['Home'];
$away =& $vbulletin->GPC['Away'];
$hometeam =& $vbulletin->GPC['1Home'];
$awayteam =& $vbulletin->GPC['1Away'];
$player=$vbulletin->userinfo['userid'];
$db->query("INSERT into new_predictions(id,eventid,userid,homepred,awaypre d,hometeam,awayteam) VALUES ('','$eventid','$player','$home','$away','$hometea m','$awayteam')");
}

[nico_swd]

There were a couple of syntax errors. Also note that variable names cannot begin with numbers. Neither in PHP nor Javascript. (I changed 1Home to Home1 and 1Away to Away1).

This works for me.


<script type="text/javascript">
function create_req_object()
{
var req = false;

if (window.XMLHttpRequest)
{
req = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
var msp = new Array('Microsoft', 'Msxml2');

for (var i in msp)
{
try
{
req = eval('ne' + 'w Act' + 'iveXObj'+ 'ect(msp[i] + ".XMLH'+ 'TTP");');
}
catch(e)
{
continue;
}
}
}

return req;
}

function submit_form(form)
{
var http = create_req_object();

if (!http)
{
return true;
}

http.open('POST', form.action);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.onreadystatechange = function()
{
if (http.readyState == 4 && http.status == 200)
{
alert("The data has been submitted.");
}
}
http.send('do=addpredict&Home='+ form.Home.value +'&Away='+ form.Away.value +'&eventid='+ form.eventid.value +'&1Home='+ form.Home1.value +'&1Away='+ form.Away1.value);
return false;
}

</script>
<form action="predictions.php" method="post" onsubmit="return submit_form(this);">
<input type="hidden" name="do" value="addpredict">
<input type="hidden" name="eventid" value="32">
<table class="tborder" cellspacing="1" cellpadding="4" border="0">
<tr><td class="tcat" colspan="5">Interactive game details</td></tr>
<tr><td class="thead">Your predictions</td><td class="thead">Actual</td><td colspan="2" align="center" class="thead">Teams</td><td class="thead">Colors</td></tr>

<div class="smallfont">

<tr><td align="center">
<input type="hidden" name="Home1" value="RDG">
<input name="Home" type="text" size="1" value="">
</td><td class="alt2" align="center"></td><td nowrap>
<strong>Home</strong>:
</td><td>
RDG
</td><td><img src="images/calendarteams/RDG.gif">
</div>
</td></tr>

<div class="smallfont">

<tr><td align="center">
<input type="hidden" name="Away1" value="Victory">
<input name="Away" type="text" size="1" value="">
</td><td class="alt2" align="center"></td><td nowrap>
<strong>Away</strong>:
</td><td>
Victory
</td><td><img src="images/calendarteams/Victory.gif">
</div>
</td></tr>

<div class="smallfont">

<strong>Venue</strong>:

Gonaives - Parc Vincent

</div>


<div class="smallfont">

<strong>Competition</strong>:

Digicel Cloture

</div>


<div class="smallfont">

<strong>Round</strong>:

9

</div>


<tr><td align="center"><input type="image" src="/forums/images/kirsch/buttons/predict.gif"></td><td">/buttons/predict.gif"></td><td class="alt2" style="border-top:0px solid #c0c0c0;" align="center" colspan="4">insert link to leaderboard here</td></tr>
</table>
</form>

[Code Monkey]

You should be using the default vBulletin AJAX code to properly intigrate it and minimize the use of javascript.

[Lionel]

What is the default vb code?

The good news is that I got it to work, there was a java typo. But now, how do I replace the java alert so it replaces the input boxes with the predictions that was just submitted?

[nico_swd]

Sorry, forgot about this. And I didn't figure out yet how vB's AJAX system works...

I think this should do what you want.

<script type="text/javascript">
function create_req_object()
{
var req = false;

if (window.XMLHttpRequest)
{
req = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
var msp = new Array('Microsoft', 'Msxml2');

for (var i in msp)
{
try
{
req = eval('ne' + 'w Act' + 'iveXObj'+ 'ect(msp[i] + ".XMLH'+ 'TTP");');
}
catch(e)
{
continue;
}
}
}

return req;
}

function submit_form(form)
{
var http = create_req_object();

if (!http)
{
return true;
}

if (isNaN(form.Home.value) || isNaN(form.Away.value))
{
alert("Invalid prediction. Please use numbers only.");
return false;
}

http.open('POST', form.action);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.onreadystatechange = function()
{
if (http.readyState == 4 && http.status == 200)
{
alert("Predictions successfully submitted.");

fetch_object('Home1').innerHTML = form.Home.value;
fetch_object('Away1').innerHTML = form.Away.value;
}
}
http.send('do=addpredict&Home='+ form.Home.value +'&Away='+ form.Away.value +'&eventid='+ form.eventid.value +'&1Home='+ form.Home1.value +'&1Away='+ form.Away1.value);
return false;
}

</script>
<form action="predictions.php" method="post" onsubmit="return submit_form(this);">
<input type="hidden" name="do" value="addpredict">
<input type="hidden" name="eventid" value="32">
<table class="tborder" cellspacing="1" cellpadding="4" border="0">
<tr><td class="tcat" colspan="5">Interactive game details</td></tr>
<tr><td class="thead">Your predictions</td><td class="thead">Actual</td><td colspan="2" align="center" class="thead">Teams</td><td class="thead">Colors</td></tr>

<div class="smallfont">

<tr><td align="center">
<input type="hidden" name="Home1" value="RDG">
<div id="Home1"><input name="Home" type="text" size="1" value=""></div>
</td><td class="alt2" align="center"></td><td nowrap>
<strong>Home</strong>:
</td><td>
RDG
</td><td><img src="images/calendarteams/RDG.gif">
</div>
</td></tr>

<div class="smallfont">

<tr><td align="center">
<input type="hidden" name="Away1" value="Victory">
<div id="Away1"><input name="Away" type="text" size="1" value=""></div>
</td><td class="alt2" align="center"></td><td nowrap>
<strong>Away</strong>:
</td><td>
Victory
</td><td><img src="images/calendarteams/Victory.gif">
</div>
</td></tr>

<div class="smallfont">

<strong>Venue</strong>:

Gonaives - Parc Vincent

</div>


<div class="smallfont">

<strong>Competition</strong>:

Digicel Cloture

</div>


<div class="smallfont">

<strong>Round</strong>:

9

</div>


<tr><td align="center"><input type="image" src="/forums/images/kirsch/buttons/predict.gif"></td><td">/buttons/predict.gif"></td><td class="alt2" style="border-top:0px solid #c0c0c0;" align="center" colspan="4">insert link to leaderboard here</td></tr>
</table>
</form>

[Lionel]

Thank you, thank you, thank you a thousand times. I simply reajusted the names in form to match my names.

After predicting, the predict button disappears and is replaced by a remove link. How can I 'ajax' that also? Now the remove link appears only when I refresh the page.

The "Remove" Link simply deletes the prediction in DB and the input boxes reappear. Anyway to 'ajax' this action too?

this the action done by the remove. Currently it takes me to predictions.php. I suppose I could make it give a successful confirmation message and take user back to previous page. But I am using this with both calendar.php and showthread.php (events forums hack) and people have access to two pages for input, either via the thread for single input or via calendar for multiple inputs for same day events.

if ($_REQUEST['do'] == 'remove')
{

// get input data
$vbulletin->input->clean_array_gpc('r', array('eventid' => TYPE_UINT));

$eventid =& $vbulletin->GPC['eventid'];
$player=$vbulletin->userinfo['userid'];
$db->query("DELETE FROM new_predictions WHERE eventid='$eventid' and userid='$player'");
}

first image is after ajax submit and second is after refreshing the page.

[Lionel]

I tried to add

fetch_object('button').innerHTML = <a
href="predictions.php?do=remove&eventid=$eventinfo[eventid]">Remove</a>;

but of course that gives me a javascript error

[nico_swd]

Give this a try.



<script type="text/javascript">
function create_req_object()
{
var req = false;

if (window.XMLHttpRequest)
{
req = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
var msp = new Array('Microsoft', 'Msxml2');

for (var i in msp)
{
try
{
req = eval('ne' + 'w Act' + 'iveXObj'+ 'ect(msp[i] + ".XMLH'+ 'TTP");');
}
catch(e)
{
continue;
}
}
}

return req;
}

function submit_form(form)
{
var http = create_req_object();

if (!http)
{
return true;
}

if (isNaN(form.Home.value) || isNaN(form.Away.value) || !form.Home.value || !form.Away.value)
{
alert("Invalid prediction. Please use numbers only.");
return false;
}

http.open('POST', form.action);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.onreadystatechange = function()
{
if (http.readyState == 4 && http.status == 200)
{
var eventid = parseInt(http.responseText);

if (!isNaN(eventid))
{
toggle_predictions();
fetch_object('predction_home1').innerHTML = form.Home.value;
fetch_object('predction_away1').innerHTML = form.Away.value;

fetch_object('remove').innerHTML = '<a href="predictions.php?do=remove&eventid='+ eventid +'" onclick="return remove_prediction('+ eventid +');">Remove</a>';

alert("Predictions successfully submitted.");
}
}
}
http.send('do=addpredict&Home='+ form.Home.value +'&Away='+ form.Away.value +'&eventid='+ form.eventid.value +'&1Home='+ form.Home1.value +'&1Away='+ form.Away1.value);
return false;
}


function remove_prediction(eventid)
{
var http = create_req_object();

if (!http)
{
return true;
}

http.open('GET', 'predictions.php?do=remove&eventid='+ eventid);
http.onreadystatechange = function()
{
if (http.readyState == 4 && http.status == 200)
{
toggle_predictions();

var form = document.predictions;
form.Home.value = '';
form.Away.value = '';

alert("Sucessfully removed.");
}
}
http.send(null);
return false;
}


function toggle_predictions()
{
var objects = new Array(
'Home1',
'Away1',
'predction_home1',
'predction_away1',
'predict',
'remove'
);

for (var i in objects)
{
var style = fetch_object(objects[i]).style;

style.display = style.display == 'none' ? 'block' : 'none';
}
}

</script>
<form action="predictions.php" method="post" onsubmit="return submit_form(this);" name="predictions">
<input type="hidden" name="do" value="addpredict">
<input type="hidden" name="eventid" value="32">
<table class="tborder" cellspacing="1" cellpadding="4" border="0">
<tr>
<td class="tcat" colspan="5">Interactive game details</td>
</tr>
<tr>
<td class="thead">Your predictions</td>
<td class="thead">Actual</td>
<td colspan="2" align="center" class="thead">Teams</td>
<td class="thead">Colors</td>
</tr>

<tr>
<td align="center">
<div id="Home1">
<input type="hidden" name="Home1" value="RDG">
<input name="Home" type="text" size="1" value="">
</div>
<div id="predction_home1" style="display: none;"></div>
</td>
<td class="alt2" align="center"></td>
<td nowrap><strong>Home</strong>:</td>
<td>RDG</td>
<td><img src="images/calendarteams/RDG.gif"></td>
</tr>

<tr>
<td align="center">
<div id="Away1">
<input type="hidden" name="Away1" value="Victory">
<input name="Away" type="text" size="1" value="" id="Away1">
</div>
<div id="predction_away1" style="display: none;"></div>
</td>
<td class="alt2" align="center"></td>
<td nowrap><strong>Away</strong>:</td>
<td>Victory</td>
<td><img src="images/calendarteams/Victory.gif"></td>
</tr>

<div class="smallfont">
<strong>Venue</strong>: Gonaives - Parc Vincent
</div>


<div class="smallfont">
<strong>Competition</strong>: Digicel Cloture
</div>


<div class="smallfont">
<strong>Round</strong>: 9
</div>

<tr>
<td align="center">
<input type="image" src="/forums/images/kirsch/buttons/predict.gif" id="predict">
<div id="remove" style="display: none;">
</div>
</td>
<td class="alt2" style="border-top:0px solid #c0c0c0;" align="center" colspan="4">insert link to leaderboard here</td>
</tr>
</table>
</form>


You have to change this as well.

if ($_REQUEST['do'] == 'addpredict')
{
// get input data
$vbulletin->input->clean_array_gpc('r', array('eventid' => TYPE_UINT, 'Home' => TYPE_UINT, 'Away' => TYPE_UINT, '1Home' => TYPE_STR, '1Away' => TYPE_STR));

$eventid =& $vbulletin->GPC['eventid'];
$home =& $vbulletin->GPC['Home'];
$away =& $vbulletin->GPC['Away'];
$hometeam =& $vbulletin->GPC['1Home'];
$awayteam =& $vbulletin->GPC['1Away'];
$player=$vbulletin->userinfo['userid'];
$db->query("INSERT into new_predictions(id,eventid,userid,homepred,awaypre d,hometeam,awayteam) VALUES ('','$eventid','$player','$home','$away','$hometea m','$awayteam')");

echo $db->insert_id();
}


(echo'ing the insert_id() so we can use it for the remove link)

You should also do an error check in your PHP script. Javascript runs on the client side and can't be trusted.

[Lionel]

Nico, once again thanks for the help. Everything but the ajax remove is fine, but I will live with that. I simply put a front end redirect in predictions.php that brings back to the previous page.

It's a pity I had to edit calendar.php as there was no hook at the desired location.

My predictions is heavily customized. I am going to try to simplify it and release it, giving you 100% credits for the ajax code (not a line was from me). I only had to add the eventid to the <div> <div id="$customtitle$eventinfo[eventid]"> to make it unique, because sometimes there are multiple games in the same day.

[Cap'n Steve]

<a href="showthread.php?t=93249" title="vBulletin.org Forum - Thread 93249">Here's a nice tutorial.</a>

[nico_swd]

^^ Thank you for that. I'll have a look at it.

Lionel, I just downloaded your script. Thanks for the credit. :)

I saw you modified it a bit... don't use getElementById, cause it's not cross browser safe. Use vB's fetch_object() function instead.


fetch_object('button'+ form.eventid.value).innerHTML = '<a href="predictions.php?do=remove&eventid='+ form.eventid.value +'">Remove</a>';


Also, I'll have a look on how to make it compatible with vB's AJAX system and post an updated version later.


EDIT:

Give this a try.

function submit_form(form)
{
if (isNaN(form.Home.value) || isNaN(form.Away.value) || !form.Home.value || !form.Away.value)
{
alert("Invalid prediction. Please use numbers only.");
return false;
}

http = new vB_AJAX_Handler(true);

if (!http)
{
return true;
}

http.onreadystatechange(handle_prediction);
http.send('predictions.php', 'do=addpredict&Home='+ form.Home.value +'&Away='+ form.Away.value +'&eventid='+ form.eventid.value +'&1Home='+ form.Home1.value +'&1Away='+ form.Away1.value);
return false;
}


function handle_prediction()
{
if (http.handler.readyState == 4 && http.handler.status == 200)
{
var form = document.predictions;

fetch_object('Home'+ form.eventid.value).innerHTML = form.Home.value;
fetch_object('Away'+ form.eventid.value).innerHTML = form.Away.value;
fetch_object('button'+ form.eventid.value).innerHTML = '<a href="predictions.php?do=remove&eventid='+ form.eventid.value +'">Remove</a>'

}
}



You have to change the form name to "predictions", or change predictions to something else in the second function.

[Lionel]

cool. Thanks Nico. Feel free to modify all you want.

[nico_swd]

I edited the post above. I didn't fully test it though.