使用jquery单击事件后应更改输入按钮的值

如何解决使用jquery单击事件后应更改输入按钮的值

我尝试在点击输入按钮后更改其值。按钮本身是一个提交按钮，控制器通过 RedirectToAction 返回页面。我的问题是，我可以更改按钮的值，但此新值仅显示一毫秒，然后才将其设置回其原始值。脚本触发后页面是否重新加载？或者为什么在脚本触发后按钮值被设置回来了？

这是我的代码：按钮：

@using (Html.BeginForm("StartNewM2OLIEProcess","Patient",new { label = Model.PatientID },FormMethod.Post))
        {
            <input type="submit" id="btnStartProcess" value="M²OLIE Prozess starten" class="btn btn-primary" />
        }

脚本

@section Scripts{

    <script type="text/javascript">
       
        $("#btnStartProcess").on('click',function () {
            var self = $(this);
            var errorMsg = '@errorMsg';
            if (errorMsg == '') {
                //self.attr('M2OLIE Prozess starten','Prozess gestartet');
                self.val('Prozess läuft...');
            }
            else {
                self.val("M²OLIE Prozess starten");
            }
        });

    </script>

    <script type="text/javascript">
    var message = '@message';
    if(message){
        alert(message);
    }
    </script>
}

所以脚本被正确触发，我可以用调试器测试。而且我还可以看到调试过程中按钮的值发生了变化，但是脚本一结束，该值就会变回 Html 表单中定义的值。这里发生了什么？

解决方法

当第一次点击时，jQuery 事件被执行，然后页面被发送到动作。您必须发布页面或管理点击事件。

用你的脚本测试这段代码

$("form").submit(function (e) {
    e.preventDefault(); 
});

我给大家举个例子，看看表单发布后的变化。

在控制器中

[HttpGet]
public ActionResult StartNewM2OLIEProcess()
{
    return View();
}
[HttpPost]
public ActionResult StartNewM2OLIEProcess(string myText)
{
    ViewBag.ButtonText = myText;
    return View();
}

在视图中

@{
    ViewBag.Title = "Test";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@using (Html.BeginForm("StartNewM2OLIEProcess","Home",FormMethod.Post))
{
    string buttonValue = "M²OLIE Prozess starten";
    if (!string.IsNullOrEmpty(ViewBag.ButtonText))
    {
        buttonValue = ViewBag.ButtonText;
    }
    <input type="text" id="myText" name="myText" />
    <input type="submit" id="btnStartProcess" value="@buttonValue" class="btn btn-primary" />
}
<div id="myDiv" style="width:300px;height:50px;background:#FF5511;color:white;text-align:center;font-weight:bold;"></div>
@section scripts{
    <script>
       var result = '@(ViewBag.ButtonText)';
       if (result != null) {
           document.getElementById("myDiv").innerText = result;
       }
    </script>    
}