Multiple Forms in an HTML Page - javascript

I have a form which two divs that contain different 'forms' (i.e login and register forms). The login div allows registered users log in, while the register div allows new users create a new account. Now I'm trying to validate input entered into the form. I got the javascript working for the register div but it's not working for the login div. Please how to i make the javascript work for the second div? Do i have to create different forms?
UPDATE:
Here's the javascript code:
function validateForm(){
//create variables for tracking validation
var valid=true;
var msg;
//validating the lastname field
document.getElementById('lname').onkeyup=function(){
if(document.getElementById('lname').value.length==0){
document.getElementById('lnameerror').style.display='inline';
document.getElementById('lnameerror').style.color='red';
valid=false;
document.getElementById('lname').focus();
}
else{
document.getElementById('lnameerror').style.display='none';
}
}
if(document.getElementById('lname').value.length==0){
document.getElementById('lnameerror').style.display='inline';
document.getElementById('lnameerror').style.color='red';
valid=false;
document.getElementById('lname').focus();
msg='Please enter your last name';
}
else{
document.getElementById('lnameerror').style.display='none';
}
//validating the firstname field
document.getElementById('fname').onkeyup=function(){
if(document.getElementById('fname').value.length==0){
document.getElementById('fnameerror').style.display='inline';
document.getElementById('fnameerror').style.color='red';
document.getElementById('fname').focus();
}
else{
document.getElementById('fnameerror').style.display='none';
}
}
if(document.getElementById('fname').value.length==0){
document.getElementById('fnameerror').style.display='inline';
document.getElementById('fnameerror').style.color='red';
valid=false;
document.getElementById('fname').focus();
msg='Please enter your first name';
}
else{
document.getElementById('fnameerror').style.display='none';
}
//checking to see if password matches
if(document.getElementById('cpword').value!=document.getElementById('pword').value){
msg='Password does not match, please try again.';
valid=false;
}
//Display alert on error
if(valid==false){
alert(msg);
}
return valid;
}
function signin_validate(){
//VALIDATION FOR SIGN IN FORM
//validating the password field
document.getElementById('signin_pwordl').onkeyup=function(){
if(document.getElementById('signin_pword').value.length==0){
document.getElementById('signin_pworderror').style.display='inline';
document.getElementById('signin_pworderror').style.color='red';
document.getElementById('signin_pword').focus();
}
else{
document.getElementById('signin_pworderror').style.display='none';
}
}
document.getElementById('signin').onclick=function(){
if(document.getElementById('signin_pword').value.length==0){
document.getElementById('signin_pworderror').style.display='inline';
document.getElementById('signin_pworderror').style.color='red';
document.getElementById('signin_pword').focus();
}
else{
document.getElementById('signin_pworderror').style.display='none';
}
}
//validating the email field
document.getElementById('signin').onclick=function(){
if(document.getElementById('signin_email').value.length==0){
msg='Please enter your email address';
valid=false;
}
}
//Display alert on error
if(valid==false){
alert(msg);
}
}
HTML:
<form action="Accounts.php" method="post">
<div id="maincontent">
<h1>Sign In Or Register</h1>
<div id="login">
<h2>Sign In</h2>
<div>
<label for="signin_email">Email Address*: </label><input id="signin_email" type="email" placeholder="E.g you#yourdomain.com" autofocus maxlength="50" /><span style="display:none;" id="signin_emailerror" name="signin_emailerror">*Please enter your First Name</span>
</div>
<div>
<label for="signin_pword">Password*: </label><input id="signin_pword" type="password" maxlength="24" /><span style="display:none;" id="signin_pworderror" name="signin_pworderror">*Please enter your First Name</span>
</div>
<div>
<button type="submit" id="signin" name="signin" value="Sign In" onclick="return signin_validate()">Sign in</button>
</div>
</div>
<h2>OR</h2>
<div id="register">
<h2>Register</h2>
<div>
<label for="fname">First Name*: </label>
<input id="fname" name="fname" maxlength="30" type="text" /><span style="display:none;" id="fnameerror" name="fnameerror">*Please enter your First Name</span>
</div>
<div>
<label for="lname">Last Name*: </label><input id="lname" name="lname" maxlength="30" type="text" /><span style="display:none;" id="lnameerror" name="lnameerror">*Please enter your Last Name</span>
</div>
<button type="submit" id="register" name="register" value="Register" onclick="return validateForm()">Register</button>
</div>
</div>
</div>
</form>

