Why is my variable empty in post?

Question

This is what I'm trying to do. Have one main form with all the data and have several dialogs, from which the data will be added to the main form.

After all the data is in the main form I will submit the form. But the problem is it won't save the values of the data in the dialogs when I copy the html to the main form. It won't put the values in the post string, the post string will show the name but containing an empty value.

This is my 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>

This is my 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

I'm pretty sure values aren't passed when you call .html on a form input element. Try looping through all of the elements in your dialog and adding them as hidden elements to the form.

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

Answer 2

Best way to do it is actually like this. Using the above answer will get you in trouble if you're using file fields or other special kind of fields I guess. But credits to him for the 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');
                }
            }
    })
}