Why is Symphony CMS not saving the empty input value as such when submitting form via jQuery?

Question

I have the following HTML form, which allows a user to optionally save a custom label for their product.

<form action="http://domain.com/members/systems" method="post" class="mod-SystemLabel-EditForm">
    <label class="mod-SystemLabel-EditLabel" for="label-623">Customer label</label>
    <input type="text" value="sdff sdf sd" name="fields[customer-label]" class="mod-SystemLabel-EditInput" id="label-623">

    <a href="#" class="mod-SystemLabel-OtherButton-clear">Clear</a>
    <a href="#" class="mod-SystemLabel-OtherButton-cancel">Cancel</a>

    <input type="submit" value="Save" name="action[system-edit-label]">

    <input type="hidden" value="623" name="id">
</form>

If I manually clear my text input and submit my form, Symphony CMS records the empty value as expected.

If I use jQuery to trigger the form submission as below, Symphony CMS leaves (or re-saves?) the current value as it was.

$('.mod-SystemLabel-OtherButton-clear').click(function(e) {
    e.preventDefault();
    $(this).siblings('.mod-SystemLabel-EditInput').val('');
    //alert($(this).closest('form').serialize());
    $(this).closest('form').submit();
});

If I uncomment the commented line, the alert contains:

fields%5Bcustomer-label%5D=&id=623

This serialization is the same as what is produced when I backspace the input myself, so it looks like the actual form submission should be the same as a manual input clearing and click of the submit button.

The Symphony field is not set to be required and does not have any validation rules.

Why is the end result different and how can I get the empty value to be saved, overwriting the previous product label?

Answer 1

The form’s submit input’s name is not passed when the form is submitted via JavaScript, and Symphony CMS uses this to trigger the appropriate event.

To get the event name passed along with the submit input, trigger a “click”.

$('.mod-SystemLabel-OtherButton-clear').click(function(e) {
    e.preventDefault();
    $(this).siblings('.mod-SystemLabel-EditInput').val('');
    $(this).siblings('input[type=submit]').trigger('click');
});