Issues with Custom Buttons in Forms

So I have a List in SharePoint Online, and I need to be able to set a status for the item based on the button that the user selects.
There is a "Submit Draft Button" and a "Submit Final Button"
This is crucial to some workflows I have to build in the background.

However when I've tried to set the status based on the button selected, nothing seems to happen. I even tried adding a new column (single line text) not connected to any preexisting flows and tried to set it there, nothing.

Here are the functions I have in my form at the moment;

fd.spRendered(function() {
    // Hide and set value for UpdateStatus
    fd.field('UpdateStatus').hidden = true;
    fd.field('UpdateStatus').value = "Yes";

    // Disable and set value for AuditStatus
    fd.field('AuditStatus').disabled = true;
    fd.field('AuditStatus').value = "Awaiting Action Plan";

    // Initialize validators if not already done
    if (!fd.validators) {
        fd.validators = [];
    }

    // Add custom validator for SPDataTable
    fd.validators.push({
        name: 'SPDataTable validator',
        error: 'Error message',
        validate: function() {
            if (fd.control("FindingsLibrary").widget.dataItems().length == 0) {
                this.error = "Add at least one record to the table";
                return false;
            }
            return true;
        }
    });

    // Handle SubmitDraftButton click
    $(fd.control('SubmitDraftButton').$el).click(function() {
        fd.field('DraftorFinalStatus').value = 'Audit Draft Submitted';
        fd.save().then(function() {
            console.log('Draft submitted successfully.');
        }).catch(function(error) {
            console.error('Error submitting draft:', error);
        });
    });

    // Handle SubmitFinalReportButton click
    $(fd.control('SubmitFinalReportButton').$el).click(function() {
        fd.field('DraftorFinalStatus').value = 'Awaiting Action Plan';
        fd.save().then(function() {
            console.log('Final report submitted successfully.');
        }).catch(function(error) {
            console.error('Error submitting final report:', error);
        });
    });
});

fd.spBeforeSave(function(spForm) {
    return sp.web.lists.getByTitle("ListNameHere").items.get().then(function(items) {
        // Your custom logic here
        return fd._vue.$nextTick();
    });
});

Can anyone help me with this?

Hi @Melissa,

You don't have to configure this behavior in the JavaScript editor. A much simpler approach would be to put this code into the Click property of each button:

fd.field('DraftorFinalStatus').value = 'Audit Draft Submitted';
return fd.save();

You can edit this property in the designer's UI:

Let me know if this helps.