Как я могу отправить форму после нажатия кнопки сохранения?

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>

Это мой jQuery в том же файле settings.handlebars.

<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

Необходимо добавить метод 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>

Answer 2

Попробуйте добавить e.preventDefault(); внутри вашего .click(). В настоящее время ваша форма не может быть отправлена.