Ajax in magento 1.9

Question

    <script type="text/javascript">

        $j(document).ready(function () {


            $j('body').append('<div class="popup-box" id="popup-box-1">' +
                '<div class="close">X</div><div class="top">' +
                '<form id="formId" action="<?php echo Mage::getUrl('fastcall/fastCall/addData')?>" method="post" >' +
                '<input type="hidden" name="form_key" value="<?php echo Mage::getSingleton('core/session')->getFormKey() ?>" \/>' +
                '<h3>Enter your information</h3>' +
                '<p>' +
                '<label for="name" class="required"><?php echo $this->__('Name') ?></label>' +
                '<input id="customer_name" name="customer_name" value="" class="validate-alpha required-entry" type="text"/>' +
                '</p>' +
                '<p>' +
                '<label for="phone" class="required"><?php echo $this->__('Phone') ?></label>' +
                '<input id="customer_phone" name="customer_phone" value="" class="required-entry validate-phoneLax" type="text"/>' +
                '</p>' +
                '<p>' +
                '<label for="calltime" class="required"><?php echo $this->__('Call Time') ?></label>' +
                '<input id="call_time" name="call_time" value="" class="required-entry" type="text"/>' +
                '</p>' +
                '<p><input type="submit"></p>' +
                '<p><input id="product_id" name="product_id" type="hidden" value="<?php echo $this->getProduct()->getId()?>" \/>'+
                '</form></div></div>');
            $j('body').append('<div id="blackout"></div>');

            var theForm = new VarienForm('formId', true);
            var boxWidth = 400;

            new Ajax.Request('<?php echo Mage::getUrl('fastcall/fastCall/addData')?>', {
                method: 'post',
                params: Form.serialize('formId', true)
                onComplete: function(transport) {

                    alert(transport.responseText);

                }

            })
...
</script>

ajax is not working , why ? I'm trying to send a request to the controller with the information from the form.

Answer 1

There are some typos in your script. Please replace your code with this :

<script type="text/javascript">

    ...

        $j('body').append('<div class="popup-box" id="popup-box-1">' +
            '<div class="close">X</div><div class="top">' +
            '<form id="formId" action="<?php echo Mage::getUrl('fastcall/fastCall/addData')?>" method="post" >' +
            '<input type="hidden" name="form_key" value="<?php echo Mage::getSingleton('core/session')->getFormKey() ?>" \/>' +
            '<h3>Enter your information</h3>' +
            '<p>' +
            '<label for="name" class="required"><?php echo $this->__('Name') ?></label>' +
            '<input id="customer_name" name="customer_name" value="" class="validate-alpha required-entry" type="text"/>' +
            '</p>' +
            '<p>' +
            '<label for="phone" class="required"><?php echo $this->__('Phone') ?></label>' +
            '<input id="customer_phone" name="customer_phone" value="" class="required-entry validate-phoneLax" type="text"/>' +
            '</p>' +
            '<p>' +
            '<label for="calltime" class="required"><?php echo $this->__('Call Time') ?></label>' +
            '<input id="call_time" name="call_time" value="" class="required-entry" type="text"/>' +
            '</p>' +
            '<p><input type="submit"></p>' +
            '<p><input id="product_id" name="product_id" type="hidden" value="<?php echo $this->getProduct()->getId()?>" \/>'+
            '</form></div></div>');
        $j('body').append('<div id="blackout"></div>');

        var theForm = new VarienForm('formId', true);
        var boxWidth = 400;


        new Ajax.Request('<?php echo Mage::getUrl('fastcall/fastCall/addData')?>',
        {
            method:'post',
            params: Form.serialize('formId', true), 
            onComplete: function(transport){
                alert(transport.responseText);
            }
        });

    ...

</script>

Make sure, you place this code in :

<script type="text/javascript">
    $j(document).ready(function () { 

        //PLACE CODE HERE 

    });
</script>