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

Question

This is some of my code from the file name settings.handlebars , the input box are disabled until Ii click the edit button. After adding a value in the input field it supposed to pass the value to my js if I click the save button. The code is below:

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

This is my jQuery in the same file 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>

And this is my main.js file. When I click the save button this is supposed to work but nothing happens:

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

I think I missed something on my jQuery but I don't know what it is. Thank you!

Answer 1

Try adding e.preventDefault(); inside your .click() . It is currently preventing your form from submitting.

Answer 2

You need to add prevenDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.

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