How to take action when the user submits a TextField in SwiftUI

In this tutorial, we will see how to take action when the user submits a TextField in SwiftUI.

We can use the .onSubmit modifier to take action when a user submits a TextField. This modifier allows us to specify an action that will be performed when we press the return key or submit the text field.

Perform action for a single TextField

So, .onSubmit helps us to define what type of action we want when someone finishes typing in a text field and presses enter or submit the text field.

Example

import SwiftUI

struct ContentView: View {
    @State private var text: String = ""

    var body: some View {
        VStack {
            TextField("Enter text", text: $text)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
                .onSubmit {
                    // Perform an action when the user submits the text field
                    print("Text submitted: \(text)")
                    // We can perform any action here, such as saving data, triggering a network request, etc.
                }
                .font(.title)
        }
    }
}

In the above program, I have created a TextField with a rounded border, when the user types something in the TextField and presses the return key or submits the text field, the .onSubmit closure will be called, and it will print the submitted text to the console.

We can replace the print statement with any action we want to perform when the user submits the text field, like saving the text to a database, updating a model, etc.

Output:

If you wish to prevent or disable autocorrect in the TextField, check out the link below.

Disable autocorrect in a TextField in SwiftUI

Perform action for multiple TextField

Imagine a scenario where a form has multiple text fields, and the user completes the entire form by pressing a final “submit” button.

Now, we want to capture all the submitted values at once. Have a look at the example below to do that.

Example

import SwiftUI

struct ContentView: View {
    @State private var userName: String = ""
    @State private var password: String = ""
    @State private var email: String = ""

    var body: some View {
        VStack {
            TextField("Username", text: $userName)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            SecureField("Password", text: $password)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            TextField("Email", text: $email)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            Button("Submit") {
                // Here, the .onSubmit() could capture all submitted values
                self.onSubmit()
            }
            .padding()
        }
        
    }

    func onSubmit() {
        // Perform action when the entire form is submitted
        print("Submitted values >")
        print("Username: \(userName)")
        print("Password: \(password)")
        print("Email: \(email)")
        
        // Here, we could send this data to a server, save it locally, or perform any other action.
    }
}

The above code will create a basic form with two TextField and a SourceField for username, password, and email.

It will print the entered values to the console when the user clicks the “Submit” button.

The onSubmit() function handles the submission action, and we can customize it to perform other tasks like sending data to a server.

Output: