My registration script has 2 hidden input fields that change to two set variables based on the user input. The form button is disabled by default. My issue is getting the button to be enabled once the two hidden input fields match the set variable.
<form id="register_form" autocomplete="off" method="post" action="">
<h1>Register</h1>
<div id="error_msg"></div>
<div id="pass"><span id='user'></span></div>
<div id="pass"><span id='message'></span></div>
<div id="pass"><span id='message2'></span></div>
<div>
<input type="text" name="username" placeholder="Username" id="username" autocomplete="off" required>
</div>
<div>
<input type="email" name="email" placeholder="Email" id="email" autocomplete="off" required>
</div>
<div class="radio">
<input type="radio" name="opt" value="Yes" checked> Receive Emails for Promotions and Newsletters
<br>
<input type="radio" name="opt" value="No"> Don't Receive Emails for Promotions and Newsletters
</div>
<div>
<input type="password" name="new_password" placeholder="Enter Password" id="new_password" autocomplete="off" required>
</div>
<div>
<input type="password" name="new_password2" id="new_password2" placeholder="Confirm Password" autocomplete="off" required>
</div>
<div>
<input type="text" name="user-response" id="user-response">
</div>
<div>
<input type="text" name="pass-response" id="pass-response">
</div>
<div>
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
</div>
<div>
<button type="submit" id="reg_btn" class="button" name="register" disabled="disabled">Register Account</button>
</div>
</form>
$(function(){
var user = $('#user-response').val();
var pass = $('#pass-response').val();
if(user === 'available' && pass === 'match'){
$("#reg_btn").prop("disabled", false);
} else {
$("#reg_btn").prop("disabled", true);
}
});
When a user enters a username that doesn't exist the 1st "hidden" input field will display available. When a user enters a matching password that meets the requirements it displays match. When those two fields say available and match the button should switch to enabled but it remains disabled.
I am using the PHP & MySQL to submit a form with following code and using isset function in PHP to submit the value to database.
<div class="display">
<form action="" method="POST">
<div>
<input type="text" name="name" placeholder="Your Name" required="required">
</div>
<div>
<input type="text" name="phone" id="phone" placeholder="Mobile" required="required" onblur="check();">
<br/>
<span id="e_mobile"></span>
<?php if(isset($_GET["r"])){ ?><p>Invalid number; must be ten digits. Please submit your query again</p><?php } ?>
</div>
<div>
<input type="text" name="landline" id="landline" placeholder="Alternate Number" required="required" onblur="check1();">
<br/>
<span id="e_landline"></span>
</div>
<div>
<input type="email" name="email" placeholder="Email" required="required">
</div>
<div>
<input type="text" name="address" placeholder="Your Address" required="required">
</div>
<div>
<input type="hidden" value="0" name="salesid"/>
</div>
<input type="submit" name="submit" value="Submit">
</form>
</div>
Now I want once the user click submit button once the button should freeze; as of now if the user clicks the submit button more than once(by intentionally or by mistake) the same information is getting submitted in the database more than once.
What to do in this circumstance?
Try with JQuery:
First add an ID to your form
<form action="" method="POST" id="form">
After that add script:
<script type="text/javascript">
$(document).ready(function() {
$("#form").submit(function(e){
$("input[type='submit']").attr("disabled","disabled");
});
});
</script>
You can add PHP Captcha to prevent user click again.
Please review below two urls which includes demo too.
http://www.w3schools.in/php/captcha/
http://99webtools.com/blog/php-simple-captcha-script/
I want to remove the "please fill out this field" pop-up as validation and normal validations which are declared should display.
Html:
<div class="panel-body">
<form role="form" id="createForm" v name="createForm" ng-submit="createAdminGroup(adminGroupData)">
<div class="form-group" ng-class="{ 'has-error' : createForm.firstName.$invalid && !createForm.firstName.$pristine}">
<label class="label1">First Name</label>
<input name="firstName" id="firstName" class="form-control" placeholder="First Name" name="firstName" type="text" ng-model="adminGroupData.firstName " required/>
<span style="color:red" ng-show="createForm.firstName.$invalid && !createForm.firstName.$pristine">Please enter first name</span>
</div>
<div class="form-group">
<label class="label1">Last Name </label>
<input name="lastName" id="lastName" class="form-control" placeholder="Last Name" name="lastNmae" type="text" ng-model="adminGroupData.lastName" />
</div>
<div class="form-group">
<label class="label1"> Email Id </label>
<input type="email" name="email" id="email" class="form-control" placeholder="email#xyz.com" value=""ng-model="adminGroupData.email"/>
</div>
<div class="form-group">
<label class="label1"> Password </label>
<input name="password" id="password" class="form-control" placeholder="password" value="" ng-model="adminGroupData.password" />
</div>
<button name="submit" type="submit" class="btn btn-success" id="" ng-disabled="userForm.$invalid">Save</button>
<button class="btn btn-default" id="cancel" type="button" onclick='handleCancelCreateAdmin()'> Back </button>
</form>
</div>
Add novalidate attribute to your form to disable browser default validation
For Ex
<form role="form" novalidate id="createForm" v name="createForm" ng-submit="createAdminGroup(adminGroupData)">
Find more here
Add the attribute formnovalidate inside your submit button:
Example:
<button name="submit" type="submit" formnovalidate class="btn btn-success">Save</button>
This will disable only the browser form validation. You still have the validation from your AngularJS code.
You can see the W3C specification here
I had the same problem a few days ago and that's how I managed to solve
I just tried this and it worked:
oninvalid="this.setCustomValidity(' ')" oninput="this.setCustomValidity('')" >
I have add a space between the two single quotes.
Since i added a bootstrap tooltip on my input fields and required, the invalid input comes to focus and displays the tooltip value.
It was simpler than I thought it would be.
title=""
The tooltip appears even when input is outside of form and for those cases it does not work the novalidate.
One solution is to remove required, but if you have a large codebase then a quick hack will be to add title="".
<input type="text" required title="" />
Like stated in this example, I can show or hide some form elements that are in a specific group, based on the selected item in a combo box.
What I would like to do, is to maintain the same behavior but using links. For example, the first group is:
If I click on Join us, I would like to switch (to show) to the second group (and hide the first), like this:
.. cyclically.
A basic HTML:
<div id="registrate" class="group1">
<form action="#" method="post" class="regform">
<h1><span class="log-in">Log in</span> or <span class="sign-up">sign up</span></h1>
<p class="float group1_opts">
<input type="text" name="nickname" id="nickname" placeholder="Username or Email..">
</p>
<p class="float group2_opts">
<input type="text" name="nickname" id="nickname" placeholder="Email..">
</p>
<p class="float group2_opts">
<input type="text" name="nickname" id="nickname" placeholder="Confirm Email..">
</p>
<p class="float">
<input type="password" name="password" placeholder="Password.." required><br/>
</p>
<p class="float group2_opts">
<input type="password" name="password" placeholder="Confirm Password.." required><br/>
</p>
<p>
<div class="remember">
<input type="checkbox" name="remember" value="None" id="remember">
<label for="remember"></label>
</div>
<label for="remember" class="remembermelabel">Remember Me</label>
</p>
<p class="submit">
<div class="button">
<input type="submit" name="submit" value="Login">
</div>
</p>
<h1></h1>
<p class="change_link group1_opts"> Not a member yet?
Join us
</p>
<p class="change_link group2_opts"> Are you just a member?
Login
</p>
</form>
A basic CSS:
.group1_opts, .group2_opts {
display: none;
}
.group1 .group1_opts, .group2 .group2_opts {
display: block;
}
There is a way to obtain this using links instead of combobox, like in the other example?
Thank you
Bind to the click events, and show and hide the relevant fields:
$('.to_register').click(function() {
$('.group1_opts').hide();
$('.group2_opts').show();
});
$('.to_login').click(function() {
$('.group1_opts').show();
$('.group2_opts').hide();
});
Note that you won't need your CSS to do this - jQuery will take care of hiding/showing the elements for you.
#BigChris raises an excellent point, and it's worthy of an answer.
How do you plan to tell if someone submitted a "Registration" or a "Login"? Simply watching for the right input field(s) won't work, because it's possible someone starts to fill in the registration form, but then switches to the login form.
Right now, you have only one form, with one submit button.
For clarity, and to provide a clear separation, not only in your markup but in your form processing on the server, I would strongly recommend that you change the markup to be two entirely separate forms. If you aren't willing / able to do that, then at least create two buttons.
Here's the revised HTML based on the two form concept:
<div id="registrate" class="group1">
<h1><span class="log-in">Log in</span> or <span class="sign-up">sign up</span></h1>
<!-- The first form contains only registration info, and a submit named register -->
<form action="#" method="post" class="to_register">
<p class="float">
<input type="text" name="nickname" id="nickname" placeholder="Email..">
</p>
<p class="float">
<input type="text" name="nickname" id="nickname" placeholder="Confirm Email..">
</p>
<p class="float">
<input type="password" name="password" placeholder="Password.." required><br/>
</p>
<p class="float">
<input type="password" name="password" placeholder="Confirm Password.." required><br/>
</p>
<p class="submit">
<div class="button">
<input type="submit" name="register" value="Login">
</div>
</p>
</form>
<!-- The second form is purely login, and has a submit named login -->
<form action="#" method="post" class="to_login">
<p class="float">
<input type="text" name="nickname" id="nickname" placeholder="Username or Email..">
</p>
<p class="float">
<input type="password" name="password" placeholder="Password.." required><br/>
</p>
<p>
<div class="remember">
<input type="checkbox" name="remember" value="None" id="remember">
<label for="remember"></label>
</div>
<label for="remember" class="remembermelabel">Remember Me</label>
</p>
<p class="submit">
<div class="button">
<input type="submit" name="login" value="Login">
</div>
</p>
</form>
<h1></h1>
<p class="change_link group1_opts"> Not a member yet?
Join us
</p>
<p class="change_link group2_opts"> Are you just a member?
Login
</p>
</div>
Note that I've changed the classes of the forms, and removed the classes on the p tags. The classes of the forms match the class of the links, so that the jQuery is simpler.
Then, your jQuery becomes:
jQuery(function($) {
$('a.to_register, a.to_login').click(function(event) {
event.preventDefault();
var cname = $(this).attr('class');
$('form.' + cname).show();
$('form').not('.' + cname).hide();
});
});
Now, depending on your server-side language, you can watch for either $_POST['register'] or $_POST['login'] (the names of the submit buttons), to detect which they clicked, and what they intended.
I would honestly make two seperate forms. The code is very simple, and you can set two different actions in your forms. -- DEMO: http://jsfiddle.net/hCmr6/
jQuery:
$('.to_register, .to_login').click(function (e) {
e.preventDefault();
$('.loginform, .regform').slideToggle(400);
});
HTML:
<div id="registrate" class="group1">
<h1><span class="log-in">Log in</span> or <span class="sign-up">sign up</span></h1>
<form action="#" method="post" class="loginform">
<p class="float group1_opts">
<input type="text" name="nickname" id="nickname" placeholder="Username or Email.." />
</p>
<p class="float">
<input type="password" name="password" placeholder="Password.." required />
<br/>
</p>
<p class="float group2_opts"></p>
<p>
<div class="remember">
<input type="checkbox" name="remember" value="None" id="remember" />
<label for="remember"></label>
</div>
<label for="remember" class="remembermelabel">Remember Me</label>
</p>
<p class="submit">
<div class="button">
<input type="submit" name="submit" value="Login" />
</div>
</p>
<h1></h1>
<p class="change_link group1_opts">Not a member yet? Join us
</p>
</form>
<form action="#" method="post" class="regform">
<p class="float group1_opts">
<input type="text" name="nickname" id="nickname" placeholder="Username or Email.." />
</p>
<p class="float group2_opts">
<input type="text" name="nickname" id="nickname" placeholder="Email.." />
</p>
<p class="float group2_opts">
<input type="text" name="nickname" id="nickname" placeholder="Confirm Email.." />
</p>
<p class="float">
<input type="password" name="password" placeholder="Password.." required />
<br/>
</p>
<p class="float group2_opts">
<input type="password" name="password" placeholder="Confirm Password.." required />
<br/>
</p>
<p>
<div class="remember">
<input type="checkbox" name="remember" value="None" id="remember" />
<label for="remember"></label>
</div>
<label for="remember" class="remembermelabel">Remember Me</label>
</p>
<p class="submit">
<div class="button">
<input type="submit" name="submit" value="Login" />
</div>
</p>
<p class="change_link group2_opts">Are you just a member? Login
</p>
</form>
</div>
Hope this helps! Let me know if you have any questions!
using jQuery you can do this:
$(document).ready(function(){
$('.to_register, .to_login').click(function() {
$('.group1_opts').toggle();
$('.group2_opts').toggle();
});
});
edit: this works as long as the right stuff is hidden and shown at first
In JavaScript (sorry but I'm not using jQuery):
For that you need to use the onclick action from JavaScript and like your address "join us" to "#" to make it stay on the same page. Actually you can use onclick with pretty much anything so feel free to use a <p>, <img> or what ever.
To make disappear / appear your input, just use:
function hide(id)
{
var element = document.getElementById(id);
element.style ="display: none;";
}
Also you can change the value of your <p> from "Join us" to "Login" and also change the action you want to call with onclick (switch between hide/show(id) and element.setAttribute("onclick", full_function);).
I've embedded these types of customized mailchimp forms on multiple sites with great success across all browsers, but for some reason, this particular iteration isn't working in IE. The site itself is http://www.buildinggurus.com/ and this form appears on the home page and sidebars of the inner pages.
What happens in IE is the input fields appear as blank boxes. The input value isn't visible, clicking the input field doesn't do anything (read: you can't type into it), and it seems more like a placeholder than a call to action. What am I missing here?
<div id="mc_embed_signup">
<form action="URLHERE" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="widget-lead-form"><h5>Subscribe to Our Blog</h5>
<div class="mc-field-group">
<input type="text" value="first name" name="FNAME" class="required-name" id="mce-FNAME" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'first name':this.value;" required />
</div>
<div class="mc-field-group">
<input type="text" value="last name" name="LNAME" class="required-name" id="mce-LNAME" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'last name':this.value;" required />
</div>
<div class="mc-field-group">
<input value="enter your email" name="EMAIL" type="email" class="required-email" id="mce-EMAIL" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'enter your email':this.value;" required />
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div class="clear">
<input type="submit" name="subscribe" class="submit" id="mc-embedded-subscribe" value="submit" /></div>
</div>
</form>
</div>
IE still requires a value to be set. The following I use in all of my form input tags:
onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'default value':this.value;" value="default value"