formstone/src/docs/cookie.html

Library of modular front end components.

<!-- START: FIRSTDEMO -->

<script>
  var $demoForm,
    $demoOutput;

  Formstone.Ready(function() {
    $demoForm = $(".demo_form");
    $demoOutput = $(".demo_output");

    $demoForm.on("click.cookie", ".set", setCookie)
         .on("click.cookie", ".get", getCookie)
         .on("click.cookie", ".erase", eraseCookie);
  });

  function setCookie(e) {
    killEvent(e);

    var key   = $demoForm.find("[name=set_key]").val(),
      value = $demoForm.find("[name=set_value]").val();

    $.cookie(key, value);

    output("Set", key + " = " + value);
  }

  function getCookie(e) {
    killEvent(e);

    var key   = $demoForm.find("[name=get_key]").val(),
      value = $.cookie(key);

    output("Get", key + " = " + value);
  }

  function eraseCookie(e) {
    killEvent(e);

    var key = $demoForm.find("[name=erase_key]").val();

    $.cookie(key, null);

    output("Erase", key);
  }

  function output(label, value) {
    $demoOutput.prepend('<strong>' + label + ': </strong>' + value + '</span><br>');
  }

  function killEvent(e) {
    e.preventDefault();
    e.stopPropagation();
  }
</script>

<form action="#" medthod="GET" class="fs-row form demo_form">
  <div class="fs-cell fs-xs-full fs-sm-third fs-md-third fs-lg-third">
    <h4 class="no_margin_top">Set Cookie</h4>
    <div class="fs-row">
      <div class="fs-cell fs-xs-half">
        <label class="form_label">Key</label>
        <input type="text" name="set_key" value="foo" class="form_input">
      </div>
      <div class="fs-cell fs-xs-half">
        <label class="form_label">Value</label>
        <input type="text" name="set_value" value="bar" class="form_input">
      </div>
    </div>
    <input type="submit" class="button form_button set" value="Set">
  </div>
  <div class="fs-cell fs-xs-full fs-sm-third fs-md-third fs-lg-third">
    <h4 class="no_margin_top">Get Cookie</h4>
    <label class="form_label">Key</label>
    <input type="text" name="get_key" value="foo" class="form_input">
    <input type="submit" class="button form_button get" value="Get">
  </div>
  <div class="fs-cell fs-xs-full fs-sm-third fs-md-third fs-lg-third">
    <h4 class="no_margin_top">Erase Cookie</h4>
    <label class="form_label">Key</label>
    <input type="text" name="erase_key" value="foo" class="form_input">
    <input type="submit" class="button form_button erase" value="Erase">
  </div>
</form>
<div class="demo_output form_textarea"></div>

<!-- END: FIRSTDEMO -->