I have a form on a website where a user needs to enter in their name and email twice to download something. However, the user can type two different emails in the fields, hit submit, and it will still show the success message. Why? Is there a pattern attribute I can use to accomplish this? I want the user to be forced to type in the same email twice or get the error message.
This is my HTML:
<form id="form" method="post" action="formmail.php" name="form" width="100%">
<input type="hidden" name="good_url" value="https://MYURL.com/index.html#submitgood" />
<input type="hidden" name="bad_url" value="https://MYURL.com/index.html#submitbad" />
<input type="hidden" name="env_report" value="REMOTE_HOST,REMOTE_ADDR,HTTP_USER_AGENT,AUTH_TYPE,REMOTE_USER" />
<input type="hidden" name="derive_fields" value="email=EmailAddr,realname=username" />
<input type="hidden" name="recipients" value="myaddress" />
<input type="hidden" name="subject" value="Download" />
<fieldset>
<legend>Please fill out the information below to download.<br><br>Filesize, 59.8 MB.</legend><br>
<table cellspacing="0" cellpadding="0" id="confquest"><tr height="80px"><td>
<label for="Name" id="namelabel"><strong>Full name:</strong></label><br>
<input id="Name" type="text" name="username" title="Enter your full name" placeholder="Your Name" autofocus required /></td></tr>
<tr height="80px"><td><label for="eMail" id="emaillabel"><strong>Email address:</strong></label><br>
<input id="eMail" type="email" name="EmailAddr" title="Enter your email address" placeholder="example#mail.com" required /></td></tr>
<tr height="80px"><td><label for"eMail_repeat" id="emaillabel2"><strong>Repeat Email address:</strong></label><br>
<input id="eMail_repeat" type="email" name="email_addr_repeat" title="Repeat your email address" placeholder="example#mail.com" required oninput="check(this)" /></td></tr>
</table>
<input id="reset2" type="reset" name="reset" value="Clear" />
<input id="submit2" type="submit" name="submit" value="Submit" />
<input type="hidden" name="mail_options"
value="HTMLTemplate=https://www.MYURL.com/fmtemplates/mailtemplate5.html" />
</fieldset></form>
It works after you add this after the input field for the email repeat.
<script>
function check(input) {
if (input.value != document.getElementById('eMail').value) {
input.setCustomValidity('The two email addresses must match.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>
Related
enter image description here
Why this % is showing inside the email, it should Please enter your email
The code look something like this:
<form method="post">
<input type="email" placeholder="Please Enter Your Email" />
<input type="password" placeholder="Password" />
</form>
Use this method
<html>
<body>
<input required type="email" placeholder="Enter Your Email" />
<input required type="password" placeholder="Enter Password" />
<input type="submit" value="submit" />
<body>
</html>
I made a form for sending an e-mail to my address by the user by creating an email filled with the form data. The problem is that after pressing the send button, I only want the values to appear filled in the email, and not the keys. Is there a possible way to do that?
<!DOCTYPE html>
<html>
<body>
<form action="MAILTO:someone#somethig.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
When submitting the form, it opens outlook new email with this filled in:
name=your name
mail=your email
comment=your comment
But I want it to look like this:
your name
your email
your comment
Building on my other answer, you could concat all values into one hidden value, and then use the = as a natural separator:
<!DOCTYPE html>
<html>
<body>
<form action="MAILTO:someone#somethig.com" method="post" enctype="text/plain" onsubmit="concat_form_values()">
Name:<br>
<input id="name" type="text" value="your name"><br>
E-mail:<br>
<input id="email" type="text" value="your email"><br>
Comment:<br>
<input id="comment" type="text" value="your comment" size="50"><br><br>
<input id="aggregate" type="hidden" name=" ">
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
<script>
function concat_form_values(){
document.getElementById("aggregate").value = '============================\n' +
document.getElementById("name").value + '\n' +
document.getElementById("email").value + '\n' +
document.getElementById("comment").value
}
</script>
</html>
which would result in an email opened pre-filled with this content:
=============================
your name
your email
your comment
I don't think you can get rid of the =, but you can name all the inputs " " to kinda remove the key:
<!DOCTYPE html>
<html>
<body>
<form action="MAILTO:someone#somethig.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name=" " value="your name"><br>
E-mail:<br>
<input type="text" name=" " value="your email"><br>
Comment:<br>
<input type="text" name=" " value="your comment" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
This results in the following output in the pre-filled email:
=your name
=your email
=your comment
I have a form. Right now it has one action and simply just submits the inputs to URL. I would like it to be modified where when the form is completed the inputs are saved to a file and then submitted to the URL.
<form class="snp-subscribeform snp_subscribeform" action="join.cgi" method="post">
<input name="page" type="hidden" value="1" />
<div>
<input id="snp-firstname" class="snp-field snp-field-firstname " name="firstname" required="" type="text" value="" placeholder="Enter Your First Name" />
<input id="snp-lastname" class="snp-field snp-field-lastname " name="lastname" required="" type="text" value="" placeholder="Enter Your Last Name" />
<input id="snp_email" class="snp-field snp-field-email" name="email" type="text" placeholder="Enter Your Email " />
<input id="snp-password" class="snp-field snp-field-password " name="password" required="" type="text" value="" placeholder="Select A Password" />
</div>
<div>
<input class="snp-subscribe-button snp-submit" type="submit" value="CONTINUE" data-loading="Creating Account!" data-success="Account Created!" />
</div>
</form>
</div>
You would need to use javascript and the onclick event for the submit button to retrieve the values from the DOM elements you are interested in and save them to the file.
Here is a sample of how to get started:
<input type="submit" name="submit" value="Save" onclick="writedata()" />
<script>
function writeData() {
}
</script>
I have a superfish menu containing two forms, a search box in superfish tab 1 and a newsletter signup in tab 3. The search form works fine, and the newsletter signup works fine so long as the search form isn't present on the page. But when both are present, the submit button on the newsletter signup form appears to try and submit a search instead, which not only doesn't sign the user up for the newsletter, but it doesn't search for anything either.
My code goes like this:
<form class="search-form" action="/search/node" method="post" id="search-form" accept-charset="UTF-8"><div><div class="container-inline form-wrapper" id="edit-basic"><div class="form-item form-type-textfield form-item-keys">
<input type="text" id="edit-keys" name="keys" value="" size="20" placeholder=" Search this site" maxlength="255" class="form-text" />
</div>
<input type="submit" id="edit-submit" name="op" value="Go" class="form-submit" /></div><input type="hidden" name="form_build_id" value="form--JTbYKjZwG8SjIstLVU7J0HOiZZiSoB88bE4VoRYTG4" />
<input type="hidden" name="form_token" value="HoVlLGidOtcgITb3XmNhvH7mKKzW8ldmnahr3t0HGAU" />
<input type="hidden" name="form_id" value="search_form" />
<many other divs>
<form class="webform-client-form" enctype="multipart/form-data" action="/content/newsletter-signup" method="post" id="webform-client-form-22" accept-charset="UTF-8"><div>
<div class="form-item webform-component webform-component-email webform-container-inline" id="webform-component-email">
<input class="email form-text form-email required" type="email" id="edit-submitted-email" placeholder="Email address" name="submitted[email]" size="24" />
</div>
<div class="form-item webform-component webform-component-textfield webform-container-inline" id="webform-component-name">
<input type="text" id="edit-submitted-name" name="submitted[name]" value="" placeholder="Name" size="14" maxlength="128" class="form-text required" /> <input type="submit" id="edit-submit" name="op" value="Submit" class="form-submit" />
</div>
<input type="hidden" name="details[sid]" value="" />
<input type="hidden" name="details[page_num]" value="1" />
<input type="hidden" name="details[page_count]" value="1" />
<input type="hidden" name="details[finished]" value="0" />
<input type="hidden" name="form_build_id" value="form-I8MgMoURjB6BhqJATKhhNZ5nAUwk855bGWgxH75Gs5Q" />
<input type="hidden" name="form_token" value="IKALClB6fmkRPFA6Ko8VIbBN2uDEwpVBxFM6w2_2JAo" />
<input type="hidden" name="form_id" value="webform_client_form_22" />
</div></form>
How can I get the submit button on the second (newsletter signup) form to submit that form and not the search?
Is it possible to change default value of the attribute required that we add to an element in HTML?
For example:
<form action="" method="post">
<input type="email" name="signup-email" id="signup-email" placeholder="enter your email address" required />
<input type="submit" value="Notify Me" />
</form>
I do believe that the HTML code block you have given ought be as below:
<form action="" method="post">
<input type="email" name="signup-email" id="signup-email" placeholder="enter your email address" required="required" />
<input type="submit" value="Notify Me" />
</form>
And if you wanted to remove it completely:
<form action="" method="post">
<input type="email" name="signup-email" id="signup-email" placeholder="enter your email address" />
<input type="submit" value="Notify Me" />
</form>
Obviously as you have no URL address in the ACTION attribute of the form, the form will POST back to itself (ie. meaning the page it is hosted on, so if it was on your contact.aspx form it will post back to contact.aspx)