Razor页面中Razor组件内的HTML按钮

Question

我的CreateForm页面上有一个名为CreateForm的页面，在客户输入数据后，他们可以在我将数据保存到数据库之前预览他们的条目。他们的Preview是一个Razor组件，包含一个提交的html按钮。

我的问题是，如果客户对点击感到高兴，他可能会多次点击按钮，创建多个副本。因此，我想在第一次单击后禁用该按钮。我怎样才能抓住按钮的把手？

在CreateForm razor页面中，我有一个嵌入式Razor组件

    <CustomerPreviewRequest HeadingToShow="@HeadingToShowPreviewCustomerScreen"
                            onBack="MoveToPreviousPage"
                            CurrentCustomerSubmission="@_model">

    </CustomerPreviewRequest>

在CustomerPreviewRequest中，我是如何定义按钮的

            <button aria-label="Submit Request." type="submit" class="login100-form-btn" style="background-color:#1a2b57"
                    tabindex="0" id="submitForm">
                Submit Request
            </button>

Answer 1

您是否希望客户只提交一次数据，然后禁用提交按钮？你可以看一下这个简单的演示：

查看：

<p style="text-align:center"> 
    <form id="yourFormId" name="yourFormId" method="post" action="#">

        <input type="text" /><br />
        <input type="submit" class="submitBtn" value="Submit Requestt" />
    </form>
</p>




<!--script to disable the submit button -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">  
</script>
<script type="text/javascript">

$(document).ready(function () {
    $(".submitBtn").click(function () {
        $(".submitBtn").attr("disabled", true);
        return true;
    });
});

</script>

结果：

​

​