title: Jquery drag drop form hidden value inserting into php mysql
body: <p>I'm trying to create a form from the following code, but not having any success. I want to input hidden fields to capture a value of 1 when I put one of the draggable items into the "Most Like Me" field, a value of 2 when the draggable item is in the "2nd Most Like Me", 3 for "3rd Most Like Me", and 4 for "Least Like Me". Sample can be viewed by <a href="http://indabahealthandwellness.com/indabaglobal/dragdrop8.php" rel="nofollow">clicking here.</a> How would I create this using the following code? I use PHP and MySQL as reference for adding to the database.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;style type="text/css"&gt;
  /* Add some margin to the page and set a default font and colour */
  
  body {margin: 30px;font-family: "Georgia", serif;line-height: 1.8em;color: #333;}
  
  /* Give headings their own font */
  
  h1, h2, h3, h4 {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  }
  
  /* Main content area */
  
  #content {
    margin: 80px 70px;
    text-align: center;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
  }
  
  /* Header/footer boxes */
  
  .wideBox {
    clear: both;
    text-align: center;
    margin: 70px;
    padding: 10px;
    background: #ebedf2;
    border: 1px solid #333;
  }
  
  .wideBox h1 {
    font-weight: bold;
    margin: 20px;
    color: #666;
    font-size: 1.5em;
  }
  
  /* Slots for final card positions */
  
  #cardSlots {
    margin: 50px auto 0 auto;
    background: #ddf;
  }
  
  /* The initial pile of unsorted cards */
  
  #cardPile {
    margin: 0 auto;
    background: #ffd;
  }
  
  #cardSlots, #cardPile {
    width: 910px;
    height: 120px;
    padding: 20px;
    border: 2px solid #333;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
    box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
  }
  
  /* Individual cards and slots */
  
  #cardSlots div, #cardPile div {
    float: left;
    width: 150px;
    height: 78px;
    padding: 10px;
    padding-top: 40px;
    padding-bottom: 0;
    border: 2px solid #333;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin: 0 0 0 10px;
    background: #fff;
  }
  
  #cardSlots div:first-child, #cardPile div:first-child {
    margin-left: 0;
  }
  
  #cardSlots div.hovered {
    background: #aaa;
  }
  
  #cardSlots div {
    border-style: dashed;
  }
  
  #cardPile div {
    background: #666;
    color: #fff;
    font-size: 20px;
    text-shadow: 0 0 3px #000;
  }
  
  #cardPile div.ui-draggable-dragging {
    -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
    box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  }
  
  &lt;/style&gt;
  
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
  // JavaScript will go here
  
  $( init );
  
  function init() {
  
    // Create the pile of shuffled cards
    {
      $('#cardPile div').draggable( {
        containment: '#content',
        stack: '#cardPile div',
        cursor: 'move',
        revert: true
      } );
    }
  
    // Create the card slots
    {
      $('#cardSlots div').droppable( {
        accept: '#cardPile div',
        hoverClass: 'hovered',
        drop: handleCardDrop
      } );
    }
  
  function handleCardDrop( event, ui ) {
      var slotNumber = $(this);
      var cardNumber = ui.draggable;
  
      if ( cardNumber == cardNumber ) {
          ui.draggable.addClass ( 'correct' );
          ui.draggable.draggable ( 'disable' );
          $(this).droppable( 'disable' );
          ui.draggable.position( {of: $(this), my: 'left top', at: 'left top' } );
          ui.draggable.draggable( 'option', 'revert', false );
      }
  }
  
  
  
  }
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="content"&gt;
    &lt;div id="cardPile"&gt;
    &lt;div&gt;Controlling&lt;/div&gt;
    &lt;div&gt;Motivating&lt;/div&gt;
    &lt;div&gt;Realistic&lt;/div&gt;
    &lt;div&gt;Organized&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="cardSlots"&gt;
    &lt;div&gt;Most Like Me&lt;/div&gt;
    &lt;div&gt;2nd Most Like Me&lt;/div&gt;
    &lt;div&gt;3rd Most Like Me&lt;/div&gt;
    &lt;div&gt;Least Like Me&lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>