form snippets

How to fix Internet Explorer and Firefox form encoding issues when posting data to a server having a different encoding

Tagged utf-8, iso-8859-1, internet explorer, firefox, encoding, form  Languages html

This snippet explains how to fix Internet Explorer and Firefox form encoding issues when posting data to a server having a different encoding than the source system.

This happens, for example, when you host a form on a server using ISO-8859-1 that posts data to a server using UTF-8.

The fix for Firefox (and Opera and other sensible browsers) is to use the accept-charset attribute:

<form ...  accept-charset="utf-8">

The fix for Internet Explorer is to use a hack:

<form ...  accept-charset="utf-8">
  <input type="hidden" name="enc" value="&#153;">
</form>

The hidden input field will make Internet Explorer understand that you want it to support UTF-8.

How to store form data in a cookie with jQuery and the cookie plugin

Tagged jquery, cookie, form, data, persist  Languages javascript
/**
 * Makes form data persistent by storing the data in cookies.
 */
(function($){
  /**
   * Load value from cookie, and set cookie when value is changed.
   */
  $.fn.persist = function(namespace) {
    if(!namespace) {
      namespace = "";
    }
    return this.each(function() {
      var $this = $(this);
      var id = $this.attr('id');
      var cookie_name = namespace + id;
      var value;

      // Store changes in a cookie
      $this.change(function() {
        $.cookie(cookie_name, $this.val());
      });

      value = $.cookie(id);
      // Don't overwrite value if it's set
      if(!$this.val()) {
        $this.val(namespace + value);
      }
    });
  };
})(jQuery); 

$(document).ready(function(){
  $('.persistent').persist();
});

Big Search Field & Button = Beautiful?

Tagged form, input, search  Languages html
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css"/>
<style>

.search-form {
  width: 40%;
  min-width: 400px;
  border: 6px solid rgba(0, 0, 0, 0.7);
  margin: 20px auto 0;
}

input.text {
  float: left;
  width: 80%;
  border: 5px solid #fff;
  margin: 0;
  outline: none;
  font-size: 17px;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  -webkit-appearance: none;
  color: #3c3c3c;
}


input.text, input.button {
  padding: 15px;
  font-size: 17px;
  font-weight: 800;
  display: inline-block;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

input.button {
  float: right;
  width: 20%;
  margin: 0;
  border: 5px solid grey;
  color: #fff;
  background-color: grey;
  -webkit-appearance: none;
  padding-left: 0;
  padding-right: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
}

.clearfix {
  overflow: auto;
}

* {
  font-family: "Helvetica", sans-serif;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

</style>
</head>
<body>
  <div class="search-form clearfix">
    <input name="query" class="text" type="text" placeholder="Find your dog&hellip;">
    <input type="submit" value="Search" class="button">
  </div>
</body>
</html>

Rails Form Pattern With Delegated Validations

Tagged rails, form, delegate, validations, pattern  Languages ruby

Where do you put validations when you implement the Form pattern in Rails:

  • all in the model?
  • all in the form?
  • both in the model and form? This is a bad idea because you have to keep both model and form validations in sync.

This example defines all validations in the model, i.e. validation errors and form helpers work without additional code.

#
# Form object wrapper for all models created when creating a new event.
#
class CreateEventForm
  # Rails 4+
  include ActiveModel::Model
  # Rails 3
  #extend ActiveModel::Naming
  #include ActiveModel::Conversion
  #include ActiveModel::Validations

  attr_accessor :event, :calendar
  delegate :id, :persisted?, to: :event

  def initialize(attributes = {})
    @event = Event.new
    @calendar = Calendar.new
    attributes.each do |key, value|
      public_send("#{key}=", value)
    end
    setup_associations
  end

  #
  # Save the event and all related models.
  #
  def save
    if valid?
      ActiveRecord::Base.transaction do
        event.save!
        calendar.save!
      end
   else
     false
    end
  end

  def self.model_name
    Event.model_name
  end

  def event_attributes=(attributes)
    event.attributes = attributes
  end

  def calendar_attributes=(attributes)
    calendar.attributes = attributes
  end

  def valid?
    valid = super
    # errors.base(:validation_error) unless valid_children?
    valid && valid_children?
  end

  private

  def valid_children?
    [ event, calendar ].map(&:valid?).all? { |valid| valid == true }
  end

  def setup_associations
    calendar.event = event
  end
end

View example:

<%= simple_form_for @form do |f| # @form = CreateEventForm.new %>
...
f.simple_fields_for :calendar do |calendar|
end
f.simple_fields_for :event do |event|
end
...
<% end %>

Note, instead of form objects you can always use accepts_nested_attributes_for. However, why should the view define what the model should look like? accepts_nested_attributes_for is a similar hack as the deprecated attr_accessible.