javascript - 提交按钮间歇性地起作用

Question

以下脚本指出，如果选择美国，则仅显示州 DDL。否则，其他国家/地区不会出现任何州。

    $(document).ready(function () {
        debugger;
        var selectedStateText = $("#ddlState option:selected").text();
        var selectedState = $("#ddlState").val();
        if (selectedStateText == "") {
            $('#divStateDropdown').hide();
            $('#divLabelState').hide();
        }
        $("#ddlCountry").change(function () {
            debugger;
            var selectedCountryText = $("#ddlCountry option:selected").text();
            var selectedCountry = $("#ddlCountry").val();
            $("#selectedCountry").val(selectedCountryText)

            if (selectedCountry == 69) {
                $('#divLabelState').show();
                $('#divStateDropdown').show();
                GetStates(selectedCountry)
            }
            else {
                $('#ddlState').empty();
                $('#divLabelState').hide();
                $('#divStateDropdown').hide();
            }
        })
        $("#ddlState").change(function () {
            debugger;
            var selectedStateText = $("#ddlState option:selected").text();
            $("#selectedState").val(selectedStateText)
        })

    });

    function GetStates(idd)
    {
        $.ajax({
            type: "POST",
            url: "/UserRegistration/GetStates",
            data: JSON.stringify({"id": idd}),
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                var stateslist = $('#ddlState');
                stateslist.empty();
                $(result).each(function () {
                    $(document.createElement('option'))
                    .attr('value', this.Id)
                    .text(this.Value)
                    .appendTo(stateslist);
                });

            }
        });
    };

    function updateDetails() {
        debugger;
        $('#btnUpdate').submit();
    }
</script>



@using (Html.BeginForm("UpdateProfile","UpdateProfile",FormMethod.Post,new {id="Update"}))
    {


                <div class="inputGroupStyle">

                    <div style="width: 100%;padding-top:1%;">
                        @Html.DropDownListFor(model => model.cCountry.CountryID, (SelectList)ViewBag.CountriesList, new { @id = "ddlCountry", style = "width:146px" })
                        @Html.ValidationMessageFor(model => model.cCountry)
                        @Html.HiddenFor(model => model.cCountry.CountrySelected, new { @id="selectedCountry"})
                    </div>
                     <div style="width: 100%;padding-top:1%;" id="divStateDropdown">
                            @Html.DropDownListFor(model => model.cState.StateID, (SelectList)ViewBag.StatesList , new { @id = "ddlState", style = "width:146px;" })

                      @Html.HiddenFor(model => model.cState.StateSelected, new { @id="selectedState"})
                    </div>
                    <div style="width: 100%;padding-top:1%;">
                        @Html.EditorFor(model => model.ZipCode)
                        @Html.ValidationMessageFor(model => model.ZipCode)
                    </div>
                    <div style="width: 100%;padding-top:1%;">
                        @Html.TextBoxFor(model => model.Email, new { @class = "boxSizeEmailPwd-Reg col-xs-12" })
                        @Html.ValidationMessageFor(model => model.Email)
                    </div>
                </div>
            </div>
            <br />
            <div class="form-group">
                <div style="width: 100%; padding-left: 16%;">
                    <input type="submit" id="btnUpdate" value="Save" name="command" onclick="updateDetails();"/>

                    <input type="submit" id="btnCancel" value="Cancel" name="command" class="cancel"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10">
                    <input type="submit" value="Create" class="btn btn-default" style="display: none;" />
                </div>
            </div>
        </div>
    }

Controller 代码。 GetStates 方法返回状态列表

[HttpPost]
public JsonResult GetStates(string id)
{
       cDTOSingleValue country = new cDTOSingleValue();
       List<cState> states = new List<cState>();
       List<SelectListItem> statesList = new List<SelectListItem>();
       inputCollection = new cDTOCollection<cDTOBase>();
       outputCollection = new cDTOCollection<cDTOBase>();
       country.Value = id;
       inputCollection.Add(country);
       outputCollection = RegBizobj.ProcessRequest(ActionConstants.ActionGetStateList,inputCollection);
       foreach (cDTOState state in outputCollection)
       {
          states.Add(Mapper.Map<cDTOState,cState>(state));
          statesList.Add(new SelectListItem { Text = state.StateName, Value = state.StateName });
       }
       ViewBag.StatesList = new SelectList(states, "StateID", "StateName");
       return Json(new SelectList(statesList, "Value", "Text"),JsonRequestBehavior.AllowGet);
}

选择美国国家/地区和相应的州时，单击“保存”按钮时不会显示预期行为

 [HttpPost]
 public ActionResult UpdateProfile(UserRegistrationModel updateUserDetailsObject,string command)
 {  
       return RedirectToAction("UserProfile", "Account", new { area = "UserManagement" });
 }

在上述场景中，当选择“美国”以外的国家/地区时，“保存”按钮功能可以正常工作。 如果我选择“国家/地区”为“美国”，然后选择“州”作为任何给定的选项，例如:关岛，则单击“保存”按钮功能将停止，并且“州”ddl 背景变为蓝色

Answer 1

在您的以下函数中:

function updateDetails() {
      $('#btnUpdate').submit();
}

您正在尝试提交一个按钮，而不是表单，这没有任何意义。 #btnUpdate 是按钮的id，而不是form。因此，请将 "#btnUpdate" 替换为 "#Update"(即表单 ID

)

function updateDetails() {
       $('#Update').submit();
}