Brief description: On the form you can either select a predefined associate and save it, or create a new one and then save it, but cannot do both simultaneously. Predefined associates are presented in the drop-down list.
.html
<form id="_jqFormAssociate">
<select id="AssociateId">
<option value="">-- Select --</option>
<option value="1">Associate_1</option>
<option value="2">Associate_2</option>
<option value="3">Associate_3</option>
</select>
<div id="_jqDisablePanel">
<input id="FirstName" type="text">
<input id="LastName" type="text">
<input id="Dob" type="text">
</div>
</form>
jQuery
$(document).on("change", "#AssociateId", function(){
// if an associate is selected from the drop-down list
// (value of selected option is a numeral greater than 0),
// then disable the "#_jqDisablePanel" else, enable it.
// With disabling the "#_jqDisablePanel"
// the input fields within it must also
// be cleared/reset to default, so I
// used the following:
var panel = $("#_jqDisablePanel");
(panel.find("input")).val("");
(panel.find("select")).val("");
(panel.find("textarea")).val("");
});
Problematic Case
- We created a record by selecting an option from drop-down list
- We want to edit the record we created in the
1st-Step
(with preselected Associate and rest other fields empty obviously). - In order to do so we need to select nothing(means selecting -- Select -- option which in return will enable the panel).
- Now we will be able to insert the values in the text fields manually and then save.
- When on hitting the Save button nothing happened(submit button did get highlighted though).
Later I figured out that it was because of the code, which I added to reset the _jqDisablePanel
Solution
$(document).on("change", "#AssociateId", function(){
// I needed to use the following
// if condition which was added to
// resolve the problem.
if($("#_jqDisablePanel").is(":enable")) {
var panel = $("#_jqDisablePanel");
(panel.find("input")).val("");
(panel.find("select")).val("");
(panel.find("textarea")).val("");
}
});
What I got from all this: Realize that the jQuery code was not only reseting the enabled input fields but also reseting them when they were disabled, and this was the reason that was holding the form from being posted.
Question
What happened on using the (panel.find("input")).val("")
while the input fields where disabled that stopped the form from being posted?
This isn't the actual form, as I do NOT have access to the code, but I've given my best to explain the scenario(I think so...).