Step 4: Adding a submit button

Start by adding a Button underneath our input fields. In the buttons properties, rename the button to submit_button, change the text to Submit and change the role to primary-color.

Then scroll down to the bottom of the buttons properties and click the blue chevron button next to the click event handler box. This will open the code view for our form.

That submit_button_click() function was created automatically, and will be called every time the button is clicked. Let’s begin writing code that sends the information a user enters into our application form to our Trello board.

In the submit_button_click(), let’s start by getting the information entered into our input fields. We can do this using the text property of each of the Text/TextArea components and the file property of the resume file uploader.

def submit_button_click(self, **event_args):
  """This method is called when the submit button is clicked"""
  name = self.name_text_box.text
  email = self.email_text_box.text
  phone = self.phone_text_box.text
  cover_letter = self.cover_letter_text_area.text
  resume = self.resume_file_uploader.file

Now we have our information, we can pass it to a server function that will send the data to our Trello board (we will create the server function in chapter 3 - step 2). Our server function will be called create_card() and will take the arguments name, email, phone, cover_letter and resume.

def submit_button_click(self, **event_args):
  """This method is called when the submit button is clicked"""
  name = self.name_text_box.text
  email = self.email_text_box.text
  phone = self.phone_text_box.text
  cover_letter = self.cover_letter_text_area.text
  resume = self.resume_file_uploader.file

  # Server call to create a card using the applicant's information
  anvil.server.call('create_card', name, email, phone, cover_letter, resume)

Next, we will reset our form once the submit button is clicked and give a notification to our users that their application has been sent. Let’s define a new function called reset_form() and have it set all the text fields to empty strings and call the FileLoader’s clear() method on our resume_file_uploader.

def reset_form(self):
    """This method clears our application form"""
    self.name_text_box.text = ''
    self.email_text_box.text = ''
    self.phone_text_box.text = ''
    self.cover_letter_text_area.text = ''
    self.resume_file_uploader.clear()

Add a call to our new reset_form() function in our submit_button_click() function.

Then, to add a notification, we can also call Anvil’s built in Notification() function in our submit_button_click() function. We will pass it the string we want to display and set it to disappear after 5 seconds with the timeout argument.

def submit_button_click(self, **event_args):
    """This method is called when the submit button is clicked"""
    name = self.name_text_box.text
    email = self.email_text_box.text
    phone = self.phone_text_box.text
    cover_letter = self.cover_letter_text_area.text
    resume = self.resume_file_uploader.file
    
    anvil.server.call('create_card', name, email, phone, cover_letter, resume)
    
    # Call to reset our form to a blank application form
    self.reset_form()
    # A pop up notification notifying the user their application has been submitted.
    Notification("Your application has been submitted. Thanks for applying!", timeout=5).show()

We now have a submit button that will trigger the process of sending our user’s application to Trello, reset our form and notify our users that their application has been submitted.