Topic: AJAX form within a traditional form

How do I submit a AJAX form which is within a normal form? I don't want to the nomral form to be submitted when submit the AJAX form.

Any examples of this out there?

Re: AJAX form within a traditional form

Well, you can't really have a form within a form, but you could call a remote function.

<%= button_to_function 'Submit', remote_function(:action => 'my_action') %>

Does that help?

Re: AJAX form within a traditional form

Maybe I should explain what I'm trying to do. I have a form (mostly scaffold code) which I can use to edit a contact. Contacts can have many addresses and my relationship between contact and address reflects this. What I'd like to be able to do is, while I'm editing a contact, have a section for editing, adding and deleting addresses from a contact.

Ideally this section would use some JavaScript and AJAX. For example, clicking 'Add a new address' would make some new fields appear so a new address can be added. Edit and delete should work in a similar way.

Any suggestions gratefully received. I'm struggling to get started.

Re: AJAX form within a traditional form

Basically you'll want to familiarize yourself with form_remote_tag
and link_to_remote.

The basic gist is, link_to_remote will call an action that generates a small piece of html that gets placed in a div.  That html can contain a form_remote_tag that submits to an action and also returns html.  You can also use RJS for more complex javascript manipulation, but I would hold of on that.

Re: AJAX form within a traditional form

thabenksta wrote:

Basically you'll want to familiarize yourself with form_remote_tag
and link_to_remote.

The basic gist is, link_to_remote will call an action that generates a small piece of html that gets placed in a div.  That html can contain a form_remote_tag that submits to an action and also returns html.  You can also use RJS for more complex javascript manipulation, but I would hold of on that.

Thanks thabenksta. Much appreciated.

Is it normal practise to write the actions for this functionality on the contact controller or the address controller?

Would I have extra actions such as below on the contact controller?

ajax_get_address_form
ajax_add_address
ajax_delete_address
ajax_edit_address

Last edited by mip (2006-11-13 11:59:45)

Re: AJAX form within a traditional form

I have this in my contact edit form:

<div id="address-form">
  <%= link_to_remote 'Add address',
    :url => {:action => 'ajax_get_address_form'},
    :update => 'address-form' %>
</div>

So when 'Add address' is clicked it is replaced with a form to add an address.

The action 'ajax_get_address_form' simply renders a partial which contains the form to add an address. Am I correct in saying that this HTML that is returned should contain the form_remote_tag which submits the form?

At the end of the partial I have:

<%= form_remote_tag :url => {:action => 'ajax_add_address'}, :update => 'address-form' %>

Assume I need a submit button with this?

Last edited by mip (2006-11-13 12:29:50)

Re: AJAX form within a traditional form

Hmm. I have:

<%= form_remote_tag :url => {:action => 'ajax_add_address'}, :update => 'address-form' %>
<label for="address_address">Address</label>
<%= text_field 'address', 'address'%>
<label for="address_postcode">Postcode</label>
<%= text_field 'address', 'postcode'%>
<%= submit_tag "Save address" %>
<%= end_form_tag %>

But when I click 'Save address' the whole form is still being submitted?

This is where I put in:

<%= button_to_function 'Submit', remote_function(:action => 'my_action') %>

?

Last edited by mip (2006-11-13 13:19:58)

Re: AJAX form within a traditional form

Is it possible to take the ajax form out of the other form?  I would try to do that, otherwise you're going to have lots of troubles.

As far as organizing your actions, I would stray away from having ajax specific actions.  You can have an action respond differently based on whether it was called through Ajax.

http://api.rubyonrails.com/classes/Acti … ml#M000062

Also, you might consider creating a separate controller for the address object, that simply has crud operations.  This would be a RESTfull approach.

Hope that helps.

Re: AJAX form within a traditional form

thabenksta wrote:

Is it possible to take the ajax form out of the other form?  I would try to do that, otherwise you're going to have lots of troubles.

I guess that would make it easier. I'm sure I've seen examples of this though. Moving this part of the edit screen is going to make a mess of my page. There must be a way to do this?

thabenksta wrote:

As far as organizing your actions, I would stray away from having ajax specific actions.  You can have an action respond differently based on whether it was called through Ajax.

http://api.rubyonrails.com/classes/Acti … ml#M000062

Thanks for the tips.

thabenksta wrote:

Also, you might consider creating a separate controller for the address object, that simply has crud operations.  This would be a RESTfull approach.

I have a controller for address already. Does this affect the way I should write the AJAX code? Should I utilise actions on the address controller instead?

Last edited by mip (2006-11-14 06:20:16)

10

Re: AJAX form within a traditional form

If I'm understanding correctly then what I need to do is instead of popping up a form like this:

<%= form_remote_tag :url => {:action => 'add_address'}, :update => 'address-form' %>

<label for="address_address">Address</label>
<%= text_field 'address', 'address' %>

<label for="address_postcode">Postcode</label>
<%= text_field 'address', 'postcode' %>

<%= submit_tag "Save address" %>
<%= end_form_tag %>


I need to use something like this:

<label for="address_address">Address</label>
<%= text_field 'address', 'address' %>

<label for="address_postcode">Postcode</label>
<%= text_field 'address', 'postcode' %>

<%= button_to_function 'Save address', remote_function(:action => 'add_address') %>

Re: AJAX form within a traditional form

No, I think the first should be correct.  You just want to avoid this.

<form>
Name: <input><br/>

<%= form_remote_tag :url => {:action => 'add_address'}, :update => 'address-form' %>

<label for="address_address">Address</label>
<%= text_field 'address', 'address' %>

<label for="address_postcode">Postcode</label>
<%= text_field 'address', 'postcode' %>

<%= submit_tag "Save address" %>
<%= end_form_tag %>

</form>