Pourquoi ma variable est-elle vide en post?

Question

C'est ce que j'essaie de faire. Avoir un formulaire principal avec toutes les données et avoir plusieurs boîtes de dialogue, à partir de laquelle les données seront ajoutées au formulaire principal. Après toutes les données sont dans le formulaire principal, je vais soumettre le formulaire. Mais le problème est qu'il ne sauvegardera pas les valeurs des données dans les boîtes de dialogue quand je copie le html au formulaire principal. Il ne mettra pas les valeurs dans la chaîne de post, la chaîne de poste montrera le nom mais contenant une valeur vide.

Ceci est mon html:

<div class="form"> 
<form method="post" enctype="multipart/form-data" action="/admin/home/create/" class="niceform"> 
    <fieldset> 
     <dl> 
      <dt><label>Name:</label></dt> 
      <dd><input class="NFText" name="name" id="" size="54" type="text"></dd> 
     </dl> 
     <dl> 
      <dt><label>StaffPicks:</label></dt> 
      <dd > 
       <a onClick="openStaffPickDialog()" class="bt_green"><span class="bt_green_lft"></span><strong>Manage Staffpicks</strong><span class="bt_green_r"></span></a></dd> 
     </dl> 
     <dl> 
      <dt><label>Reviews:</label></dt> 
      <dd><a onClick="openReviewDialog()" class="bt_green"><span class="bt_green_lft"></span><strong>Manage Reviews</strong><span class="bt_green_r"></span></a></dd> 
     </dl> 
     <dl> 
      <dt><label>Carousel(Add Slide to Carousel):</label></dt> 
      <dd><a onClick="openCarouselDialog()" class="bt_green"><span class="bt_green_lft"></span><strong>Add Carousel</strong><span class="bt_green_r"></span></a></dd> 
     </dl> 
     <dl> 
      <dt><label>Theme:</label></dt> 
      <dd><input class="NFText" name="theme" id="" size="54" type="text"></dd> 
     </dl> 
     <div id="appendform"></div> 

     <input type="hidden" id="slidecount" name="slidecount" value="1"/> 

     <dl class="submit"> 
      <img class="NFButtonLeft" src="/admin/img/0.png"><input type="submit" value="Save" id="submit" name="submit" class="NFButton"><img src="/admin/img/0.png" class="NFButtonRight"> 
     </dl> 

</fieldset> 
<div id="hiddeninform" style="visibility:hidden; height:1px;"></div> 
</form> 
</div> 
<div style="visibility:hidden; height:1px;"> 
    <div id="carouseldialog"> 
     <form id="carouselform"> 
      <div id="carouselslides"> 
       <div id="slide1"><label>LinkURL:</label><input name="linkurl1" type="text" /><br/> 
       <label>Upload Image</label><input name="slideimage1" type="file" /><br/></div> 
      </div> 
      <a onClick="addSlide()" class="bt_green"><span class="bt_green_lft"></span><strong>Add Slide</strong><span class="bt_green_r"></span></a> 
      <a onClick="removeSlide()" class="bt_red"><span class="bt_red_lft"></span><strong>Remove Slide</strong><span class="bt_red_r"></span></a> 
     </form> 
    </div> 


    <div id="carouselslide"> 
     <div id="slidenonumber"> 
      <br/> 
      <label>LinkURL:</label><input name="linkurl" id="linkurl" type="text" /><br/> 
      <label>Upload Image</label><input name="slideimage" id="slideimage" type="file" /><br/> 
     </div> 
    </div> 
    <div id="staffpickdialog"> 
     <div id="staffpicksaddto"> 
       <select id="staffpicks" name="staffpicks" size="1"> 
        {% for program in programs %} 
        <option value="{{program.key.name}}">{{program.name}}</option> 
        {% endfor %} 
       </select> 
      </div> 
      <a onClick="addStaffpick()" class="bt_green"><span class="bt_green_lft"></span><strong>Add Staffpick</strong><span class="bt_green_r"></span></a></dd> 
      <a onClick="removeStaffPick()" class="bt_red"><span class="bt_red_lft"></span><strong>Remove Staffpick</strong><span class="bt_red_r"></span></a> 

    </div> 
    <div id="staffpickhidden"> 
       <br/> 
       <select id="staffpicks" name="staffpicks" > 
        {% for program in programs %} 
        <option value="{{program.key.name}}">{{program.name}}</option> 
        {% endfor %} 
       </select> 
    </div> 

    <div id="reviewdialog"> 
     <div id="reviewsaddto"> 
      <textarea cols="60" rows="5" id="reviews" name="reviews"></textarea> 
     </div> 
      <a onClick="addReview()" class="bt_green"><span class="bt_green_lft"></span><strong>Add Staffpick</strong><span class="bt_green_r"></span></a></dd> 
      <a onClick="removeReview()" class="bt_red"><span class="bt_red_lft"></span><strong>Remove Staffpick</strong><span class="bt_red_r"></span></a> 

    </div> 


    <div id="reviewhidden"> 
     <br/> 
     <textarea cols="60" rows="5" id="reviews" name="reviews"></textarea> 
    </div> 

</div> 

Ceci est mon javascript:

function openReviewDialog(){ 
$('#reviewdialog').dialog({ 
     width: 480, 
     modal: true, 
     buttons: { 
      'Save': function() { 
       $('#hiddeninform').append($('#reviewsaddto').html()) 
       $(this).dialog('close'); 
      }, 
      Cancel: function() { 
       $(this).dialog('close'); 
      } 
     } 
}) 

}

Answer 1

Je suis assez sûr que les valeurs ne sont pas transmises lorsque vous appelez .html sur un formulaire élément d'entrée. Essayez de faire défiler tous les éléments de votre boîte de dialogue et de les ajouter en tant qu'éléments cachés au formulaire.

$("select, textarea, input", $("#dialog")).each(function (i) { 
    $("#hiddeninform").append($("<input/>").attr("name", $(this).attr("name")).val($(this).val())); 
}); 

Answer 2

La meilleure façon de le faire est réellement comme ceci. En utilisant la réponse ci-dessus, vous aurez des problèmes si vous utilisez des champs de fichiers ou d'autres types de champs spéciaux, je suppose. Mais les crédits à lui pour la solution!

function openCarouselDialog(){ 
    $('#carouseldialog').dialog({ 
      width: 450, 
      modal: true, 
      buttons: { 
       'Save': function() { 
        $("#carouseldialog input[type=text]").each(function (i) { 
         $("#hiddeninform").append($(this)); 
        }); 
        $("#carouseldialog input[type=file]").each(function (i) { 
         $("#hiddeninform").append($(this)); 
        }); 
        $(this).dialog('close'); 
       }, 
       Cancel: function() { 
        $(this).dialog('close'); 
       } 
      } 
    }) 
}