使用一个按钮可以实现两个功能——显示内容和提交

Use a button for two functions -- show content, and submit

本文关键字：提交 功能 显示 两个 一个 按钮 实现      更新时间：2023-09-26

我有一个Bootstrap 3表单，它在<button>元素上使用它的collapse()函数显示。然后，一旦表单打开，我会让这个按钮变成表单上的提交按钮。然而，我不知道如何在第二次按下时更改按钮的功能。

示例代码：

<form class="collapse" id="1234">
    <div class="form-group">
        <input class="form-control" type="text" placeholder="Name">
    </div>
    <div class="form-group">
        <input class="form-control" type="email" placeholder="Email">
    </div>
</form>
<button class="btn btn-default btn-block" data-toggle="collapse" data-target="#1234">Open Form</button>

jQuery函数已为代码做好准备：

$(".btn-block").click(function () {
    if ($.trim($(this).text()) == "Open Form") {
        $(this).text("Submit Form");
    } else {
        $(this).text("Open Form");
    }
});

以下是一个具有切换功能的JSFiddle：http://jsfiddle.net/tzosozwv/

提前谢谢。

在if语句中的form元素上调用submit()：

if ($.trim($(this).text()) == "Open Form") {
    $(this).text("Submit Form");
} else {
    // Presumably this is where you want your form submitted...
    $('form#1234').submit();
    $(this).text("Open Form");
}

只需添加一个提交

$(".btn-block").click(function () {
    if ($.trim($(this).text()) == "Open Form") {
        $(this).text("Submit Form");
    } else {
        $('#1234').submit();
        $(this).text("Open Form");
    }
});

嗨，这是所需的代码。享受

$(".btn-block").click(function () {
    if ($.trim($(this).text()) == "Open Form") {
    $(this).text("Submit Form");
    $(this).on("click",callfunction);
} else {
    $(this).text("Open Form");
    $(this).off("click",callfunction);
}
});
function callfunction(){
    alert('ak');
}
相关文章：