javascript - 使用 Javascript 和/或 Razor 更改 HTML 表单文本

Question

我在处理创建帐户信息和重置密码的 View 中工作。 我被卡住的地方:根据密码请求是发送、批准还是拒绝，这将依次更改登录屏幕/密码请求的显示方式。我希望它更改当前文本表单并用消息更新它，用户可以提交 OK 等。这样浏览器将自动关闭(或者隐藏当前表单，以便我可以使用该信息创建一个新表单，以更容易的为准)。

之前我有一个发送消息的警报，但现在我需要它作为 HTML 来设置它的样式。

//All of this is in a Javascript script tag

var reset = getParameterByName('reset');

if (reset == "sent") {
//alert("Done! Please check your email to confirm.")

//How can I change the current text on the form?
document.getElementsByClassName('panel-login').innerHTML = "<div class='panel-login' style='color: white; background-color: blue;'><p>Done! Please check your email to confirm.</p></div>";

    //Here so I know something is updating on the site...
    var message = "<div style='color: white; background-color: blue;'><p>Done! Please check your email to confirm.</p></div>";
    document.write(message);  
}

if (reset == "fail") {
    alert("Password reset request failed.")
}

if (reset == "approved") {
    alert("Confirmed! A password reset email has been issued.")
    @*var url = '@Url.Action("Login", "Account")';
    window.location = url;*@
} 

(一旦我开始工作，与第一个 if (sent) 一起工作的任何内容都将被复制并粘贴到最后两个。)

这是上面的 HTML:

<div class="panel_login" style="opacity: 0.9;">
<div class="">
    @using (Html.BeginForm("ResetPassword2", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-signin mg-btm" }))
    {
        <div class="" style="padding-left: 20px; padding-right: 20px; padding-bottom: 20px; padding-top: 10px; ">
            <div class="">
                @Html.AntiForgeryToken()
                @Html.ValidationSummary(true, "Password reset was unsuccessful. Please check email and try again.")
                <label>Email</label>
                <div class="input-group">
                    <span id="emailinput" ng-model="user.EMAIL" class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                    @Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "" })
                    @Html.ValidationMessageFor(m => m.Email)
                </div>

            </div>

        </div><div class="panel-footer">
            <div class="row centered">
                <div class="col-xs-12">
                    <button id="singlebutton" name="singlebutton" class="btn btn-primary" onclick="Back(); return false;">Cancel</button>
                    <button class="btn btn-large btn-danger" type="submit" ng-click="resetpassword(user)">Request Password Reset</button>
                </div>
            </div>
        </div>
    }
</div>

我已经尝试隐藏 panel-login，这样我就可以创建一个新的 div/元素来显示消息/表单。它没有用(做错了什么):

document.getElementsbyClassName('panel-login').style.display = 'none';

了解到，因为它是一个数组，所以我需要其他东西，因为上面会产生 null 和错误。尝试使用变量获取类，然后使用 for 语句将其定位为样式。再次，无济于事。

我不熟悉 Razor(仍在学习)并且在 JavaScript 中复制我需要的东西似乎只是复制东西而不是改变已经存在的东西。提前致谢。

Answer 1

如果我跟着你，getElementsByClassName 就是罪魁祸首。尝试:

var loginPanel = document.getElementsbyClassName('panel-login')[0];

这将找到数组中的第一个匹配项。