Submit a Simple Form using AJAX

By sraborg on 4 Oct 2013 at 22:25 UTC

I have a custom script setup outside of Drupal that performs some fun stuff with PHP Curl.

I'm trying to create a simple Drupal form that submits post data to this script via AJAX, but I can't seem to get it to work right. Every time I submit the form, it actually goes to the script page instead of doing it behind the scenes. Hopefully, someone here can point me in the right direction.

Here's the form details:

function form_rc_call($form, &$form_state) {
  
    $form['#action'] = 'http://xxxxxxx.com/myscript.php';
    $form['#method'] = 'post';
  

    $form['phone-number'] = array(
      '#type' => 'textfield',
      '#title' => t('Phone Number'),
      '#required' => true,
    );

    $form["wrapper"] = array("#markup" => "<div></div>");
    
    $form['submit'] = array(
      '#type' => 'submit',
      '#value' => 'Call',
      '#ajax' => array(
        '#callback' => 'ajax_test',
        '#wrapper' => 'wrapper',
         'method' => 'replace',
         'effect' => 'fade',
      ),
    );
    return $form;
  }
  
  function ajax_test($form, $form_state) {
    return 'Successfully Called Script';
  }
}

Comments

After further research, it

sraborg commented 4 October 2013 at 22:59

After further research, it appears that I'm nowhere close to doing this properly. From what I understand,
the AJAX request is actually sent to a specific menu path (defaults to 'system/ajax') where the appropriate callbacks are fired.

If that's the case, then the AJAX form I setup maybe firing and calling the callback function, but then the form submits to the my script (the custom one setup in the form action). Clearly this isn't what I want. Does anyone know a simply way to send this form data via POST in the background?

Why not make your script part

nevets commented 5 October 2013 at 00:06

Why not make your script part of your Drupal module?

It appears that you've

Jaypan commented 5 October 2013 at 00:56

It appears that you've already figured it out, but by changing the #action on your form, you are messing up Drupal's ajax system, which is why your ajax isn't working.

What you want to do is make a submit handler on the server, and post the data from within that function:

function my_modules_form($form, &$form_state)
{
  // Form definition goes here
}

function my_modules_form_submit($form, &form_state)
{
  drupal_http_request('http://www.example.com?key=value');
}

That's actually quite

sraborg commented 7 October 2013 at 22:13

That's actually quite helpful; however, I've decided to take nevets advice and just incorporate the external script into Drupal. Thus it's now revised to this:

  function form_rc_call($form, &$form_state) {

    $form['phone-number'] = array(
      '#type' => 'textfield',
      '#title' => t('Phone Number'),
      '#required' => true,
    );    

    $form['submit'] = array(
      '#type' => 'submit',
      '#value' => 'Call',
    );
    return $form;
  }


  function form_rc_call_submit($form, $form_state) {
    // Fun Script Stuff
  }

Everything is working well except for the fact that the page refreshes when the form is submitted. How can I go about making this asynchronous?

You need to add #ajax to your

Jaypan commented 8 October 2013 at 00:22

You need to add #ajax to your submit button.

That's what I thought. I

sraborg commented 8 October 2013 at 18:56

That's what I thought. I converted the form data to look like this:

<?php
  function form_rc_call($form, &$form_state) {

    $form['phone-number'] = array(
      '#type' => 'textfield',
      '#title' => t('Phone Number'),
      '#required' => true,
    );
    
    $form['output'] = array(
      '#prefix' => '<div id="empty_wrapper">',
      '#suffix' => '</div>',
    );
    
    $form['submit'] = array(
      '#type' => 'submit',
      '#value' => 'Call',
      '#ajax' => array(
        'callback' => 'form_rc_call_submit',
        'wrapper' => 'empty_wrapper',
      ),
    );

    return $form;
  }

  function form_rc_call_submit($form, $form_state) {
    // Cool Script Stuff
  }

Now when I click the submit button, I receive the following error (using Firefox as my browser):

An error occurred while attempting to process /system/ajax: can't convert undefined to object

I would suspect an error in

nevets commented 8 October 2013 at 19:28

I would suspect an error in "// Cool Script Stuff"

The thing is if I remove the

sraborg commented 8 October 2013 at 19:42

The thing is if I remove the ajax property, all works well (minus the page refresh of coarse). With that being said, I can't see it being in the callback function. Moreover, I temporarily changed the content of the callback function to the following:

  function form_rc_call_submit($form, $form_state) {
    return "success";
  }

Either way, I'm still getting the same error. Any ideas?

It is possible using

nevets commented 8 October 2013 at 21:48

It is possible using form_rc_call_submit() for the ajax callback causes a problem since that is also the default submit handler. Otherwise the error show a line number?