You can use two Forms, one for login and other for register. The advantage of two Forms is with the user can press "Enter" for submit the form in both cases.
<form name="formLogin" id="formLogin" action="Login.php" method="post" onsubmit="login_validate()">
<div id="maincontent">
<h1>Sign In Or Register</h1>
<div id="login">
<h2>Sign In</h2>
<div>
<label for="signin_email">Email Address*: </label><input id="signin_email" type="email" placeholder="E.g you#yourdomain.com" autofocus maxlength="50" /><span style="display:none;" id="signin_emailerror" name="signin_emailerror">*Please enter your First Name</span>
</div>
<div>
<label for="signin_pword">Password*: </label><input id="signin_pword" type="password" maxlength="24" /><span style="display:none;" id="signin_pworderror" name="signin_pworderror">*Please enter your First Name</span>
</div>
<div>
<button type="submit" id="signin" name="signin" value="Sign In" onclick="login_validate()">Sign in</button>
</div>
</div>
</form>
<h2>OR</h2>
<form name="formRegister" id="formRegister" action="register.php" method="post" onsubmit="signin_validate()">
<div id="register">
<h2>Register</h2>
<div>
<label for="fname">First Name*: </label>
<input id="fname" name="fname" maxlength="30" type="text" /><span style="display:none;" id="fnameerror" name="fnameerror">*Please enter your First Name</span>
</div>
<div>
<label for="lname">Last Name*: </label><input id="lname" name="lname" maxlength="30" type="text" /><span style="display:none;" id="lnameerror" name="lnameerror">*Please enter your Last Name</span>
</div>
<button type="submit" id="register" name="register" value="Register" onclick="signin_validate()">Register</button>
</div>
</div>
</div>
</form>

Related

Disable/Enable Button based on hidden input field variable matches set variable

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.

Is there a way to get your JQuery validation to populate onto the document?

For one of my classes we're using JQuery validation. I'm trying to get the answers to populate next to the corresponding text on the bottom that's listed (name, age, date,etc..) on the document below after the user inputs the info in the text box.
<script>
$(document).ready(function() {
$("#input").validate();
$("#input").submit(function(e) {
e.preventDefault(); //Prevents from submitting (which is the default action)
if (!$("#input").valid()) {
return false;
} else {
$("#result").append($("#name").val() + "<br>" + "Your name is");
}
});
});
</script>
<body>
<p><b>Fill out all the fields below and click submit</b></p>
<div>
<label for="name" class="label">Enter your name</label>
<input type="text" name="name" id="name" class="required" title="Please enter your name"> </div><br>
<div>
<label for="thedate" class="label">Enter today's date</label>
<input type="text" name="thedate" id="thedate" class="required date"></div><br>
<div>
<label for="theage" class="label">Enter your age</label>
<input type="text" name="theage" id="theage" class="required digits"></div><br>
<div>
<label for="theurl" class="label">Enter your web site</label>
<input type="text" name="theurl" id="theurl" class="required url"></div><br>
<div>
<label for="theemail" class="label">Enter your email</label>
<input type="text" name="theemail" id="theemail" class="required email"></div><br>
<div>
<input type='submit' value='Submit' name="submit" id='submitme'></div><br>
</form>
<p id="result"></p>
<p><b>Name:</b></p><br>
<p><b>Date: </b></p><br>
<p><b>Age:</b> </p><br>
<p><b>Website: </b></p><br>
<p><b>Email:</b></p><br>
</body>
</html>

