使用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表單文本

回答

相關問題