CODEWITHSUNDEEP
ajaxformsdrupal
Moha
Moha

Reputation: 885

How to create a simple ajax form in Drupal 7?

I want to create a simple form in Drupal7 with only one field. When hitting the submit button I need to call an ajax function with the field value and update a DIV on the page without reload.

I'm not familiar with Drupal form API, and I tried to implement the examples form the form api documentation but I always get errors like this:

Notice: Undefined index: #title_display form_pre_render_conditional_form_element() függvényben (/var/www/nmtest/includes/form.inc 2986 sor). Notice: Undefined index: #value theme_textarea() függvényben /var/www/nmtest/includes/form.inc 3727 sor).

I can do it by creating a custom page and simply use native PHP but this is not an "elegant" way.

I want something similar like the one here, but without form valitation, page reload or so: Create a VERY simple form in Drupal

I only want one button that calls an ajax function. Shoud I do this with forms API or just use plain old native PHP and jQuery?

Edit: Looks like I don't even need a real ajax call, because I only need to change an SRC of an IMG tag.

Here's what I did in native PHP. I want to achive this trough forms api:

<script>
    function getstar() {            
        starpoints = jQuery('#starpoints').val();
        rand = Math.floor(Math.random() * 9999) + 1;
        src = "test.php?star=" + starpoints + '&rand=' + rand;            
        jQuery('#starimg').attr("src",src);            
        return false;
    }        
</script>
<form>
<input type="text" name="starpoints" id="starpoints" />
<input type="submit" onclick="return getstar();" />
</form>
<img src="/test.php?star=5" id="starimg" />

Edit: Ok, I managed to render a form with the Drupal API. Now the only thing is that I want to insert the placeholder for the IMG via my module, but I don't know how to do it. The form renders fine, but I want to add a HTML block after it. Currently I do it by javascript:

jQuery(document).ready(function() {
jQuery('<div><br /><img id="starimg" src="" /></div>').insertAfter('#drawstar-form');
});

What hook should I catch to render this HTML block after the form? I tried drupal_get_form but that returns an array and I cannot attach the HTML block.

Upvotes: 1

Views: 1810

Answers (1)

Pierre Buyle
Pierre Buyle

Reputation: 4873

The Form API provides everything that you need to do this without writing a single line of JavaScript code. See http://drupal.org/node/752056 and http://api.drupal.org/api/examples/ajax_example!ajax_example.module/function/ajax_example_simplest/7 and .

Upvotes: 1

Related Questions