I've got a simple form which I'm wanting people to join to be put onto a waiting list for my product - but it's not submitting.
My application is being hosted on localhost:3000 and runs absolutely fine. The page renders and you can fill the inputs in.
But when you click 'submit' it does nothing. I've tried doing a few different 'types' of the button, but no luck.
Here's my code:
<section class="waiting-list-section">
<div class="waiting-container">
<div class="waiting-heading">
<h2>Join our waiting list</h2>
</div>
<div class="waiting-inputs">
<label for="fName">Enter your first name</label>
<input type="text" name="fName" value="">
<label for="lName">Enter your surname</label>
<input type="text" name="lName" value="">
<label for="email">Enter your email</label>
<input type="email" name="email" value="">
<button class="waiting-submit-button glow" type="submit" name="submit">Join</button>
</div>
</div>
</section>
Any tips? :-)
You need a form element wrapped around the input elements and the button.
<form>
<label for="fName">Enter your first name</label>
<input type="text" name="fName" value="">
<label for="lName">Enter your surname</label>
<input type="text" name="lName" value="">
<label for="email">Enter your email</label>
<input type="email" name="email" value="">
<button class="waiting-submit-button glow" type="submit" name="submit">Join</button>
</form>
Second approach would be to add an eventListener on the button and when it is clicked, get the values from the inputs and then do whatever you want to do with that data
Related
$(".btn2").click(function() {
alert("Form submitted successfully!")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form">
<h2>Sign up</h1>
<br>
<input type="text" name="username" id="username" placeholder="Enter name" required>
<br>
<br>
<input type="password" name="password" id="password" placeholder="Enter password" required>
<br>
<br>
<input type="email" name="email" id="email" placeholder="Enter email" required>
<br>
<br>
<label for="gender">Gender:</label>
<input type="radio" name="gender" id="male" value="Male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female" value="Female">
<label for="female">Female</label>
<br>
<br>
<label for="dob">Date of birth:</label> <br>
<input type="date" name="dob" id="dob" required>
<br>
<br>
<button class="btn2" type="submit">Submit</button>
</form>
Well, yes. You have an event handler attached to a button.
When the button is clicked the event handler will fires, and alert will be displayed. Due to the way alert works, this will block everything until the user clicks the button on the alert dialog. Then the JS will have finished and the button's default behaviour will occur, which triggers the form submission.
Part of submission is to run the native validation process.
If you want to display the alert only after that finishes, then you will need to:
prevent the default behaviour of the button
run the validation functions manually
display the alert
trigger form submission manually
I'm attempting to remove the "thanks" page on my FormSubmit code. I have a function that displays a "success" message below my form, but it's not working because of the thanks page and the redirection.
Any advice for this?
<form action="https://formsubmit.co/myemail#gmail.com" method="POST">
<div class="form-group">
<label for="Nombre"> Nombre</label>
<input type="text" id="firstName" name="Nombre" required>
<input type="hidden" name="_subject" value="Nueva consulta web">
</div>
<div class="form-group">
<label for="Apellido">Apellido</label>
<input type="text" id="lastName" name="Apellido" required>
</div>
<div class="form-group">
<label for="Email">Email</label>
<input type="email" id="email" name="Email" required>
</div>
<div class="form-group">
<label for="Mensaje">Mensaje</label>
<textarea name="Mensaje" id="message" cols="30" rows="3" placeholder="Escribinos tu mensaje" required></textarea>
</div>
<input type="hidden" name="_captcha" value="false">
<button type="submit">Enviar</button>
<input type="hidden" name="_template" value="table">
<input type="hidden" name="_next" value=" ">
</form>
You can provide an alternative URL for "Thank You" page.
<input type="hidden" name="_next" value="https://yourdomain.co/contact">
This will work as redirect route, and teleport you on that contact page without showing thank you message screen.
Then you can just add an onClick event listener that will show you "success" message.
I'm also checking out FormSubmit, and they have a section in their documentation page that explains how to get rid of it:
"By default, after submitting a form the user is shown the FormSubmit "Thank You" page. You can provide an alternative URL for "Thank You" page."
<input type="hidden" name="_next" value="https://yourdomain.co/thanks.html">
So, in your form HTML tags, add that line of code and swap out "https://yourdomain.co/thanks.html" with your own URL
I am creating a form using html and css.
But when I keep multiple buttons inside the form tag, they act as a submit button even though one out of it was used for going back. If I keep the another button outside the form tag then the button is placed at the new line but I want both the buttons in the same line.
<form action="login.php" method="POST">
<label class="label">
email:
<input type="email" name="email"
placeholder="example#gmail.com"
maxlength="40" required>
</label>
<label class="label">
password:
<input type="password" name="password"
required>
</label>
<input class="submit" type="submit">
</form>
<button>Back</button>
Help me in this.
by default buttons in a form is type submit, so all you need to do is change the type of the button to button (<button type="button">Back</button>).
like this:
<form action="login.php" method="POST">
<label class="label">
email:
<input type="email" name="email"
placeholder="example#gmail.com"
maxlength="40" required>
</label>
<label class="label">
password:
<input type="password" name="password"
required>
</label>
<input class="submit" type="submit">
<button type="button">Back</button>
</form>
I'm trying to make a "contact" button that doesn't allow you to submit until the required fields are filled, then redirects you to another html site. It currently doesn't allow you to submit correctly, but when the fields are filled it just resets the page instead of redirecting it. I think it's ignoring the "form action" part.
Also the reset button just doesn't work at all.
Does anyone see anything that might be the reason?
Thanks!
<form method="get">
<label>First Name: <input type="text" name="fmail" id="fmail" required="required" placeholder="your
first name"></label><br><br>
<label>Last Name: <input type="text" name="lmail" id="lmail" required="required" placeholder="your
last name"></label><br><br>
<label>E-mail: <input type="text" name="email" id="email" required="required" placeholder="your
email"></label><br><br>
<label for="comments">Comments:</label><br>
<textarea name="comments" id="comments" rows="4" cols="40" required="required"></textarea>
<br><br>
<form action="contact2.html" method="post">
<input type="submit" value="Contact" />
</form>
<form action="contactus.html">
<input type="reset">
</form>
</form>
Here's an image of what it looks like when you click contact without filling in the fields
https://i.gyazo.com/dc3a77b5eed0dbad2d6f6e2da1cf3075.png
Below is working code
<form method="post" action="/abc.html">
<label>First Name: <input type="text" name="fmail" id="fmail" required="required" placeholder="your
first name"></label><br><br>
<label>Last Name: <input type="text" name="lmail" id="lmail" required="required" placeholder="your
last name"></label><br><br>
<label>E-mail: <input type="text" name="email" id="email" required="required" placeholder="your
email"></label><br><br>
<label for="comments">Comments:</label><br>
<textarea name="comments" id="comments" rows="4" cols="40" required="required"></textarea>
<br><br>
<input type="submit" value="Contact"/>
<input type="reset">
</form>
Explanation:
All form-elements buttons, textarea, input should be wrapped in one form element.
you need to add form method as post and in action pass the URL of the page where you want to redirect after successful form submission.
I'm still trying to think up how to re-word this title.
Anyways so I have this contact form on my page here: http://leongaban.com/
When you click in name and fill it out you can then tab to the next field email. After entering in email, it is natural for the user to tab again into the message box.
However for some reason my tab selection jumps all the way up to the top of the page and seems to select my portfolio main nav link. A few more tabs and I'm back down into the message textarea.
This of course is not ideal at all, is there a way I can force the tab selections to go in the correct order? ie: Name > Email > Message > Captcha > Submit
My current form (HTML)
<div class="the-form">
<form id="myForm" action="#" method="post">
<div>
<label for="name">Your Name</label>
<input type="text" name="name" id="name" value="" tabindex="1">
</div>
<div>
<label for="email">Your Email</label>
<input type="text" name="email" id="email" value="" tabindex="1">
</div>
<div>
<label for="textarea">Message:</label>
</div>
<div>
<textarea cols="40" rows="8" name="message" id="message"></textarea>
</div>
<p><em>Hi, what is 2 + 3?</em></p>
<input type="text" name="captcha" id="captcha" />
<div>
<input class="submit-button" type="submit" value="Submit">
</div>
</form>
</div>
</footer>
You have to number your tabindex in the order you'd like them to go.
<input type="text" name="name" id="name" value="" tabindex="1">
<input type="text" name="email" id="email" value="" tabindex="2">
<textarea cols="40" rows="8" name="message" id="message" tabindex="3"></textarea>
<input type="text" name="captcha" id="captcha" tabindex="4"/>
<input class="submit-button" type="submit" value="Submit" tabindex="5">
etc.
Right now you have two tabindexes set to 1, so they will go first, as they are the only ones with a defined tabindex.
Try utilizing the tabindex property for your input fields. This will let you control the order in which the user can tab through your page elements.
Example code for this can be found here, though you are already setting a tabindex on the name and email inputs. Just add that property to the rest of your inputs and set them in the order you would like.