Simple form with jQuery UI dialog and databases

Question

Hello, I'm programming an agenda, and I'd like to open a form within a dialog box (with jQuery UI modal form) and then register the information in my databases but I can't find an exemple of what I wanna do.

I've gathered some codes but it doesn't work, I know there are mistakes but I can't correct them as I'm new to jQuery and all that stuff.

Here is my code

$(function() {
  $("#dialog").dialog("destroy");

  var libelle = $("#libelle"),
   type = $("#type"),
   employe = $("#employe"),
   date = $("#date"),
   client = $("#client"),
   camion = $("#camion"),
   commentaire = $("#commentaire"),
   allFields = $([]).add(libelle).add(type).add(employe).add(date).add(client).add(camion).add(commentaire);

  $("#dialog-form").dialog({
   autoOpen: false,
   height: 450,
   width: 250,
   modal: false,
   buttons: {
    'Ajouter une tache': function() {
     $(".ajax").submit( function(e) {
      var datas = $(this).serialize();          
      $.ajax({
       type: 'POST',     
       url: traitement.php,    
       data: datas,    
       success: function(data) {  

       }
      });
     });
     $(this).dialog('close');
    },
    Retour: function() {
     $(this).dialog('close');
    }
   },
   close: function() {
    allFields.val('').removeClass('ui-state-error');
   }
  });



  $('#create-user')
   .button()
   .click(function() {
    $('#dialog-form').dialog('open');
   });

 });

and the html

<div class="test">


 <div id="dialog-form" title="Ajouter une tache">
  <form>
  <fieldset>
   <label for="libelle">Libelle</label>
   <input type="text" name="libelle" id="libelle" class="text ui-widget-content ui-corner-all" />

   <label for="Type">Type de RDV</label>
   <select name="type" id="type" class="text ui-widget-content ui-corner-all" />
    <option value="Entretien">Entretien</option>
    <option value="Dépannage">Dépannage</option>
    <option value="Congés">Congés</option>
   </select>

   <label for="employe">Employe</label>
   <select name="id_empl" id="id_empl" class="selectbox ui-widget-content ui-corner-all" />
    <option value="Entretien">Entretien</option>
    <option value="Dépannage">Dépannage</option>
    <option value="Congés">Congés</option>
   </select>

   <label for="date">Date</label>
   <input type="text" name="date" id="date" class="text datepicker ui-widget-content ui-corner-all" />


   <label for="client">Client</label>
   <input type="text" name="client" id="client" class="text ui-widget-content ui-corner-all" /> 

   <label for="camion">Réservation Camion</label>
   <input type="checkbox" name="camion" id="camion" class="text ui-widget-content ui-corner-all" />

   <label for="commentaire">Commentaire</label>
   <textarea name="commentaire" cols="30" rows="5" class="text ui-widget-content ui-corner-all"></textarea>
  </fieldset>
  </form>
 </div>

 <button id="create-user">Ajouter une tache</button>

</div>

Answer 1

I think you need to take a good look at the Ajax post methods of jQuery.

http://api.jquery.com/category/ajax/

you can post the input from you form fields to an php page or something.

a good plugin you might like is the values plugin:

http://plugins.jquery.com/files/jquery.values.js_1.txt