i've built asimple webstie that contains three pages.i created a form in home page and something goes wrong with my javascript - i'm having a problem in setting a field right next to the input field with a rellevant message to the user telling him what he did wrong(prompt).
so i'm inputing below the honmePage (the form wich is in the body of the page -html) and the script its self wich includes a simple function.
My purpose is to check if user fills the field name and after that he delete it,so i want to display a red color message that tells the user that this field is requierd.
i'd be glad if someone can help me with that.
function validateName(){
var name=document.getElementById("fullName").value;
if (name.length == null)
{
nameRequiredPromt("Name Is Required",fullNamePrompt,"white");
return false;
}
}
function nameRequiredPromt(message,promtLocation,color){
document.getElementById(promtLocation).innerHTML=message;
document.getElementById(promtLocation).style.color=color;
}
<form id="form" style="color:white;">
<table>
<tr>
<td>
FullName :
</td>
<td>
<input type="text" placeholder="fullName" id="fullName"
onkeyup="validateName()" type="text"/> <label id="fullNamePrompt">aaaa
</label> <br>
</td>
</tr>
<tr>
<td>
E-mail :
</td>
<td>
<input type="email" placeholder="email" id="email"/><label
id="emailPrompt"> </label><br>
</td>
</tr>
<tr>
<td>
New Password :
</td>
<td>
<input type="password" placeholder="password" id="newPassWord"/> <label
id="PasswordPrompt"> </label><br>
</td>
</tr>
<tr>
<td>
Repeat Password :
</td>
<td>
<input type="password" placeholder="repeatedPassword"
id="repeatedPassWord"/> <label id="repeatedPassWordPrompt"> </label><br>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="submit" id="submit"/> <label
id="submitPrompt"> </label><br>
</td>
</tr>
</table>
</form>
i did some checks to be sure that the script works and it did work so i think my problem is in the decleration of the lable "id".
switch
name.length == null
to
!name.length
length will be zero not null
also fullNamePrompt appears undefined
try nameRequiredPromt("Name Is Required","fullNamePrompt","white");
Fixed: name.length == null and also fullNamePrompt undefined and color: white to red
function validateName(){
var name=document.getElementById("fullName").value;
if (!name.length)
{
nameRequiredPromt("Name Is Required","fullNamePrompt","red");
return false;
}
}
function nameRequiredPromt(message,promtLocation,color){
document.getElementById(promtLocation).innerHTML=message;
document.getElementById(promtLocation).style.color=color;
}
<form id="form" style="color:white;">
<table>
<tr>
<td>
FullName :
</td>
<td>
<input type="text" placeholder="fullName" id="fullName"
onkeyup="validateName()" type="text"/> <label id="fullNamePrompt">aaaa
</label> <br>
</td>
</tr>
<tr>
<td>
E-mail :
</td>
<td>
<input type="email" placeholder="email" id="email"/><label
id="emailPrompt"> </label><br>
</td>
</tr>
<tr>
<td>
New Password :
</td>
<td>
<input type="password" placeholder="password" id="newPassWord"/> <label
id="PasswordPrompt"> </label><br>
</td>
</tr>
<tr>
<td>
Repeat Password :
</td>
<td>
<input type="password" placeholder="repeatedPassword"
id="repeatedPassWord"/> <label id="repeatedPassWordPrompt"> </label><br>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="submit" id="submit" onclick="return validateName();"/> <label
id="submitPrompt"> </label><br>
</td>
</tr>
</table>
</form>
if (name && !name.length)
{
nameRequiredPromt("Name Is Required","fullNamePrompt","white");
return false;
}
first condition checks if name is null, second for checking if name.length is 0.
Related
I am creating a landing page with a form. I want to set up where every 10th person who signed up links to a "special" page where they receive a prize. For example: first 9 people will redirect to thankyou.html page where the 10th person will link to prize.html page. Is this possible? Thank you in advance.
<form method="post" enctype="multipart/form-data" action="http://form.relevanttools.com/rt-cgi-bin/satellite">
<input type="hidden" name="code" value="12531"> <input type="hidden" name="db" value="project"> <input type="hidden" name="source" value="Prize"> <input type="hidden" name="optin" value=""> <input type="hidden" name="type" value="signup"> <input type="hidden" name="user_email_msg" value=""> <input type="hidden" name="admin_email_addr" value=""> <input type="hidden" name="redir" value="http://www.link.com/thankyou.html">
<table border="0">
<tr>
<td> </td>
<td>First Name*</td>
<td> </td>
<td> <input type="text" id="first_name" name="first_name*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Last Name*</td>
<td> </td>
<td> <input type="text" id="last_name" name="last_name*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Email*</td>
<td> </td>
<td> <input type="text" id="email" name="email*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Age*</td>
<td> </td>
<td> <input type="text" id="age" name="age*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Gender</td>
<td> </td>
<td>
<div class="align-left"> <input type="radio" name="gender" value="Male">Male<br> <input type="radio" name="gender" value="Female">Female<br> </div>
</td>
</tr>
<tr>
<td> </td>
<td>Zip</td>
<td> </td>
<td> <input type="text" id="zip" name="zip" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Private Policy*</td>
<td> </td>
<td> <input type="checkbox" id="private_policy" name="private_policy" value="x"> </td>
</tr>
<tr>
<td> </td>
<td>Email Subscription</td>
<td> </td>
<td> <input type="checkbox" id="email_opt_in" name="email_opt_in" value="x"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><input type="submit" value = "Submit" ></td>
</tr>
</table>
</form>
You could give the button a 10% probability of redirecting to the prize page - but that's the best without a server.
Javascript is client side. Meaning it has no way of knowing how other people have acted. The only way to know that is storing every click in a database and counting that.
I want to disable the button based on the javascript result of textboxes if there is incorrect email id then the button should be disabled .Help me over this.If there is incorrect email and phone no ,I Want to disable my Button function or button.My problem is I'm using separate javascript functions for textboxes so how can disable the button based on other javascript function.Help me over this
<div align="right">
</div>
<div id="div">
<center> <h3>REGISTER</h3></center>
<div id="output" align="center">
</div>
<table>
<thead>
</thead>
<tbody>
<tr>
<td>
<label>Firstname</label>
<td>
<input type="text" name="firstname" id="firstname" required="">
</td>
</tr>
<tr>
<td>
<label>Lastname</label>
</td>
<td>
<input type="text" name="lastname" id="lastname" required="">
</td>
</tr>
<tr>
<td>
<label>Email</label>
</td>
<td>
<input type="text" name="email" id="email" required="">
</td>
<td id="error" style="display:none;color:red">
invalidemail
</td>
</tr>
<tr>
<td>
<label>Password</label>
</td>
<td>
<input type="password" name="password" id="password" required="">
</td>
</tr>
<tr>
<td>
<label>Confirm password</label>
</td>
<td>
<input type="password" name="confirmpassword" id="confirmpassword" required="">
</td>
<span id="pass"></span>
</tr>
<tr>
<td>
<label>Phone no</label>
</td>
<td>
<input type="text" name="phoneno" pattern="[789][0-9]{9}" id="phoneno" required="" maxlength="10">
</td>
<td id="invalidphone" style="display:none;color:red">
invalidphoneno
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" name="submit" value="submit" id="submit"/>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
Login?
</td>
</tr>
</tbody>
</table>
</div>
</body>
</head>
</html>
<script type="text/javascript">
$('#email').on('keypress', function() {
var re = /([A-Z0-9a-z_-][^#])+?#[^$#<>?]+?\.[\w]{2,4}/.test(this.value);
if(!re) {
$('#error').show();
} else {
$('#error').hide();
}
});
$('#phoneno').on('keypress',function(){
var phone=/^\+{0,2}([\-\. ])?(\(?\d{0,3}\))?([\-\. ])?\(?\d{0,3}\)?([\-\. ])?\d{3}([\-\. ])?\d{4}/.test(this.value);
if(!phone){
$('#invalidphone').show();
}
else
{
$('#invalidphone').hide();
}
});
$(document).ready(function(){
$('#submit').click(function(){
var first=$('#firstname').val();
var last=$('#lastname').val();
var Email=$('#email').val();
var pass=$('#password').val();
var confirm=$('#confirmpassword').val();
var phone=$('#phoneno').val();
$.ajax({
type:"POST",
url:"register.php",
data:{
firstname:first,
lastname:last,
email:Email,
password:pass,
confirmpassword:confirm,
phoneno:phone,
},
success:function(data){
if($.trim(data)==='successfully registered')
{
$('#output').html(data);
}
else
{
$('#pass').html(data);
}
},
error:function()
{
alert("error");
}
});
});
});
</script>
Have submit button disabled initially till you have all form
elements as proper
With the HTML5 input (email and text) fields, you already have the required attribute present, but need to put required="required"
Have an onChange event for the last (required) field, check if the
validation is successful.
Check this for more details and additional info
If input field is empty, disable submit button
Use $("#submit").attr("disabled", true); to disable and $("#submit").removeAttr("disabled"); to enable the button
$('#phoneno').on('keypress',function(){
var phone=/^\+{0,2}([\-\. ])?(\(?\d{0,3}\))?([\-\. ])?\(?\d{0,3}\)?([\-\. ])?\d{3}([\-\. ])?\d{4}/.test(this.value);
if(!phone){
$("#submit").attr("disabled", true); // disable submit btn
$('#invalidphone').show();
}
else
{
$("#submit").removeAttr("disabled"); //enable submit btn
$('#invalidphone').hide();
}
});
Simply disable the button at the top of your javascript.
$("#submit").prop("disabled", true);
Then in your regex, if it's true, set it to false.
EDIT - It's probably best to set your regex variables global and then you can do if statement for both regex.
if (re && phone) {
$("#submit").prop("disabled", false);
}
as an assignment of my university, I made this simple Static Log-In Form using JavaScript and HTML, but there is one Even Handler onclick which is not working, I tried all possible solutions, I tried to sue tag to make button as well, but still its not working. Kindly help me where i am doing mistake. Below is my code:
<html>
<head>
<title> Test File </title>
<script>
function checkEmailField()
{
if (document.username.sender.value.length < 1)
{
window.alert("Caution! You did not enter your Email");
}
}
</script>
</head>
<body bgcolor="pink">
<table align="center">
<tr>
<td align="center">
<b> <h1> Fill the following form to log in: </h1> </b>
<form name="logIn" method="post" action="sendMailScriptURL">
<table border="1">
<tr>
<td> <b> Email: </b> </td>
<td> <input type="text" name="username" size="50"> <br> </td>
</tr>
<tr>
<td> <b> Password: </b> </td>
<td> <input type="password" name="password" size ="50"> </td>
</tr>
<tr>
<td> <b> Logging in from: </b> </td>
<td>
<input type="radio" name="from" value="campus"> Campus <br>
<input type="radio" name="from" value="home"> Home
</td>
</tr>
<tr>
<td> <b> I am using: </b> </td>
<td>
<select name="OS" size="1">
<option value="Windows" selected> Windows
<option value="Linux/UNIX"> LINUX/UNIX
<option value="Mac OSX"> Mac OSX
</select>
</td>
</tr>
<tr>
<td> <b> I have: </b> </td>
<td>
<input type="checkbox" name="have" value="Computer"> Computer <br>
<input type="checkbox" name="have" value="Mobile"> Mobile <br>
<input type="checkbox" name="have" value="Printer"> Printer <br>
<input type="checkbox" name="have" value="Scanner"> Scanner
</td>
</tr>
<tr>
<td> <button onclick="checkEmailField()"> Log In </button></td>
</tr>
</table>
</form>
</td>
</tr>
</body>
</html>
So there are two issue here: the first is in the way you try to access your email field's value in your "checkEmailField" function. You want to access the forms attribute of the document object, then your particular form, and finally the field you want. I'm not sure why you have "sender" in there too - I'm guessing that's a typo.
The second issue is that you have only this one button in your form. By default, and to be nice, browsers will then use this lone button as a "submit" button. When you hit the button, the form will submit no matter what. You want to prevent the submit if the email is empty. You do this by returning false in your "checkEmailField" function and by returning the function's return value in your onclick handler.
Try this version instead:
<html>
<head>
<title> Test File </title>
<script>
function checkEmailField()
{
if (document.forms.logIn.username.value.length < 1)
{
window.alert("Caution! You did not enter your Email");
return false;
}
return true;
}
</script>
</head>
<body bgcolor="pink">
<table align="center">
<tr>
<td align="center">
<b> <h1> Fill the following form to log in: </h1> </b>
<form name="logIn" method="post" action="sendMailScriptURL">
<table border="1">
<tr>
<td> <b> Email: </b> </td>
<td> <input type="text" name="username" size="50"> <br> </td>
</tr>
<tr>
<td> <b> Password: </b> </td>
<td> <input type="password" name="password" size ="50"> </td>
</tr>
<tr>
<td> <b> Logging in from: </b> </td>
<td>
<input type="radio" name="from" value="campus"> Campus <br>
<input type="radio" name="from" value="home"> Home
</td>
</tr>
<tr>
<td> <b> I am using: </b> </td>
<td>
<select name="OS" size="1">
<option value="Windows" selected> Windows
<option value="Linux/UNIX"> LINUX/UNIX
<option value="Mac OSX"> Mac OSX
</select>
</td>
</tr>
<tr>
<td> <b> I have: </b> </td>
<td>
<input type="checkbox" name="have" value="Computer"> Computer <br>
<input type="checkbox" name="have" value="Mobile"> Mobile <br>
<input type="checkbox" name="have" value="Printer"> Printer <br>
<input type="checkbox" name="have" value="Scanner"> Scanner
</td>
</tr>
<tr>
<td> <button onclick="return checkEmailField();"> Log In </button></td>
</tr>
</table>
</form>
</td>
</tr>
</body>
</html>
Hope this helps!
Place your javascript code before the ending of <body> tag, that should fix the problem of the js function call.
<html>
<head>
<title> Test File </title>
</head>
<body bgcolor="pink">
<table align="center">
<tr>
<td align="center">
<b> <h1> Fill the following form to log in: </h1> </b>
<form name="logIn" method="post" action="sendMailScriptURL">
<table border="1">
<tr>
<td> <b> Email: </b> </td>
<td> <input type="text" name="username" size="50"> <br> </td>
</tr>
<tr>
<td> <b> Password: </b> </td>
<td> <input type="password" name="password" size ="50"> </td>
</tr>
<tr>
<td> <b> Logging in from: </b> </td>
<td>
<input type="radio" name="from" value="campus"> Campus <br>
<input type="radio" name="from" value="home"> Home
</td>
</tr>
<tr>
<td> <b> I am using: </b> </td>
<td>
<select name="OS" size="1">
<option value="Windows" selected> Windows
<option value="Linux/UNIX"> LINUX/UNIX
<option value="Mac OSX"> Mac OSX
</select>
</td>
</tr>
<tr>
<td> <b> I have: </b> </td>
<td>
<input type="checkbox" name="have" value="Computer"> Computer <br>
<input type="checkbox" name="have" value="Mobile"> Mobile <br>
<input type="checkbox" name="have" value="Printer"> Printer <br>
<input type="checkbox" name="have" value="Scanner"> Scanner
</td>
</tr>
<tr>
<td> <button onclick="checkEmailField()"> Log In </button></td>
</tr>
</table>
</form>
</td>
</tr>
<script>
function checkEmailField()
{
if (document.username.sender.value.length < 1)
{
window.alert("Caution! You did not enter your Email");
}
}
</script>
</body>
</html>
document.username won't match anything, so you'll get an error: Cannot read property 'sender' of undefined. You'll have to look it up in the DOM using a traversal method. The easiest is probably to add an id to the username input field: input id="username" name="username" and then use document.getElementById (or you could use document.querySelector). Here's a quick jsFiddle: https://jsfiddle.net/tztyky6g/
Change the code document.username.sender.value.length < 1
To
var email = document.forms[0].elements["username"].value;
document object contains a forms property, Since in this HTML you have 1 form, so you can access it like document.forms[0] and then you need to access the username input which can be done using document.forms[0].elements["username"]
Also, you are not creating any property username on document object so if you try access document.username it will return undefined as no property name username exists in document object.
Complete Code:
<html>
<head>
<title> Test File </title>
<script>
function checkEmailField()
{
var email = document.forms[0].elements["username"].value;
if (email.length < 1)
{
window.alert("Caution! You did not enter your Email");
return false;
}
}
</script>
</head>
<body bgcolor="pink">
<table align="center">
<tr>
<td align="center">
<b> <h1> Fill the following form to log in: </h1> </b>
<form name="logIn" method="post" action="sendMailScriptURL">
<table border="1">
<tr>
<td> <b> Email: </b> </td>
<td> <input type="text" name="username" size="50"> <br> </td>
</tr>
<tr>
<td> <b> Password: </b> </td>
<td> <input type="password" name="password" size ="50"> </td>
</tr>
<tr>
<td> <b> Logging in from: </b> </td>
<td>
<input type="radio" name="from" value="campus"> Campus <br>
<input type="radio" name="from" value="home"> Home
</td>
</tr>
<tr>
<td> <b> I am using: </b> </td>
<td>
<select name="OS" size="1">
<option value="Windows" selected> Windows
<option value="Linux/UNIX"> LINUX/UNIX
<option value="Mac OSX"> Mac OSX
</select>
</td>
</tr>
<tr>
<td> <b> I have: </b> </td>
<td>
<input type="checkbox" name="have" value="Computer"> Computer <br>
<input type="checkbox" name="have" value="Mobile"> Mobile <br>
<input type="checkbox" name="have" value="Printer"> Printer <br>
<input type="checkbox" name="have" value="Scanner"> Scanner
</td>
</tr>
<tr>
<td> <button onclick="checkEmailField()"> Log In </button></td>
</tr>
</table>
</form>
</td>
</tr>
</body>
</html>
You shoudl change you function accessing to the element in proper way
function checkEmailField()
{
var myElem = document.getElementsByName('username');
if (myElem[0].value.length < 1)
{
window.alert("Caution! You did not enter your Email");
}
}
I would like to think that if you do something in the first id = "benodigheden" that there is something specific then a second rule is for id = "benodigheden" I also couldn't find anything on the internet. I think you need to have java but here is my knowledge still too small for.
I hope somebody can help me.
This is my HTML:
<form action="" method="post">
<legend>Neem contact op</legend>
<table>
<tr>
<td>
<label for="Naam">Naam: </label>
</td>
<td>
<input type="text" id="Naam" name="Naam" placeholder="Naam" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Email">Email :</label>
</td>
<td>
<input type="email" id="Email"name="Email" placeholder="Email" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Seizoen">Seizoen: </label>
</td>
<td>
<select name="Seizoen" id="Seizoen" required>
<option value="">Kies hier je seizoen</option>
<option value="Lente">Lente</option>
<option value="Zomer">Zomer</option>
<option value="Herfst">Herfst</option>
<option value="Winter">Winter</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="benodigheden1">Benodigheden:</label>
</td>
<td>
<input type="text" id="benodigheden1"name="benodigheden1" placeholder="Benodigheden" required="required" />
</td>
</tr>
<tr>
<td>
<label for="ingrediënten1">Ingrediënten:</label>
</td>
<td>
<input type="text" id="ingrediënten1"name="ingrediënten1" placeholder="Ingrediënten" required="required" />
</td>
</tr>
<tr>
<td>
<label for="stappenplan">Stappenplanm:</label>
</td>
<td>
<textarea name="stappenplan" id="stappenplan" cols="40" rows="5" placeholder="Stappenplan" required="required" /></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="Opmerking">Opmerking:</label>
</td>
<td>
<textarea name="Opmerking" id="Opmerking" cols="40" rows="5" placeholder="Opmerking" required="required" /></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div class="submit"><input type="submit" value="Verzenden" name="Verzenden" /></div>
</td>
</tr>
</table>
Here is a link to JSFiddle.
If I understand correctly you want an extra line (rule?) to appear once you enter text in it, and that this should happen for those inputs that have a sequence number in their id.
For this I suggest you include jQuery and add a script that detects input changes, and adds a new input if needed, with the next available sequence number:
$(document).on('keyup change input', 'input, textarea', function() {
if (!$(this).val().replace(/\s/g, '').length) {
// no text entered, so don't add line
return;
}
var id = $(this).attr('id');
// Extract name and linenumber from id
var res = id.split(/(\d+$)/);
if (res.length < 2) {
// No line number, so don't add line
return;
}
var newId = res[0] + (parseInt(res[1]) + 1);
if ($('#' + newId).length) {
// Not the last line, so don't add line
return;
}
// Add a line, and make it non-mandatory
$(this).clone()
.attr('id', newId).removeAttr('required')
.val('')
.insertAfter(this)
.before($('<br>'));
});
Although the above can be done in pure javascript it is much more cumbersome, and harder to deal with cross-browser issues.
You can see it work in this fiddle.
I need a message to pop up to tell the user that their enquiry has been submitted. The validation works, however I had to remove my old popup message as it was conflicting with the validation code. I need to know where to put the pop up message code in that exisiting javascript code that I am using to validate. The code i was using to make a pop up message was:
<script>
function EnquireButton() {
alert("Thank you for your enquiry!");
}
</script>
I'm sure it's simple enough, I have tried to implement it into the validation code, however it just reloads the page without showing the pop up.
HTML:
<form name="Contact_Us_Form" method="post" action="">
<table width="450px">
<p>One time Message</p>
<tr>
<td valign="top">
<label for="full_name">Full Name *</label>
</td>
<td valign="top">
<input type="text" name="full_name" maxlength="50" size="30" placeholder="First Name and Last Name" title="Your name here" required/>
</td>
</tr>
<tr>
<td valign="top">
<label for="landline">Landline Number *</label>
</td>
<td valign="top">
<input type="text" name="landline" maxlength="50" size="30" placeholder="(01206)" title=" YourLandline Number" required/>
</td>
</tr>
<tr>
<td valign="top">
<label for="Email">Email Adress *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30" placeholder="you#yourdomain.com" title="Your email" required/>
</td>
</tr>
<tr>
<td valign="top">
<label for="house_number">House Number *</label>
</td>
<td valign="top">
<input type="text" name="house_number" maxlength="30" size="30" placeholder="House Number" title="Your House Number" required/>
</td>
</tr>
<tr>
<td>
<label for="postal_code">Post Code *</label>
</td>
<td>
<input type="text" name="postal_code" maxlength="30" size="30" placeholder="CO5 " title="Your Postal Code" required/>
</td>
</tr>
<tr>
<td valign="top">
<label for="">Enquiry</label>
</td>
<td valign="top">
<textarea name="Enquiry" maxlength="1000" cols="28" rows="6" placeholder="Write your enquiry here."></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<button onclick="Enquirebutton()">Enquire</button>
<script>
$(document).ready(function (){
validate();
$('#full_name, #landline, #Email').change(validate);
});
function validate(){
if ($('#full_name').val().length > 0 &&
$('#landline').val().length > 0 &&
$('#Email').val().length > 0) {
$("input[type=Enquirebutton()]").prop("disabled", false);
}
else {
$("input[type=Enquirebutton()]").prop("disabled", true);
}
}
</script>
</td>
</tr>
</table>
</form>
Just add one property to form tag onsubmit="EnquireButton()"
that is
<form name="Contact_Us_Form" method="post" action="" onsubmit="EnquireButton()">
First, make your button a submit one:
<button type="submit">Enquire</button>
Then you can either use the onclick="Enquirebutton()" in your submit button or the onsubmit="Enquirebutton()" in your form.
Take a look at onsubmit Event for more information.