Question

我有一个Bootstrap 3表单，它在collapse()元素上使用它的<button>函数显示。然后，我会在表单打开后，将相同的按钮变为表单上的提交按钮。但是，我不知道如何在第二次按上更改按钮的功能。

示例代码：

<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/

提前致谢。

Answer 1

在submit()声明中的form元素上致电if：

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");
}

Answer 2

只需添加提交

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

Answer 3

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

$(".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');
}

使用按钮有两个功能 - 显示内容，然后提交

3 个答案: