title: Simulate post form submit with a function call with javascript
body: <p>With jQuery, we can simulate submitting a form:</p>
  
  <pre><code>&lt;form id="form1" method="post"&gt;
      &lt;input name="key1" value="value1" /&gt;
      &lt;input name="key2" value="value2" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>With an AJAX function call:</p>
  
  <pre><code>$.post('', { key1: 'value1', key2: 'value2' }, function() {
     // do call back
  });
  </code></pre>
  
  <p>If we use <code>jquery.form.js</code></p>
  
  <pre><code>$('#form1').ajaxSubmit({
      success: function() {
          // do call back
      }
  });
  </code></pre>
  
  <hr>
  
  <h3>Ok, now comes my question:</h3>
  
  <p>I don't have the form in the markup and I want to submit a form with some dynamic content using the method 'POST'.</p>
  
  <p>I want to make a function call to simulate the procedure, maybe something like:</p>
  
  <pre><code>utils.post('/url', {key1: 'value1', key2: 'value2'});
  </code></pre>
  
  <p>After that call, the effect is just the same as the form I have above and I submit it, with a natural synchronized way.</p>
  
  <p>Is there a nice way to do this?</p>
  
  <hr>
  
  <p>If the problem is not clear, I can make an ugly example to explain what I want:</p>
  
  <pre><code>util.post = function(url, fields) {
      var $form = $('&lt;form action="'+url+'" method="post"&gt;&lt;/form&gt;');
      var key, val;
      for(key in fields) {
          if(fields.hasOwnProperty(key)) {
              val = fields[key];
              $form.append('&lt;input type="hidden" name="'+key+'" value="'+val+'" /&gt;');
          }
      }
      $form.submit();
  }
  </code></pre>
  
  <p>The above method works but I think it is not nice enough. When the fields have a special character or something else it may cause an error.</p>