单击保存按钮后如何提交表单？

Question

这是我的一些代码来自文件名settings.handlebars ，输入框被禁用，直到我单击编辑按钮。 在输入字段中添加一个值后，如果我单击保存按钮，它应该将该值传递给我的 js。 代码如下：

<form method="post" action="/save">
   <input type="text" name="username" id="username" class="form-control" value="{{username}}">

   <button type="submit" class="btn btn-success" value="save" id="save">Save Changes</button>
   <button type="button" class="btn btn-secondary" value="cancel" id="cancel">Cancel</button>
   <button type="button" class="btn btn-info" value="edit" id="edit">Edit Info</button>

</form>

这是我在同一个文件settings.handlebars中的 jQuery。

<Script>
    $('#edit').click(function () {
        $(this).hide();
        $('#save, #cancel').show();
        $("#target :input").prop("disabled", false);
    });

    $('#cancel').click(function () {
        $('#edit').show();
        $('#save, #cancel').hide();
        $("#target :input").prop("disabled", true);
    });

    $('#save').click(function () {

        $(this).hide();
        $('#cancel').hide();
        $('#edit').show();
        $("#target :input").prop("disabled", true);

    });
    $("#target :input").prop("disabled", true);
</Script>

这是我的main.js文件。 当我单击保存按钮时，这应该可以工作，但没有任何反应：

app.post('/save', function (req, res, next) {

    let configObj = {
        username: req.body.username
    }

    fs.writeFile('config.json', JSON.stringify(configObj), (err) => {
        if (err) {
            res.send("<h4>ERROR</h4>")
        }
    });
    res.redirect("/settings")
});

我想我在 jQuery 上遗漏了一些东西，但我不知道它是什么。 谢谢！

Answer 1

尝试添加e.preventDefault(); 在你的.click()里面。 它目前阻止您提交表单。

Answer 2

如果事件可取消，则需要添加prevenDefault()方法取消该事件，这意味着不会发生属于该事件的默认操作。

<script>
    // I have added only for the save function
    $('#save').click(function (e) {
        e.preventDefault();
        $(this).hide();
        $('#cancel').hide();
        $('#edit').show();
        $("#target :input").prop("disabled", true);    
    });
    $("#target :input").prop("disabled", true);
</script>