After clicking the save button in the jQuery dialog box, there is no response when submitting the form
P粉207969787
2023-08-13 15:02:29
<p>I have a form in JSP and the following code in JavaScript. The problem I'm facing is as follows: </p>
<p>When I click the save button, if the <code>if(speciesid === 2){</code> condition is met, and I click <code>"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 <code>if(speciesid === 2){</code> condition is not met. I have some doubts about this line <code>" document.getElementById("orderForm").submit();"</code>. Can anyone see what's wrong with my code? To avoid excessive code content, other form fields have been omitted. </p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p><br /></p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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)">