How to load and submit Ajaxify custom form using jquery.

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
mehtatejas's picture

Hi,
I had created a form with ajax submit functionality. It is working fine.
However, I would like to load this same form using ajax and handle it ajaxed way.

I am able to ajaxify drupal form submit using following code:

$form['submit'] = array(
'#type' => 'submit',
'#value' => t('Save'),
'#submit' => array('custom_demo_ajax_form_submit'),
'#ajax' => array(
'callback' => 'custom_demo_ajax_form_callback',
'wrapper' => 'ajax-demo-wrapper',
'method' => 'replace',
'effect' => 'fade',
),
);

I am loding same form using
JS :
jQuery.postJSON(Drupal.settings.basePath + "demo/ajax/load/form?callback=?",
{
data: 1

},
function(data) {
jQuery(".form-container").append(data.value);

});

PHP:

$output = "Ajax Form :";
$output .= drupal_render(drupal_get_form('custom_demo_ajax_form'));
$output .= "";

$response = $_GET["callback"] . "({value:" . json_encode($output) . "})";
echo $response;

However on click of save button it goes to random page with following values on the page

({value:"
Ajax Form :
\n Status : None <\/label>\n \n<\/div>\n<\/div>
\n text <\/label>\n \n<\/div>\n\n\n\n<\/div><\/form><\/div>"})

Please help me.

India

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week