I made an HTML form for a client programming project I am working on. The form is not supposed to be connected to a server for the project, but it needs to have validation. I have tried using "required" but it doesn't seem to work. Adding in "placeholder" works though. I don't know what I'm doing wrong.
<div id='details' style="right:30px;">
<form name="details" method="post" id='detailsForm' onsubmit="return validateForm()">
First Name:<br> <input type="text" name="firstName" required><br><br>
Email Address:<br> <input type="email" name="emailAddress" placeholder="Enter a valid email address" required><br><br>
<input type="button" value="Submit" onclick="slideOff('details');"/>
<p>Sign up for our daily newsletter all about Istanbul - the greatest city in the world!</p>
</form>
</div>
HTML 5 validation triggers when you submit the form.
You don't have a submit button (only a button button), so that never happens.
Related
I’m using the FormSubmit API.
When a person fills out the form and submits it, whatever they have filled out doesn’t show and I just receive an empty form.
<section id="form-section" class="fade-contact">
<h2 id="form-title" class="fade-contact">Get in touch</h2>
<form action="https://formsubmit.co/8421d4ce6448fbeda493e2c8ce639a8e" method="POST" id="form">
<!-- <input type="hidden" name="_captcha" value="false"> -->
<!-- <input type="hidden" name="_autoresponse" value="Thank you for getting in touch!"> -->
<div class="name-email fade-contact">
<input type="text" name="name" placeholder="YOUR NAME" id="form-name" required>
<input type="email" name="email" placeholder="YOUR EMAIL" id="form-email" required>
</div>
<input type="text" name="textarea" placeholder="YOUR MESSAGE" id="form-message" class="fade-contact" required>
<button type="submit" class="btn submit-btn fade-contact">submit</button>
</form>
</section>
I corrected the name attribute to not use 2 of the same values but still it doesn’t work!
Here is an image of the formsubmitAPI website instructions
screenshot of formsubmitAPI guide
btw I hosted with netlify just incase that helps
I FIXED IT!!!!!!!
Turns out I had some JavaScript to clear the input values after submission and that was somehow affecting the form. I guess the input values were clearing before the form was submitting hence I was getting blank emails.
I just commented it out for now and will look into it later.
But…..I fixed it!! I’m so happy!
Thank you to everyone that helped
Im working on one of my 5 projects in the freecodecamp Responsive Web Design course (the survey project) and I am trying to use the built in required function in html5 in my email input but it isn't working, when I click enter rather than giving the little popup asking for a valid email address with an # in it, nothing happens at all. Im a very new developer so humor me if im asking a dumb question but I can't seem to figure it out on my own.
HTML:
<form id="survey-form">
<label for="name">Full Name</label>
<input type="text" class="form-inputs" id="name" name="firstname" placeholder="Enter Name Here">
<label for="email">Email</label>
<input type="email" class="form-inputs" id="email" placeholder="Enter A Valid Email Adress" required>
</form>
Normally validation doesn't run unless you try to submit the form.
Add a submit button after your input element and try the same code. The end result could be something like this:
<form id="survey-form">
<label for="name">Full Name</label>
<input type="text" class="form-inputs" id="name" name="firstname" placeholder="Enter Name Here">
<label for="email">Email</label>
<input type="email" class="form-inputs" id="email" placeholder="Enter A Valid Email Adress" name="email" required>
<button type="submit">Submit Me</button>
</form>
If you require to send the form to a specific file to do the submission process you could add an action attribute to the form tag but from what you are saying that's outside of what you're currently studying.
EDIT based on Tieson T.'s comment
I added the name="email" to the email input in the code example.
I have a form like this. I want to know that will the form submission work if the is placed in the middle of the text fields?
For example:
<input type="text" name="fname"> // First Name
<input type="text" name="lname"> // Last Name
<form method="post" action=""> // Post
<input type="text" name="username"> // Username
<input type="text" name="password"> // Password
<input type="submit" value="Submit"> // Submit Button
Will the submission work for First Name and Last Name field as the is after them so they do not come inside the form.
Your form elements (like your input boxes) have to be between an opening <form> and a closing </form> tag. So your fname and lname will be ignored. (Your closing </form> is missing, too.)
Why do you have to add your form elements between form tags? This allows you to add multiple forms to one page. To identify which element contains to which form, they have to be between the form tags.
Example "Login & register on the same site":
<form method="POST" action="login.php">
User: <input type="text" name="username">
Password: <input type="password" name="password">
<input type="submit" value="Login">
</form>
<form method="POST" action="register.php">
Mail: <input type="text" name="email">
User: <input type="username" name="username">
Password: <input type="password" name="password">
Repeat password: <input type="password" name="pwdagain">
<input type="submit" value="Register">
</form>
Refer this site for further information: http://www.w3schools.com/html/html_forms.asp
First name and last name will not post. Username and password will post but u have to close form tag first.
If you transform you code like this it will post all :
<input type="text" name="fname" form="my_form_id"> // First Name
<input type="text" name="lname" form="my_form_id"> // Last Name
<form id="my_form_id" method="post" action="#"> // Post
<input type="text" name="username"> // Username
<input type="text" name="password"> // Password
<input type="submit" value="Submit"> // Submit Button
</form>
#shubham-jha If you want multiple submit buttons under a single form, you may use AJAX.
Create a JavaScript function on click, decide to which URL you want to send this data and then change form action using jQuery, then submit using JavaScript.
Jquery to change form action
There is some news on this front, it seems.
MDN has this for you to review
form HTML5
"The form element that the input element is associated with (its form owner). The value of the attribute must be an id of an element in the same document. If this attribute is not specified, this element must be a descendant of an element. This attribute enables you to place elements anywhere within a document, not just as descendants of their form elements."
Perhaps you can still achieve what you wished for. Only question then, is what browser support you must have.
I am no expert in coding. As a matter of a fact this is my first true project in CSS. I created the page in Adobe Edge Reflow and exported CSS to dreamweaver. The problem I am running into is that I can't get my form to actually work. I want the form to send directly to my e-mail, in no specific format. Can anyone help me out?
<form method="post" novalidate>
<label id="formgroup">
<p id="text1">
Name*
</p>
<input id="textinput" type="text" value=" Your Name"></input>
</label>
<label id="formgroup1">
<p id="text2">
Company Name
</p>
<input id="textinput1" type="text" value=" Company Name"></input>
</label>
<label id="formgroup2">
<p id="text3">
Email*
</p>
<input id="textinput2" type="text" value=" email"></input>
</label>
<label id="formgroup3">
<p id="text4">
Message*
</p>
<input id="textinput3" type="text" value=" Your message"></input>
</label>
<input id="submit" type="submit" value="Send Message"></input>
<input type="hidden" name="recipient" value="xxx#gmail.com"> </form>
Your HTML markup seems fine for a simple form aimed to post the contents of a range of fields.
However, the HTML code (along with any CSS) will only enable you to determine the presentation/style of the form (i.e. how it looks).
Regarding the functionality of the application actually triggering an email with the form contents to an email address, this will require more code in a 'server-side' language such as PHP (HTML and CSS being 'client-side' languages).
Here is a good article that provides a tutorial on the subject: http://www.html-form-guide.com/php-form/php-form-tutorial.html
Your HTML markup is actually missing something, the "action" property, i.e.
Before:
<form method="post" novalidate>
After:
<form method="post" novalidate action="send-email.php">
As you might have guessed from looking at the above, this "action" property specifies the PHP script/file that triggers the email. And of course it is this file that you are currently missing.
Hope this helps.
I have two forms on a same page and I have two submit buttons...so how do I check if the user filled out the first form before clicking the submit button on second form? The first form posts the data to php page which presents on a same page as the html and the second form sends the data to another PHP page with thank you message....I mean how do force the user to finish the first form before clicking the submit button on the second form? if the user hits the submit button on the second form, the form directs to thank you page with out checking if the user finished the first form..how do I stop that?
<html>
<body>
<form action="" method="post" enctype="multipart/form-data">
<input type="hidden" name="submited" value="true" />
<label for="file">Choose Photo:</label>
<input type="file" name="file" onchange="file_selected = true;" required>
<input type="submit" value="Submit" name="submit">
</form>
<form action="Send.php" method="post">
First Name:<input type="text" name="fname" required><br>
Last Name:<input type="text" name="lname" required><br>
Choose Username:<input type="text" name="username" required><br>
Age:<input type="text" name="age" required><br>
<input type="submit" value="Submit" name="submit">
</form>
You can change the name field and then access the value on the server side.
For example:
<input type="submit" value="Submit" name="submitOne" />
If you're using php you could use something like this:
if(isset($_POST['submitOne'])){ /* first one pressed */ }
There are also some other options like using jQuery or javascript to validate first.
Try: http://bassistance.de/jquery-plugins/jquery-plugin-validation/