Skip to content

Instantly share code, notes, and snippets.

@janmonschke
Created May 12, 2011 13:25
Show Gist options
  • Save janmonschke/968475 to your computer and use it in GitHub Desktop.
Save janmonschke/968475 to your computer and use it in GitHub Desktop.
Simple FormHelper that works well with Backbone.js Models
###
Helps creating and submitting forms
- easy labeling
- automatically inserts values of the model to the form
- is able to serialize forms to JSON
- can submit the form to the server
- automatically displays errors if there are any
###
class FormHelper
# Constructor takes the model as argument
constructor : (@model, _options) ->
@errors = []
@counter = 0
@options =
type : "GET"
url : ""
dataType : "json"
before_submit : ->
_.extend(@options, _options)
label_for : (label) ->
"<label for='#{@counter}'>#{label}</label>"
# inserts a textfield
text : (field, _default) ->
value = _default || @model.get(field) || ""
ret = "<input type='text' id='#{@counter++}' name='#{field}' value='#{value}' />"
ret += @errors_for_field(field)
textarea : (field, _default) ->
value = _default || @model.get(field) || ""
ret = "<textarea id='#{@counter++}' name='#{field}'>#{value}</textarea>"
ret += @errors_for_field(field)
hidden : (field, _default) ->
value = _default || @model.get(field) || ""
ret = "<input type=\"hidden\" id=\"#{@counter++}\" name=\"#{field}\" />"
ret += @errors_for_field(field)
# inserts a password field
password : (field) ->
ret = "<input type='password' name='#{field}' id='#{@counter++}' />"
ret += @errors_for_field(field)
# inserts a checkbox field
checkbox : (field) ->
counter = @counter++
checked = if @model.get(field) then "checked=\"checked\"" else ""
ret = "<input type=\"checkbox\" name=\"#{field}\" id=\"#{counter}\" #{checked} />"
ret += @errors_for_field(field)
errors_for_field : (field) ->
if @errors[field]?
"<span class='form_error'>#{@errors[field]}</span>"
else
""
# returns a serialized json representation of the form
serialize : (form) ->
inputs = form.find('input[name]')
console.log "#{inputs.length}"
formdata = {}
_.each inputs, (el) ->
el = $(el)
if el.attr('type') != "checkbox"
formdata[el.attr('name')] = el.val()
else
formdata[el.attr('name')] = el.attr('checked') == true
textareas = form.find('textarea[name]')
_.each textareas, (el) ->
el = $(el)
formdata[el.attr('name')] = el.val()
@serialized = {}
@serialized[@model.top_level_element] = formdata
@serialized
# updates the values of the model
update_model : ->
@model.set(@serialized[@model.top_level_element])
# submits the form with the given options
submit : (form, success, error) ->
@options.data = @serialize(form)
console.log "data", @options.data
@options.before_submit(@options.data)
ajax_options = @options
that = this
ajax_options.success = (resp) ->
if resp.errors
that.errors = resp.errors
that.options.view.render() if that.options.view
error(resp) if error?
else
that.update_model()
success(resp) if success?
$.ajax ajax_options
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment