help getting started with javascript generated forms

rubyonrails-talk
1

How does one generate a form within a view using javascript?

Specifically, assume views/premise/new.html.erb looks like this:

<%= form_for(Premise.new) do |f| %>   <%= f.hidden_field :full_address, :value => $FULL_ADDRESS %>   <%= f.hidden_field :geocoding, :value => $GEOCODING %>   <%= f.submit :value => "use this address" %>   <%= f.label :formatted_address, $FULL_ADDRESS %> <% end %>

... but with the twist that this form must be generated on the client side by javascript. (In this case, $GEOCODING and $FORMATTED_ADDRESS are placeholders for values generated by the Google geocoding service, which requires client-side javascript.)

One approach would be to look at the HTML generated by the above .erb code and write javascript functions that emit HTML directly. But this approach reeks -- there must be a better way!

Assuming there is a better way, where do I look for documentation and examples?

2

How does one generate a form within a view using javascript?

Specifically, assume views/premise/new.html.erb looks like this:

<%= form_for(Premise.new) do |f| %> <%= f.hidden_field :full_address, :value => $FULL_ADDRESS %> <%= f.hidden_field :geocoding, :value => $GEOCODING %> <%= f.submit :value => "use this address" %> <%= f.label :formatted_address, $FULL_ADDRESS %> <% end %>

... but with the twist that this form must be generated on the client side by javascript. (In this case, $GEOCODING and $FORMATTED_ADDRESS are placeholders for values generated by the Google geocoding service, which requires client-side javascript.)

One approach would be to look at the HTML generated by the above .erb code and write javascript functions that emit HTML directly. But this approach reeks -- there must be a better way!

Another would be to have the form created server side (ie normally), but fill in the form values client side once they become known (and if you care you can have the form hidden initially and show it only once the geocoding data is available)

Fred

3

Frederick Cheung wrote in post #960432:

Another [approach] would be to have the form created server side (ie normally), but fill in the form values client side once they become known (and if you care you can have the form hidden initially and show it only once the geocoding data is available)

Fred

When I first read this, I slapped my head and said "doh! -- it's javascript, so of course it can modify the form generated by the server".

But then I realized that it won't exactly work in my case. I oversimplified the original problem statement: the javascript can generate an arbitrary number of these forms, and I don't know how many that will be beforehand.

I s'pose I could let the server generate a single form, as Fred suggests, and use that as a template for the javascript code to replicate/modify as needed. This approach is still a little bizarre but might be easier to maintain.

Right now, I'm doing it the stupid way (described in the OP) and it's working.

- ff

4

Fearless Fool wrote in post #960459:

Frederick Cheung wrote in post #960432:

Another [approach] would be to have the form created server side (ie normally), but fill in the form values client side once they become known (and if you care you can have the form hidden initially and show it only once the geocoding data is available)

Fred

When I first read this, I slapped my head and said "doh! -- it's javascript, so of course it can modify the form generated by the server".

But then I realized that it won't exactly work in my case. I oversimplified the original problem statement: the javascript can generate an arbitrary number of these forms, and I don't know how many that will be beforehand.

In that case, you may want to use the Ajax approach. Instead of having the JS generate the form itself, have it request a rendered partial from the server. That way you can still use ERb (or better yet, Haml) rather than building the form in JavaScript, but the rendered forms don't all have to go into the DOM in advance.

Best,