How to reset only part of a form?

Question

I have made an ESP interface which contains a settings page for an ESP in which the user can change various settings.
I have developed both front and back ends.
I have divided the page into several forms, each corresponding to a functionality of the ESP.
I store the settings in a json file. Every setting has a default value.

Let's take the following form:

• the Output tab is a separate form
• the Reset button is explained further in the question

It has:

• Input 1 IP Address and Port 1
• Input 2 IP Address and Port 2

/* defaults */
    "input": {
        "ip_1": "Not Set",
        "port_1": "Not Set",
        "ip_2": "Not Set",
        "port_2": "Not Set"
    },

Whenever the user presses Save a json similar to the one above is sent to the server. If an input is empty, say ip_1, it will be sent as: "ip_1": "" inside the input object alongside the other keys (port_1, ip_2, port_2). The server ignores received empty values. This is done so that the user can update/change each setting separately.

I want the user to be able to input new values, update/change the previous values and reset the value to nothing/default (let's say the user won't need to use the INPUT functionality) and be able to do any of the previously mentioned actions for each individual input (ip_1, port_1, ip_2, port_2).

But what if the user decides to stop using the Input functionality ? If the user hits Save with empty inputs, the values will not change.
This is why I have thought of a Reset button for each form, but after placing it in the form it looks veeeeeery ugly and most probably it will confuse the user.

Lower in the settings page I have a form called Factory Reset with two buttons:

• Soft Reset : Reset settings but keep Network Configuration:
• Factory Reset : Reset all settings:

But I can't let the user reset everything each time he doesn't want to use some functionality.

How should I handle this ?

Answer 1

What you're facing is more of a technical challenge than a design challenge. Ideally, your data structure should be such that it should be able to handle the differentiation between an empty state and a dirty state.

The solution that comes to my mind is maintaining a data structure akin to the Delta JSON structure that Quill JS uses.

While it doesn't align with your ask 1-to-1, given that the Delta is capable of handling changes to complex rich-text data, you should ideally be able to create a simplified version of the Delta data structure to address your problem.