After clicking the save button in the jQuery dialog box, there is no response when submitting the form

Question

I have a form in JSP and the following code in JavaScript. The problem I'm facing is as follows:

When I click the save button, if the if(speciesid === 2){ condition is met, and I click "Save"< from the jquery dialog /code> button, it does not trigger the controller. However, it works fine and triggers my controller as long as the if(speciesid === 2){ condition is not met. I have some doubts about this line " document.getElementById("orderForm").submit();". Can anyone see what's wrong with my code? To avoid excessive code content, other form fields have been omitted.

<form:form method="POST" modelAttribute="orderForm"
    onsubmit="return validateOrderForm(this)">
    <form:errors path="*" cssClass="errorblock" element="div" />

    
    <form:hidden path="choiceBstatus" />
    <c:if test="${Species.speciesID == 2}">
    <div id="checklist_dialog" title="New Entry">
      <form>
        <p>
          Name:
          <input type="text" name="name" />
        </p>
        <p>Group:
          
        </p>
      </form>
    </div>
</c:if>

    <table class="noPrint">
    <tr>
        <td align="center"><br /> <input onclick="formSaveButton()" class="button" type="submit"
            name="save" value="Save" /> - <input class="button" type="submit"
            name="cancel" value="Cancel" onclick="bCancel = true;" /></td>
    </tr>
</table>


</form:form>
<script type="text/javascript">
$('#checklist_dialog').hide();

    function formSaveButton(){
        
            
         
        getSpeciesID('<c:out value="${Species.speciesID}"/>');
        
        getChoiceBStatus('<c:out value="${orderForm.choiceBstatus}"/>');
        
                
        
    }
    
    function getSpeciesID(speciesid){
        console.log("Species ID");
        console.log(speciesid);
        
        if(speciesid === 2){
            var selectedVal = "";
            var selected = $("input[type='radio'][name='sampleChoice']:checked");
            if (selected.length > 0) {
                selectedVal = selected.val();
                console.log(selectedVal);
            }
            
            $('#checklist_dialog').dialog({
                  modal: true,
                  overlay: {
                    opacity: 0.7,
                    background: "black"
                  },


                  buttons: {
                    "SAVE": function() {
                      $(this).dialog('close');
                      $("#choiceBstatus").val("true");
                      document.getElementById("orderForm").submit();

                    },
                    "CANCEL": function() {
                      $(this).dialog('close');
                      alert("You must complete / save the checklist before saving your form!");
                      $("#choiceBstatus").val("false");
                    }

                  }


                });

        }
    }
    
    function getChoiceBStatus(status){
        console.log("Choice B Status");
        console.log(status);
    }
    
    
    

</script>

Answer 1

From what I can see, you are missing the id on the form, document.getElementById("orderForm") works by selecting the HTML element with a matching id, which in this case is "orderForm".

However, your HTML form does not specify any id. Please try updating the form to include the following ids.

<form:form id="orderForm" method="POST" modelAttribute="orderForm"
    onsubmit="return validateOrderForm(this)">