Question

Within my form, called frmClock, I have a div that is ultimately used as the basis for a jQuery UI modal dialog:

    <div id="dialog-form-clockout" title="Associate Mileage Reimbursement" data-ok="<%=clkContinueClockOut%>" data-cancel="<%=clkCancel%>" data-errornum="Invalid number format. Valid number format is 999.9" data-errorzero="Please enter a value greater than zero. Otherwise, select No." data-errormaxchars="Please enter a numeric value less than 5 characters long." data-errornoradio="Please select Yes or No.">
        <fieldset>        
            <div id="personalVehicle">
                <label for="<%=TAConstants.FN_ASM_RESPONSE%>">Did you use your personal vehicle for business travel during this shift?</label>
                <br>
                <input type="radio" name="<%=TAConstants.FN_ASM_RESPONSE%>" id="personalvehicle" class="text ui-widget-content ui-corner-all" value="Y"/>Yes
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="<%=TAConstants.FN_ASM_RESPONSE%>" id="personalvehicle" class="text ui-widget-content ui-corner-all" value="N"/>No
                <br>
            </div>
            <div id="questionsY" class="hidden">
                <div class="modalDialogQuestions">
                    <label for="<%=TAConstants.FN_BANK_ROUND_TRIPS%>" class="modalDialogQuestionsLbl">Enter number of round-trips to the bank.</label>  
                    <select name="<%=TAConstants.FN_BANK_ROUND_TRIPS%>" class="modalDialogAnswers" id="roundtrips">
                        <option selected value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </div>
                <div class="modalDialogQuestions">
                    <label for="<%=TAConstants.FN_OTHER_MILES%>" class="modalDialogQuestionsLbl">Enter number of miles for business related travel other than the bank.</label>     
                    <input class="positive modalDialogAnswers" type="number" name="<%=TAConstants.FN_OTHER_MILES%>" id="mileage" value="0.0" maxlength=5/>
                </div>
            </div>
        </fieldset>
        <div class="ui-state-error hidden" style="height:auto;"><span class="ui-icon ui-icon-alert" style="display:inline; margin-right:.25em; float:left;"/></span><p class="validateTips" style="display:inline; border:0px;"></p></div>
    </div>
</form>

So ultimately once we fill out this jQuery modal dialog form, I use the same javascript we used to use prior to this enhancement for form submission (plus alerts to tell me this data is in the document element).

    alert(document.getElementById('personalvehicle').value);
    alert(document.getElementById('roundtrips').value);
    alert(document.getElementById('mileage').value);

    submitForm();

…

/**
 *  This function disallows the form to be submitted twice.
 */
function submitForm () {
  if (!hasBeenSubmitted) {
    hasBeenSubmitted = true;
    document.frmClock.submit();
  }

The alerts display the same text the user inputs, but doesn’t seem to be sent with the rest of the form data that we’ve received in the past without the jQuery modal dialog form. I’ve been determining this from our processor .java file, with the following code that doesn’t seem to set the vars, as it doesn’t pass null checks:

if (req.getParameter(FN_ASM_RESPONSE)!=null){
    Character asmResponse = (req.getParameter(FN_ASM_RESPONSE)).charAt(0);
}
if (req.getParameter(FN_BANK_ROUND_TRIPS)!=null){
    Integer bankRoundTrips = Integer.parseInt(req.getParameter(FN_BANK_ROUND_TRIPS));
}
if (req.getParameter(FN_OTHER_MILES)!=null){
    Float otherMiles = Float.parseFloat(req.getParameter(FN_OTHER_MILES));
}

The most I’ve heard is to make sure my inputs have the name attribute. These name attributes seem to be set though, view source shows them as personalvehicle, roundtrips, and mileage, which were set from the following constants .java file:

public static final String FN_ASM_RESPONSE = "personalvehicle";
public static final String FN_BANK_ROUND_TRIPS = "roundtrips";
public static final String FN_OTHER_MILES = "mileage";

Does anyone have any ideas as to what I ought to look into or try? Breakpoints on the getParameter() methods to check if null show it hits these points, but doesn’t hit what is contained because the parameters are null.

Answer 1

The problem is that jQuery UI moves the dialog containing your input field out of the form.

You can change your dialog loading function to add a function that runs when the dialog is created and move it back to your form.

$('#myDialog').dialog({  create: function () { $(this).parent().appendTo('form') } });