使用 Javascript 和/或 Razor 更改 HTML 表单文本答案

【问题标题】：Changing HTML Form Text Using Javascript and/or Razor使用 Javascript 和/或 Razor 更改 HTML 表单文本
【发布时间】：2015-04-01 20:45:44
【问题描述】：

我正在处理创建帐户信息和重置密码的视图。 我遇到的问题：取决于密码请求是被发送、批准还是被拒绝，这将反过来改变登录屏幕/密码请求的显示方式。我希望它改变当前文本表单并使用消息更新它，用户可以提交 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 中复制我需要的东西似乎只是复制东西，而不是改变已经存在的东西。提前致谢。

【问题讨论】：

标签： javascript html css asp.net razor

【解决方案1】：

如果我关注你，getElementsByClassName 是罪魁祸首。试试：

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

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

【讨论】：

是的。虽然我已经尝试过这个（对不起，我不清楚，但我在倒数第二段中这么说）但我无法用它来隐藏那个类。我尝试向它们添加 ID，并且能够将它们隐藏起来。现在我对添加消息感到困惑。我认为我不会添加任何东西，而是将整个表单隐藏起来，然后为消息添加一个单独的 div。感谢您的回答！

【解决方案2】：

我最终想通了。

本质上，我创建了其他 div，它们的样式与登录屏幕类似并且位于相同的位置，但在它们被函数调用以根据用户输入和 URL 显示之前将它们隐藏起来。登录屏幕最初是可见的，但后来在另一个 div 可见以显示定制消息时隐藏。

我最初是通过Javascript创建的（使用函数创建HTML），后来改成HTML和CSS，但仍然使用JS调用函数。我必须切换的主要原因是因为确认后的某些消息要么提交了某些内容，要么应该关闭选项卡或返回，我在这样做时遇到了麻烦，因为显然脚本无法关闭最初没有打开的当前页面它。在 Chrome TBH 中仍然存在这个问题。

【讨论】：