1

What I have is a form that has dynamically created radio form-fields based on a query result. Along with each of these dynamically created form-fields, I wish to be able to open a modal window with a separate form that allows me to add other data to separate table relative to the radio line item. The problem I am having is everything works fine until I post the form. The only results that post are the values of hidden fields. Here is the code.

jquery

<script type="text/javascript">
    $(function() {
        var options = {
            open : function(event, ui) {
                $(".ui-dialog-titlebar-close").hide();
            },
            autoOpen : false,
            width : 'auto',
            modal : true,
            width : 600,
            height : 500,
            buttons : {
                "Submit" : function() {
                    $('#mForm').submit();
                    return true;
                },
                Cancel : function() {
                    $(this).dialog("close");
                }
            },
            close : function() {
                $('#defaultSectionName').val('');
                $('#defaultSectionDesc_hidden').val('');
                $('#Photo').val('');
                $('#Check2').val('');
                $('#Check21').val('');
            }
        };
        var num = 1;
        $("div#parent div").each(function() {
            var dlg = $('#dialog-window-' + num).dialog(options);
            $('#image-link-' + num).click(function() {
                dlg.dialog("open");
                return false;
            });
            num = num + 1;
        });
    }); 
</script>

HTML

<div id="parent">
    <div id="dialog-window-#i#" title="#ItemName#" class="uniForm"  style="z-index: 1800 !important;">
        <p>
            <form ACTION="index.cfm?#cgi.QUERY_STRING#" class="uniForm" id="mForm" method="post">
                <input type="hidden" name="Check2" value="#ID#" id="Check2">
                <input type="hidden" name="PhotoNew" value="New" id="Check21">
                <div class="ctrlHolder">
                    <label for="" style="display:none"><em>*</em>Picture</label>
                    <input name="Photo" type="file" id="Photo"
                    value=""
                    size="30"
                    data-default-value="Select file"
                    class="textInput "/>
                </div>

                <div class="ctrlHolder" >
                    <label for="" style="display:none"><em>*</em>Section</label>
                    <input name="Number2" style="z-index:1900 !important;"
                    id="defaultSectionName"
                    value=""
                    size="30"
                    data-default-value="Select Section"
                    class="textInput "/>
                    <p class="formHint">
                        Select a solution name
                    </p>
                </div>

                <div class="ctrlHolder">
                    <label for="" style="display:none"><em>*</em>Notes</label>
                    <textarea name="picture_note"
                    id="defaultSectionDesc_hidden"
                    data-default-value="Additional Picture Notes"
                    size="100" cols="70" rows="10"
                    class="textInput validateMaxLength val-500"
                    <p class="formHint">
                        additional notes are optional
                    </p>
                </div>
            </form>
        </p>
    </div>
    <div>
        <a id="image-link-#i#"> <img src="assets/images/camera-icon.png" alt="o" /></a>
    </div>
</div>

NOTE: this div is included in a cfoutput loop and is nested inside another cfform.

Seder
  • 2,675
  • 2
  • 19
  • 42
Chris Pilie
  • 431
  • 2
  • 7
  • 20
  • set form content type to "multipart/form-data"? – Henry Feb 19 '13 at 23:15
  • 2
    The issue may be that you are nesting forms, which is [not valid HTML](http://stackoverflow.com/questions/379610/can-you-nest-html-forms). Try moving your modal form outside of the cfform and seeing if that fixes it. – Sean Walsh Feb 20 '13 at 00:34
  • Thank you Sean. I was thinking the same thing but it did post. I will give Henry's recommendation a shot then report back. Thanks guys! – Chris Pilie Feb 21 '13 at 18:40
  • I set the content type the multi and now luck... I might have to try and move the modal outside the form but that is going to take some structural changes. Let you know what I get. – Chris Pilie Feb 22 '13 at 00:58

0 Answers0