How to connect my forms together

Anvil Q&A
1

I have a login form and a signup form. Let me first tell you that I am doing everything through HTML and not through templates or python. So I have a ‘signup’ button in my login form which should redirect me to the signup form.

<input type="button" value="Sign Up" onclick="window.location.href='/signup;">

I have tried using the onclick method as shown above and pasted the link of the signup form there, but all it does is redirect me to the edit window of the signup form and not the executed version.

So how do I link my forms together if I am doing everything through custom HTML?

Here is a link to the clone of my app:
https://anvil.works/build#clone:T3LAAMUJAS35IUE3=SZBPMIOELRTHBKM6XLR26LUU

2

Welcome to the forum!

Every Anvil app is a single page web app. That means that each form that gets opened gets opened inside an existing web page structure. Picture the Anvil app as a web page with a structure like this:

<html>
<head>
...header bits go here
</head>
<body>
...form goes here
</body>
</html>

So the custom HTML in your custom HTML forms goes into the body section of the overall page. Custom HTML forms should only have the necessary HTML for the component in them (think in terms of a single <div> block in the page).

Okay, back to the original question. You can use Anvil’s Javascript bridge to hook between Javascript and Python (if you don’t want to use Python at all, you should probably find a solution other than Anvil, since that’s its strength).

In the __init__ for the form you can hook into the button’s click event using standard Javascript, but writing it in Python. Something like (untested, and assuming your button has an id of signupbutton):

from anvil.js.window import document

class Form1(Form1Template):
  def __init__(self, display, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)

    signup = document.getElementById('signupbutton')
    signup.onclick = self.signup_click

  def signup_click(self, *_):
    # do whatever you'd want for the signup, e.g. opening another form
    pass

You can select by other than id, too, for example going from the dom node for the current form and drilling into its children.

You may want to look at the docs on navigation, which talks about one way to connect forms together from Python. Anvil Docs | Navigation

3 Likes
3

It sounds like you are trying to use Anvil like you would use Flask or Django.

Anvil makes it much easier to create a single page web app, but you can’t go to /signup, because that would be another page, and Anvil apps only have one page.

You should first get familiar with how Anvil forms work, then have a look at Anvil Extras routing module, which helps navigating through forms (almost) as of they were web pages.

3 Likes
4

Thank-you so much! This was not exactly working however it gave me the insight I badly needed to solve my problem!

1 Like