Upon submit I am trying to have "quiz" hide and have "thanks" be shown. All was working correct until I added a JavaScript form validation code, and now it just reloads the first div "welcome" I thought adding "#thanks" to the action upon submit would solve the issue, but it did not. Then trying to add an "if true" statement to my form validation ended up breaking the form validation. I am using jquery.validate to validate my form as suggested. With the current code it skips the validation and just shows "thanks" If anyone has any suggestions it would be greatly appreciated.
<div id="quiz">
<form class="cmxform" id="commentForm" method="get" action="" onSubmit="showHide(); return false;">
<label for="cname">Name</label>
<input id="cname" name="name" size="20" class="required" minlength="2" />
</p>
<p>
<label for="ccompany">Company Title</label>
<input id="ccompany" name="company" size="20" class="required company" minlength="2" />
</p>
<p>
<label for="cnumber">Phone Number</label>
<input id="cnumber" name="number" size="20" class="required number" />
</p>
<p>
<label for="cemail">Email</label>
<input id="cemail" name="email" size="20" class="required email" />
<p></p>
<input class="submit" type="submit" value="Submit" align="center"/>
</form>
</div>
<div id="thanks"><h2>Thank you.</h2>
You will receive an email momentarily
</div>
<script>
$("#begin").click(function(){
$("#quiz").show();
$("#welcome").hide();
});
function showHide(){
$("#thanks").show();
$("#quiz").hide();
};
</script>
All I can say is that you are doing it wrong.... While the form validation that you are doing can work there are a lot of good form validation jquery plugins that would both simplify your life and add a much richer user experience. jquery.validate is probably the most widely used library and would be well worth using.
Related
<form action="https://formsubmit.co/myemail" method="POST" >
<div class="row gtr-uniform">
<div class="col-6 col-12-xsmall">
<input type="text" name="name" id="name" value="" placeholder="Name" />
</div>
<div class="col-6 col-12-xsmall">
<input type="email" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="col-12">
<input type="text" name="name" id="subject" value="" placeholder="Subject" />
</div>
<div class="g-recaptcha" data-sitekey="6LdseqkZAAAAAL5m2SpQL1I5Wo5aoC9qcWrfFq7c"></div>
<!-- Break -->
<div class="col-12">
<textarea name="message" id="message" placeholder="Enter your message" rows="6"></textarea>
</div>
<!-- Break -->
<div class="col-12">
<ul class="actions">
<li><input type="submit" value="Send Message" class="primary" /></li>
<li><input type="reset" value="Reset" /></li>
</ul>
<input type="hidden" name="_next" value="google.com">
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_autoresponse" value="Your message has been recieved.Thank You...">
</div>
</div>
</form>
I have the method="POST" attribute in the form. I have used formsubmit.co to get help with the backend stuff, but it keeps giving me an error that "Form should POST". How do I solve this?
When using your snippet above, I get the following message: "Make sure you open this page through a web server, FormSubmit will not work in pages browsed as HTML files." Have you read the FAQ on this exact error message?
According to the linked FAQ:
You may encounter an error: Make sure you open this page through a web
server, FormSubmit will not work in pages browsed as HTML files.
So there are 2 ways you can fix this issue.
You can use a simple web server like Apache HTTP Server. You can add a
hidden input field with the form URL,
<input type="hidden" name="_url" value="https://yourdomain.co/contact.html">
This is a bit late but I'm sure it will help you out.
I'm referring to this answer https://stackoverflow.com/a/64719964/9535043
Your code seems okay the only issue is with the "_next" feature. As FormSubmit documentation clearly mentioned you have to provide an alternative URL not just a path or domain name, it should be a URL.
<input type="hidden" name="_next" value="https://yourdomain.co/thanks.html">
I'm sure this will help you out.
Further information
FormSubmmit Documentation: https://formsubmit.co/documentation
I've got a problem regarding my contact form page. I did callback after clicking the submit button. I tried not to fill name textbox but form still submits.
My code:
function sendFeedback() {
alert("Thank you for the feedback :)");
}
<form>
<p class="font3">Name:</p>
<input name="name" type="text" maxlength="50" size="30" required/>
<br />
<p class="font3">Email:</p>
<input name="email" type="email" placeholder="" required/>
<br />
<p class="font3">Subject:</p>
<input name="subject" type="text" required/>
<br />
<p class="font3">Message:</p>
<textarea name="comment" row="80" cols="30" required></textarea>
<br>
<br>
<input type="submit" value="Submit" onclick="sendFeedback()">
<input type="reset" value="Reset">
</form>
You should change <form> to <form onsubmit="test()",where test() would go something like this:
test(e){
e.preventDefault();
/* do some validations here */
document.querySelector("form").submit();
}
Hope it helps
The form submitting and your alert triggering are two completely different things. The required attributes you have on the inputs are working correctly. If you leave any of the required inputs blank, the form will not submit to the server, instead you'll trigger standard error messaging in whatever browser you're using (usually a red outline and a popover).
The bit of JavaScript you have (i.e. your alert) will trigger regardless of whether the form submits successfully or not since it's executed BEFORE the submit goes through. You need to either do something like e.preventDefault() or return false at the end of your function, but that will prevent the form from being submitted altogether.
As #dvenkatsagar said, your best option is to change your onclick to onsubmit.
I have some comment forms that I want to not be used unless the user is logged in with Google+. I initially have the "submit" button on my forms hidden by the CSS display:none property. I call javascript when the user logs in to change it back to display:inline.
Is this a valid way to prevent anonymous users from posting, or am I still vulnerable by leaving the rest of the comment form open for writing and whatnot...is there some clever way to submit the form without the submit button?
<form action="" method="post" name="form1" id="make">
<fieldset>
<legend id="makelegend">Log in to Post a Reference</legend>
<input type="hidden" name="loginname" id="loginname" />
<input type="hidden" name="logintype" id="logintype" />
<input type="hidden" name="loginspecial" id="loginspecial" />
<input type="hidden" name="reply" id="reply" value="0" />
<input type="hidden" name="identity" id="identity" value="<?php echo htmlspecialchars($_GET['pageno']); ?>" />
<p><label for="posneg">Positive or Negative?
<select name="posneg">
<option value="p">Positive</option>
<option value="n">Negative</option>
</select></label></p>
<textarea name="comment" rows="5" cols="70"></textarea>
<input type="submit" id="submitter" value="POST" style="display:none;" />
</fieldset>
</form>
It is ABSOLUTELY NOT safe! You're just not displaying the data to the user, but anyone who looks at the code can still find it - or just send the request manually. I can't stress this enough: ALWAYS use server-side validation! It's fine to validate things in the browser as well, but it's not a substitute for proper security measures.
I have a search and a subscribe field. I want them both to look and feel the same, so I copied the working code from the search field to the subscribe field. The fields should expand when you click on them, and the value disappears so the user can enter their own. The only thing is that now when you click on one of the fields, the animation happens to both fields. I think the problem may be with my understanding of "this" in javascript, but perhaps not. Any help would be greatly appreciated.
<br />
<form target="_blank" id="subscribe" method="post" action="https://www.myaction.com">
<p>
<input type="hidden" name="username" value="myusername">
<input type="text" name="email" value="Email Address" id="subscribe" onfocus="javascript:if(this.value=='Email Address')this.value='';" onblur="this.value=!this.value?'Email Address':this.value;" maxlength="100">
</p>
<br />
<input type="submit" value="Subscribe" />
</form>
<input type="text" name="email" value="Email Address" id="subscribe" onfocus="this.value = this.value ==='Email Address' ? '' : this.value;" onblur="this.value = this.value || 'Email Address';" maxlength="100">
The problem ended up being in my HTML. Stupid mistake. Thanks for your help.
Basically I have two forms. I want to have a user upon registration fill out the first lot of information. Press next (submit), then fill out the second lot of information. Once they press register, submit both sets of POST information.
What I have is this - two sections with two different forms (there's a reason why these are split into two forms - part of the look of the site):
<section class="first">
<header>
<h1>Signup 1/2</h1>
</header>
<form id="firstForm">
<label>First Name</label>
<input type="text" class="input-text" value="" name="firstName" required />
<label>Surname</label>
<input type="text" class="input-text" value="" name="Surname" required />
<label>Username</label>
<input type="text" class="input-text" value="" name="Username" required />
<input type="submit" name="firstSubmit" value="next"/>
</form>
</section>
<section class="second">
<header>
<h1>Signup 2/2</h1>
</header>
<form name="secondForm" class="clearfix">
<label>Your Email</label>
<input type="email" class="input-text" value="" name="email" required />
<label>Password</label>
<input type="text" class="input-text" value="" name="password" required />
<input type="submit" name="secondSubmit" value="Register" />
</form>
</section>
So the second section is hidden until the user clicks the next button (submit). I have javascript stopping it from submitting, and hiding the first section, and making the second one appear:
<script type="text/javascript">
$("#firstForm").bind("submit", nextForm);
function nextForm() {
$('.first').css("display", "none");
$('.second').css("display", "block");
return false;
}
This works.
My issue is then getting the secondForm to submit, but POST both the first and second's information, as if with the one submit button, I was submitting both. Is this possible? And if so, how?
To use a GET method I'd go:
$("#secondForm").bind("submit", submitForm);
function submitForm() {
document.getElementById("firstForm").submit();
document.getElementById("secondForm").submit();
}
But I don't want to do that, as GET = a bad idea for sensitive info.
I would use one form, but wrap the two sets of inputs in divs. Just hide the first div and show the second on the first button click (which you wouldn't keep as a submit button), then submit the entire form on the second button click.