Problem with AJAX form...

Hi,

I'm a big fan of your work and read thoroughly manuals, tutorials, related forum posts and all info related to AJAX and its usage in Chronoforms but I'm afraid, after a lot of corrections helped by error console that I'm stuck. Here is the problem:

I'm usign J2.5.6/CF 4.0 RC3.5.1
I created a simple form that's intended to display pregnancy date and follows this steps:
1)User inputs last period date and menstrual cycle lenght
2)Form sends info to PHP script (as event in the same form) and retrieves it answer by using AJAX
3)Form display pregnancy date.

THE HTML

<div class="ccms_form_element cfdiv_datetime" id="last_period1_container_div" style=""><label>Date of your last period</label><input maxlength="150" size="16" class="cf_date_picker" title="" type="text" value="" name="last_period" />
<div class="clear"></div><div id="error-message-last_period"></div></div><div class="ccms_form_element cfdiv_text" id="cycle_container_div" style=""><label for="cycle">Number of days from the beginning of one period to beginning the next period </label><input id="cycle" maxlength="150" size="30" class="" title="" type="text" value="28" name="cycle" />
<div class="clear"></div><div id="error-message-cycle"></div></div><div class="ccms_form_element cfdiv_custom" id="input_id_8_container_div" style=""><div id="conceptiondate"></div><div class="clear"></div><div id="error-message-input_custom_8"></div></div><div class="ccms_form_element cfdiv_submit" id="conception_container_div" style="text-align:left"><input name="conception" id="conception" class="" value="Submit" type="button" />
<div class="clear"></div><div id="error-message-conception"></div></div>

THE JAVASCRIPT

function calculate ()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
var lastperiod = document.getElementsByName('last_period');
var lpdate 
= lastperiod[0].value;
var cycle = document.getElementById('cycle').value;
var url = '?option=com_chronoforms&chronoform=calculator&event=calc'+'&lastperiod='+lpdate+'&cycle='+cycle;
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("conceptiondate").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
;

window.addEvent('domready', function(){
 var x=document.getElementById("conception");

    x.addEvent('click', calculate());
  });

There is a PHP code saved as event 'calc' in the form that has no problem.

THE ERROR (FROM FF ERROR CONSOLE)
Fecha y hora: 08/11/2012 3:11:44
Error: TypeError: d is undefined
Archivo de origen: http://www.parkmed.com/media/system/js/mootools-core.js
Línea: 368

There are a lot of warnings about css and other scripts but I think they're unrelated. Please notice there are no errors/warnings about form's javascript itself.

FORM URL
http://www.parkmed.com/en/?option=com_chronoforms&tmpl=component&chronoform=calculator

Thanks in advance.

Hi zaratustra27,

The Ajax code you've used isn't from any of my examples :-(

From a quick look this line looks wrong

 x.addEvent('click', calculate());

Please try

 x.addEvent('click', calculate);

Bob

You know what people says: "If you copy from one it's plagiarism, if you copy from many it's research" :mrgreen:

Anyway, I did the change you suggested without success. Any idea?

Thanks again for your help

You know what people says: "If you copy from one it's plagiarism, if you copy from many it's research"

🙂🙂

Well, its very hard to debug this error, you will have to comment lines and find where its raised, but you are using the native JS AJAX calls although Mootools is loaded and it offers a much easier way, try to check the mootools docs for how to start an AJAX call and capture the result.

Regards,
Max

According to your suggestion I used mootools library and the code was set as:

function calculate ()
{
var myElement = document.id('conceptiondate');
var lastperiod = document.getElementsByName('last_period');
var lpdate 
= lastperiod[0].value;
var cycle = document.getElementById('cycle').value;
var url1 = 'http://www.parkmed.com/en/?option=com_chronoforms&chronoform=calculator&event=calc'+'&lastperiod='+lpdate+'&cycle='+cycle;
/*alert(url1);*/

var myRequest = new Request({
    url: url1,
    method: 'get',
    onRequest: function(){
        myElement.set('text', 'loading...');
    },
    onSuccess: function(responseText){
        myElement.set('text', responseText);
    },
    onFailure: function(){
        myElement.set('text', 'Sorry, your request failed😟');
    }
});

}
;

window.addEvent('domready', function(){
 var x=document.getElementById("conception");

    x.addEvent('click', calculate);
  });

Still no success, no error console errors but a 'getAtrribute' warning:

Advertencia: El uso de getAttributeNode() está desaprobado. Use en su lugar getAttribute().
Archivo de origen: http://www.parkmed.com/media/system/js/mootools-core.js
Línea: 343