使用Javascript和/或剃刀更改HTML表单文本

我正在处理创建帐户信息和重置密码的视图。 我卡在哪里：取决于密码请求是发送，批准还是拒绝，这将反过来改变登录屏幕/密码请求的显示方式。我希望它改变表单中的当前文本并用消息更新它，用户可以提交OK等，以便浏览器自动关闭（或者隐藏当前表单，以便我可以创建一个新的表单信息，以较容易为准）。使用Javascript和/或剃刀更改HTML表单文本

之前我有一个警告发送消息，但现在我需要它作为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;*@ 
}

（无论与工作第一，如果（发送）将被复制并粘贴到最后两一旦我得到这个工作。）

这是上面的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中需要的东西似乎只是复制事物而不是改变已经存在的东西。提前致谢。

来源

2015-04-01 LaLaLottie

我最终弄清楚了这一点。

本质上，我创建了与登录屏幕和相同位置类似的样式的其他div，但保持隐藏状态，直到它们被其功能调用以显示，具体取决于用户输入和URL。登录屏幕原本是可见的，但是当另一个div可见时显示定制的消息后隐藏。

我第一次创建这个通过JavaScript（使用函数来创建HTML），但后来改变它为HTML和CSS，但仍然使用JS来调用函数。我必须切换的主要原因是因为一些消息在确认后提交了某些内容，或者应该关闭标签或返回，并且因为显然脚本无法关闭当前未打开的页面它。在Chrome TBH中仍然存在这个问题。

来源

2015-04-03 19:13:10 LaLaLottie

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

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

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

来源

2015-04-01 21:07:15 beautifulcoder

是的。虽然我已经尝试过了（对不起，我不清楚，但我在倒数第二段中已经说过），但我无法使用它来隐藏该类。我试着给他们添加ID，并能隐藏它们。现在我对添加消息感到困惑。我认为，而不是添加的东西，我会隐藏整个表单，只是为消息添加一个单独的div。感谢你的回答！ – LaLaLottie 2015-04-01 21:22:59

使用Javascript和/或剃刀更改HTML表单文本

回答

相关问题