title: Saving form data, inside wordpress?
body: <p>I am adding onto an opensource meta box script... View the source <a href="https://github.com/jaredatch/Custom-Metaboxes-and-Fields-for-WordPress/blob/master/init.php" rel="nofollow">here</a></p>
  
  <p>What I am doing is essentially adding contents inside a textbox as a layer (textbox is cloned each time a user wants a new layer), here is a fiddle to demonstrate how it operates <a href="http://jsfiddle.net/S9fm6/6/" rel="nofollow">fiddle.</a></p>
  
  <p>Creating the functionality you see in the fiddle is the easy part, but saving the data is where I am weak... I have a basic understanding of using ajax to save data, I think it would be ideal to save form data with ajax then put it onto a database.</p>
  
  <p>My problem (The source code of the script <a href="https://github.com/jaredatch/Custom-Metaboxes-and-Fields-for-WordPress/blob/master/init.php" rel="nofollow">here</a>) I cannot add <code>&lt;form&gt;</code> inside the script.</p>
  
  <p>Here is a sample on how I would save the data...</p>
  
  <p><strong>Save:</strong></p>
  
  <pre><code>save : function(el) {
  
      // Temporary disable submit button
      jQuery('.publish button').text('Saving ...').addClass('saving').attr('disabled', true);
      jQuery('.saving-warning').text('Please do not navigate away from this page while Brash is saving your layers!');
  
  
      // Iterate over the sublayers
          jQuery(this).find('#sub-layers .block').each(function(sublayer) {
  
              // Iterate over the sublayer properties
              jQuery(this).find('input, select, textarea').each(function() {
  
                  // Save original name attr to element's data
                  jQuery(this).data('name', jQuery(this).attr('name') );
  
  
              });
          });
  
      // Reset layer counter
      Brash.counter = 0;
  
      setTimeout(function() {
  
          // Iterate over the sublayers
          jQuery('#sub-layers .block').each(function(sublayer) {
  
              // Data to send
              $data = jQuery('.main .moon_metabox').eq(layer).find('input, textarea, select');
              $data = $data.add( jQuery('#DONTHAVEFORM_DUETOSCRIPT &gt; input')  );
  
  
              // Post layer
              jQuery.ajax(jQuery(el).attr('action'), {
                  type : 'POST',
                  data : $data.serialize(),
                  async : false,
                  success : function(id) {
  
                      Brash.counter += 1;
  
                      if(jQuery('.main .moon_metabox').length == Brash.counter) {
  
                          // Give feedback
                          jQuery('.publish button').text('Saved').removeClass('saving').addClass('saved');
                          jQuery('.saving-warning').text('');
  
                          // Re-enable the button
                          setTimeout(function() {
                              jQuery('.publish button').text('Save changes').attr('disabled', false).removeClass('saved');
                          }, 2000);
  
  
                              // Layers
                              jQuery('.main .moon_metabox').each(function(layer) {
  
                                  // Sublayers
                                  jQuery(this).find('#sub-layers .block').each(function(sublayer) {
                                      jQuery(this).find('input, select, textarea').each(function() {
                                          jQuery(this).attr('name', jQuery(this).data('name'));
                                      });
                                  });
                              });
  
                      }
                  }
              });
          });
      }, 500);
  },
  
   // Save changes
  jQuery('#DONTHAVEFORM_DUETOSCRIPT').submit(function(e) {
      e.preventDefault();
      Brash.save(this);
  });
  </code></pre>
  
  <p>Once I get the form tags working, in lay-mans terms essentially the goal with this method to saving data is putting information in input fields and filling database tables with those values? </p>
  
  <p>I have seen plugins using <code>action="&lt;?php echo $_SERVER['REQUEST_URI']?&gt;"</code> If I put that inside the form action, where does the data travel? How do I direct it to a database table, I am hoping to get links and some brief information that can help paint a clearer picture, that would be super!</p>
  
  <p><strong>Recap:</strong> For learning and testing, I just want to figure out how I can take form data, with only 2 inputs 1 textarea, put that form data onto a wordpress database using ajax, then reuse that data, it doesn't seem to complicated, I just cannot figure out how to incorporate a form inside the <a href="https://github.com/jaredatch/Custom-Metaboxes-and-Fields-for-WordPress/blob/master/init.php" rel="nofollow">metabox script</a>, and I need a little lesson in the saving data department.</p>
  
  <p>Here is how I am implementing my custom data in the script.</p>
  
  <p>I create my own custom <code>$field['type']</code> named sortable. Line #40 in the <a href="http://jsfiddle.net/S9fm6/6/" rel="nofollow">fiddle.</a> is the beginning of this code, </p>
  
  <pre><code>case 'sortable':
  
  
                  echo '&lt;div id="sample" style="display: none;"&gt;';
                  echo '&lt;div class="block" style="margin: 0 auto;"&gt;';
                  echo '&lt;p class="handle"&gt;&lt;/p&gt;';
                  echo '&lt;div contenteditable="true" class="cancel" style="margin: 0 auto;"&gt;';
                  echo '&lt;textarea name="', $field['id'], '" id="', $field['id'], '" class="joetest" cols="60" rows="10"&gt;', '' !== $meta ? $meta : $field['std'], '&lt;/textarea&gt;';
                  echo '&lt;/div&gt;';
                  echo '&lt;/div&gt;';
                  echo '&lt;/div&gt;';
  
  
                  echo '&lt;div id="sub-layers"&gt;&lt;/div&gt;';
  
                  echo '&lt;a class="add"&gt;add&lt;/a&gt;';
  
  
                  echo '&lt;div class="inner"&gt;
                              &lt;button class="button-primary"&gt;Save changes&lt;/button&gt;
                                  &lt;p class="saving-warning"&gt;&lt;/p&gt;
                                    &lt;div class="clear"&gt;&lt;/div&gt;
                        &lt;/div&gt;';      
  
              break;
  </code></pre>