r/HTML • u/Minstiltude • 9d ago

Question I'm fiddling with some html form stuff and need some suggestions

I'm not sure if I should post here or not, but I'm working on a form and want to have it send to a nonexistent path for data input purposes instead of to change pages.

              <body>
                    <div>
                    <section>
                        <h2>Sign Up</h2>
                        <form action="/signUp" method="POST">
                            <label for="user">Email: </label>
                            <input type="text" name="email">
                            <label for="user">Username: </label>
                            <input type="text" name="username">
                            <label for="user">Password: </label>
                            <input type="text" name="password">
                            <button type="submit">Submit</button>
                        </form>
                    </section>
                    <section>
                        <h2>Sign In</h2>
                        <form action="/signIn" method="POST">
                            <label for="user">Username: </label>
                            <input type="text" name="username">
                            <label for="user">Password: </label>
                            <input type="text" name="password">
                            <button type="submit">Submit</button>
                        </form>
                    </section>
                </div>
            </body>

Any suggestions are welcome, as I'm trying to then grab each one to handle separately within my backend code.

0 Upvotes

43% Upvoted

7 comments sorted by

1

u/scritchz 8d ago

I'm not sure what you're asking. Could you phrase your question more clearly for me?

I don't see anything wrong with your forms, as long as you'll handle the requests to those paths eventually.

Remember that you can redirect both requests to the same page after handling them, with a 303 status and the Location header.

1

u/Minstiltude 8d ago

Sorry, I was wondering if I could have two post requests that use separate paths without needing to make separate html pages for them, like a mini api call. Sorry If its a little unclear, I don't know all the terminology. ¯_(ツ)_/¯

1

u/jcunews3 8d ago

This is ideally done using JavaScript.

Without using JavaScript, to avoid navigating out of the current page when submitting a form, use a hidden IFRAME.

Assign a target attribute for the form. e.g.

<form action="non-existent-path" target="hiddenFrame">

Then add the hidden IFRAME element anywhere in the page. e.g.

<iframe id="hiddenFrame" style="display:none"></iframe>

Downside of not using JavaScript is that, you can't do something based on the response/result on the form submission, or when response/result have arrived.

1

u/Minstiltude 8d ago

Thank you for the reply, I'll try it out (￣▽￣)"

1

u/Reddityard 3d ago

Your page has two forms, one for Sign-In and another for Sign-Up, each with its own Submit button, and a target action. Users can fill out both Forms, but they can only click on One Button to submit. The clicked button would only process or send the data in its own form, data in the other is completely ignored. Is my understanding correct?

1

u/Minstiltude 3d ago

yup, if you have any suggestions it'd be welcome. I'm currently working on it slowly so I may find something that works for me however.

1

u/Reddityard 3d ago

Make the LogIn form your main and primary form, and give it an unique id, with two buttons, one button to submit the form, another button to hide the Log-In and display the Sign-Up form.

Make the Sign-up form hidden and assign it a unique id.

Each button has their own unique id, When the page is loaded, users will only see one form and two buttons. You will need to use JavaScript to show and hide.