title: show input fields instead of text when you click an "edit" link
body: <p>I am currently creating a backend. What I need is some jquery to insert some different form fields. I can for example have this code:</p>
  
  <pre><code>&lt;div&gt;
      &lt;div&gt;
          Name
      &lt;/div&gt;
      &lt;div&gt;
          Type
      &lt;/div&gt;
      &lt;div&gt;
          &lt;a class="edit" href="#"&gt;Edit&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This code needs to get converted so the Name and Type text is insted the values of two input fields when I click a.edit</p>
  
  <p>EDIT:</p>
  
  <p>I've tried this code - but when I click "a.ff-save" it does not alert??? What is my problem?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready( function() {
      var this_form_id = $("input#form_id").val();
      $("#formfield-list div.formfield-ff:odd").css('background', '#f6f6f6');
  
  
      $("a.ff_add").click( function() {
          var name_val = $("input#new_field_name").val();
          var type_val = $("input#new_field_type").val();
          var demand_val = $("input#new_field_demand").val();
          $.ajax({
              type: "POST",
              url: "{pref_folder}/admix/forms/addFormField",
              data: ({ form_id: this_form_id, field_name: name_val, field_type: type_val, field_demand: demand_val }),
              success: function(text) {
  
                  $.ajax({
                      type: "post",
                      url: "{pref_folder}/admix/forms/getFormFields",
                      data: { form_id: this_form_id },
                      success: function(t) {
                          $("#formfield-list").empty().append(t);
                          $("#formfield-list div.formfield-ff:odd").css('background', '#f6f6f6');
                      },
                      dataType: "html"
                  });
  
  
                  $(".add-succes-message").empty().append('&lt;div class="msg"&gt;'+text+'&lt;/div&gt;');
                  $(".add-field-row").slideUp(500, function(){
                      $(".add-field-row").slideDown(500);
                  }).delay(3500);
                  $(".add-succes-message").slideDown(500, function(){
                      $(".add-succes-message").slideUp(500);
                  }).delay(3500);
  
              },
              cache: false,
              async: false,
              dataType: "html"
          });
      });
  
      $("a.ff-save").click(function (){
          alert("ok");
      });
  
      $("a.ff-edit").click(function (){
          var fid = $(this).prev().val();
  
          var nameValue = $("#ff-"+fid+" div.ff-name").html().trim();
          var typeValue = $("#ff-"+fid+" div.ff-type").html().trim();
          var demandValue = $("#ff-"+fid+" div.ff-demand").html().trim();
          var typeInt;
  
          if( typeValue == "Tekstfelt, 1 linje" )
          {
              typeInt = 1;
          } else {
              typeInt = 0;
          }
  
  
          $("#ff-"+fid+" div.ff-name").html('&lt;input type="text" name="name" class="jq-input" value="'+nameValue+'" /&gt;');
          $("#ff-"+fid+" div.ff-type").html('&lt;input type="text" name="type" class="jq-input" value="'+typeInt+'" /&gt;');
          if( demandValue == "Ja")
          {
              $("#ff-"+fid+" div.ff-demand").html('&lt;input type="checkbox" name="demand" class="jq-input" value="" checked="checked" /&gt;');
          } else {
              $("#ff-"+fid+" div.ff-demand").html('&lt;input type="checkbox" name="demand" class="jq-input" value="" /&gt;');
          }
  
          $("#ff-"+fid+" .ff-edit, #ff-"+fid+".ff-delete").hide();
          $("#ff-"+fid+" div:last").html('&lt;a href="#" class="ff-save"&gt;Save&lt;/a&gt;');
      });
  
      $("a.ff-delete").click();
  });
  &lt;/script&gt;
  </code></pre>