javascript onsubmit is not correctly working

All responses and help is greatly appreciated!
HTML:
<h1>CONTACT US</h1>
<form action="submit.html" target="_blank" method="post" onsubmit="return validate();">
<label for="name">NAME</label>
<input id="contact-name" name="name" placeholder="Please enter your name..." type="text">
<label for="email">EMAIL</label>
<input id="contact-email" name="email" placeholder="Please enter your contact email..." type="text">
<label for="email">MESSAGE</label>
<textarea id="contact-message" name="message" placeholder="Please enter your message.."></textarea>
<p></p>
<input type="submit" id="submit" value="SUBMIT MESSAGE">
</form>
JAVASCRIPT:
function validate() {
var username = document.getElementById("contact-name").value;
var email = document.getElementById("contact-email").value;
if (username==="" || email==="") {
alert("Please can you fill in all fields");
return false;
} else {
return true;
}
};
Are you sure you imported the file containing your Javascript into the HTML? See below:
function validate() {
var username = document.getElementById("contact-name").value;
var email = document.getElementById("contact-email").value;
if (username==="" || email==="") {
alert("Please can you fill in all fields");
return false;
} else {
return true;
}
}
<html>
<head>
</head>
<body>
<h1>CONTACT US</h1>
<form action="submit.html" target="_blank" method="post" onsubmit="return validate();">
<label for="name">NAME</label>
<input id="contact-name" name="name" placeholder="Please enter your name..." type="text">
<label for="email">EMAIL</label>
<input id="contact-email" name="email" placeholder="Please enter your contact email..." type="text">
<label for="email">MESSAGE</label>
<textarea id="contact-message" name="message" placeholder="Please enter your message.."></textarea>
<p></p>
<input type="submit" id="submit" value="SUBMIT MESSAGE">
</form>
<script src="script.js"></script>
</body>
</html>

Disable submit button once the user submits the form

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/

TinyBox how get passing value from parent pages

Recently I have faced a problem which do not know how to pass value from parent page to a tinybox. The following is my source code; is there any idea can help me to achieve this? A edit.php wrap inside a tinybox so when I click on a specific column suppose the value should pass to the edit.php (tinybox) and also the value will display on the textfield, but it just simply doesn't work. I am new in PHP would appreciate for some one pointing me to good solution.
parent page.php
display_cell6.appendChild(edit).innerHTML='<img id="edit" alt="Edit" class="'+obj[idx].id+'" onclick="TINY.box.show({iframe:\'ajaxEditUserDetail.php\',boxid:\'frameless\',width:400,height:280,openjs:function(){openJS(this.id)}}); title="Edit" src="images/edit.png"></img>';
function openJS(id){
var id=parent.document.getElementById(id);
alert(id);
}
edit.php
<div id="banner">
<span>Edit Customer Information</span>
</div>
<div id="form_container">
<fieldset>
<div class="box-form">
<form action="send.php" method="POST" id="userDetail" >
<fieldset>
<div>
<label for="name_Req">Name <strong>*</strong></label>
<input type="text" id="name_Req" name="name" value="test"
title="Required! Please enter your name" />
</div>
<div>
<label for="contact_Req_Email">E-mail <strong>*</strong></label>
<input type="text" id="contact_Req_Email" name="email"
title="Required! Please enter a valid email address" />
</div>
<div>
<label for="telephone_Tel">Telephone</label>
<input type="text" id="telephone_Tel" name="telephone"
title="Please enter a valid telephone number" />
</div>
<div>
<label for="address">Address</label>
<input type="text" id="address" name="address" title="Please enter a
valid address" />
</div>
<div>
<input type="submit" value="Save" id="sub" class="button" />
</div>
</fieldset>
</form>
</div>
</fieldset>
</div>

Categories

Resources