|
JavaScript - Remember Form Inputs On Blur, But Excluding One Field
I have a JavaScript that remembers the values of a form by creating cookies for each input element onblur.
I cannot figure out though how to exclude one input field from being remember. It would be document.getElementsByTagName('input')[15] Every time I try to add an if/else statement in using that line, the script doesn't work altogether. Code: window.onload = function() {
rememberFormInputs('rma', 'input-');
}
/**
* Set a cookie
* @param string cookie name
* @param string cookie value
* @param string cookie expiration counter in days
* @param string cookie path
* @param string cookie domain
* @param bool secure?
*/
function setCookie(name, value, expires, path, domain, secure) {
var today = new Date();
today.setTime(today.getTime());
if (expires) {
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date(today.getTime() + (expires));
document.cookie = name+"="+escape(value) +
((expires) ? ";expires="+expires_date.toGMTString() : "") +
((path) ? ";path=" + path : "") +
((domain) ? ";domain=" + domain : "") +
((secure) ? ";secure" : "");
}
/**
* Get a cookie value
* @param string cookie name
*/
function getCookie(name) {
var start = document.cookie.indexOf(name + "=");
var len = start + name.length + 1;
if ((!start) && (name != document.cookie.substring(0, name.length))) {
return null;
}
if (start == -1) return null;
var end = document.cookie.indexOf(";", len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len, end));
}
/**
* Remebers form inputs after you fill them in
* @param string form id to remember fields
* @param string a prefix to prepend to all cookie names. (prevent naming conflicts)
*/
function rememberFormInputs(form_id, prefix) {
var form = document.getElementById(form_id);
var els = document.getElementsByTagName('input');
for (var i = 0; i < els.length; i++) {
var el = els.item(i);
if (el.type == 'text') {
el.onblur = function() {
var name = this.name;
var value = this.value;
setCookie(prefix + name, value, 90);
};
var old_value = getCookie(prefix + el.name);
if (old_value && old_value != '') {
el.value = old_value;
}
}
}
}
Does anyone have a solution? I would really appreciate it :] Similar TutorialsPlease assist, I have the following code to remember form inormation but it does not seem to work. Probably something stupid. Code: <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Contact Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="yorkie.css" type="text/css" />
<script type="text/javascript">
/* <![CDATA[ */
// Confirm resetting of forms.
function confirmReset() {
var resetForm = confirm("Are you sure you want to reset the form?");
if (resetForm == true)
return true;
return false;
}
// If box clicked value within disappears
function Focus(element) {
if (element.value == element.defaultValue) {
element.value = '';
}
}
// If nothing typed and box onblur the default value is restored within
function Blank(element) {
if (element.value == '') {
element.value = element.defaultValue;
}
}
// Submission of Contact Form Verified
function verifySubmission() {
var retValue = true;
if (document.forms[2].email.value == "Enter Email Address"
|| document.forms[2].firstname.value == "Enter First Name"
|| document.forms[2].lastname.value == "Enter Last Name"
|| document.forms[2].telephone.value == "Enter Contact number") {
window.alert("You did not fill in one of the following required fields: First Name, Last Name, Email Address, or Telephone Number.");
retValue = false;
}
return retValue;
}
// Email address verified as a valid email address
function validateEmail(formObject) {
var email = formObject.value;
var emailCheck = /^[_\w\-]+(\.[_\w\-]+)*@[\w\-]+(\.[\w\-]+)*(\.[\D]{2,3})$/;
if (emailCheck.test(email) == false) {
window.alert("The e-mail address you entered does not appear to be valid.");
formObject.value = formObject.defaultValue;
return false;
}
formObject.value = email.toLowerCase();
return true;
}
// Telephone number verified as a valid 10 digit number with no alpha characters
function verifyPhone(number) {
var phone = number.value;
var phoneCheck = /^(\d{10})$/;
if(phoneCheck.test(phone) == false) {
window.alert("The telephone number you entered does not appear to be valid.");
number.value = number.defaultValue;
return false;
}
return true;
}
// Show additional contact form details onclick of yes radio button
function showDiv() {
document.getElementById('breeders').style.visibility = 'visible';
}
// Hide certain contact form info onclick of No radio button
function hideDiv() {
document.getElementById('breeders').style.visibility = 'hidden';
}
// SAVE FORM INFORMATION FOR THE NEXT VISIT
function saveSelections(frm) {
var setvalue;
var fieldType;
var index;
var formname = frm.name;
// CookieExpiry in 30 days.
var today = new Date();
var exp = new Date(today.getTime()+30*24*60*60*1000);
var string = "formname=" + formname + "|";
var cookieName = formname;
var n = frm.length;
for (i = 0; i < n; i++) {
e = frm[i].name;
fieldValue = frm[i].value;
fieldType = frm[i].type;
// Radio Buttons
if (fieldType == "radio") {
for (x=0; x < frm.elements[e].length; x++) {
if (frm.elements[e][x].checked)
{
index = x
}
}
string = string + index + "\|";
}
// Text, Textarea, and dropdowns
if ((fieldType == "text") || (fieldType == "textarea") || (fieldType == "select")) {
string = string + frm.elements[e].value + "\|";
}
// Checkboxes
if (fieldType == "checkbox") {
if (frm.elements[e].checked==true) {
var setvalue = "1";
}
if (frm.elements[e].checked==false) {
var setvalue = "0";
}
string = string + setvalue + "\|";
}
// Hidden field
if (fieldType == "hidden") {
string = string + frm.elements[e].value + "\|";
}
}
setCookie(cookieName, string, exp);
}
// Load Form Fields from saved cookie
function loadSelections(frm) {
var e;
var z;
var x;
var cookieName;
var fieldArray;
var fieldValues;
var fieldValue;
var formname = frm.id;
// Retrieve form elements from cookie and split into array.
cookieName = formname;
fieldValues = getCookie(cookieName);
fieldArray = fieldValues.split("\|");
var n = frm.length;
for (i = 0; i < n; i++) {
e = frm[i].name;
z = i;
z++;
var fieldType = frm[i].type;
var fieldValue = fieldArray[z];
// Radio Buttons
if (fieldType == "radio") {
x = fieldValue;
frm.elements[e][x].checked = true;
}
// Text, Textarea, and dropdowns
if ((fieldType == "text") || (fieldType == "textarea") || (fieldType == "select")) {
frm.elements[e].value = fieldValue;
}
// Checkboxes
if (fieldType == "checkbox") {
var fld_checkbox = fieldValue;
if (fld_checkbox == "1") {
frm.elements[e].checked = true;
}
}
// Hidden fields
if (fieldType == "hidden") {
frm.elements[e].value = fieldValue;
}
}
}
// COOKIE FUNCTIONS
function setCookie(name, value, expires) {
document.cookie= name + "=" + escape(value) + ((expires) ? "; expires=" + expires.toGMTString() : "");
}
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else {
begin += 2;
}
var end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
return unescape(dc.substring(begin + prefix.length, end));
}
/* ]]> */
</script>
</head>
<body class="contact" onload="var begin=setInterval('changeBanner()',9000); currentClock(); currentDate(); document.getElementById('breeders').style.visibility = 'hidden'; " onunload="saveSelections(document.forms[0])">
<table width="92%">
<form action="mailto:lynette@sayorkies.co.za, subject=Contact Form" method="post" enctype="text/plain" onsubmit="return verifySubmission()" onreset="return confirmReset();">
<table class="center" cellpadding="5" border="1">
<!-- This enters a horizontal line -->
<tr><td><hr /></td></tr>
<!-- This is for the personal information -->
<tr><td><strong>Tell us who you a </strong></td></tr>
<tr><td><input type="text" name="firstname" size="25" maxlength="35" value="Enter First Name" onfocus="Focus(this);" onblur="Blank(this);" /> *
<input type="text" name="lastname" style="margin-left: 52px;" size="25" maxlength="35" value="Enter Last Name" onfocus="Focus(this);" onblur="Blank(this);" /> *</td></tr>
<!-- This is for the contact information -->
<tr><td><strong>Your Contact details:</strong></td></tr>
<tr><td><input type="text" name="email" size="30" maxlength="60" value="Enter Email Address" onfocus="Focus(this);" onblur="Blank(this); validateEmail(this)" /> *
<input type="text" name="telephone" style="margin-left: 20px;" size="20" maxlength="10" value="Enter Contact number" onfocus="Focus(this);" onblur="Blank(this); verifyPhone(this)" /> * </td></tr>
<!-- This is where you enter your message also select what type of message-->
<tr><td><strong>Your Message:</strong></td></tr>
<tr><td align="left">What is your message about?<br />
<input type="radio" name="type" value="compliment" /> Compliment
<input type="radio" name="type" value="complaint" /> Complaint
<input type="radio" name="type" value="general" checked="checked" /> General
<input type="radio" name="type" value="enquiry" /> Enquiry
<input type="radio" name="type" value="feedback" /> Feedback</td></tr>
<tr><td align="center"><textarea name="message" rows="6" cols="45" onfocus="Focus(this);" onblur="Blank(this)">Enter your message here...</textarea></td></tr>
<!-- Additional information -->
<tr><td align="left">Are you looking to purchase a Yorkie puppy?<br />
<input type="radio" name="purchase" value="yes" /> Yes
<input type="radio" name="purchase" value="no" checked="checked" /> No</td></tr>
<tr><td align="left">Do you own a Yorkie?<br />
<input type="radio" name="owner" value="yes" onclick="showDiv()" /> Yes
<input type="radio" name="owner" value="no" checked="checked" onclick="hideDiv()" /> No<br />
<!-- If answer is no above the below questions are hidden, if yes then they appear -->
<div id="breeders">
How many? <select name="qnty" size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5+</option></select>
Are you a breeder? <input type="radio" name="breeder" value="yes" /> Yes
<input type="radio" name="breeder" value="no" checked="checked" /> No</div></td></tr>
<!-- Subscriptions -->
<tr><td align="left">Do you wish to subscribe to the following?<br />
<input type="checkbox" name="subscribe" value="letter" checked="checked" /> Monthly Newsletter<br />
<input type="checkbox" name="subscribe" value="pups" /> Notification of a new litter<br />
<input type="checkbox" name="subscribe" value="updates" /> Notification of site updates<br />
<input type="checkbox" name="subscribe" value="register" /> Registrations</td></tr>
<!-- Add a picture file -->
<tr><td align="left">Upload your favourite Yorkie photo for the Picture of the Month.<br />
<input type="file" name="upload" accept="image/gif, image/jpeg" size="30" style="margin-left: 15px; margin-top:5px;" /></td></tr>
<!-- This enters a horizontal line -->
<tr><td><hr /></td></tr>
<tr><td align="center">Required fields marked with *</td></tr>
<!-- Buttons to clear the form or to submit the form -->
<tr><td align="center"><input type="reset" value="Clear the Form" />
<input type="submit" value="Send your message" /></td></tr>
</table></form<script type="text/javascript">loadSelections(document.forms[0]);</script>
</body>
</html>
Console Error: Unable to get value of the property 'split': object is null or undefined for this line: Code: fieldArray = fieldValues.split("\|");
I am hitting a brick wall, dont know what to do? I have taken lots of programming classes, but am now taking my first web programming class and I am getting sooooo frustrated. I have done lots of looking on the web, but am still unable to figure out why I can not make this simple assignment work. I just need some help with getting something to happen when the user hits submit. What I really want is for a new page to appear with the message using the user inputs, but I would be very happy with just getting the input to appear in the text area that I put in or even for the alert box to pop up with the input. I can work on validation code after I can get some kind of output to work..... I posted everything (due to it's small size), including my attempts to see what is working. Here is the code I have written: Code: <html>
<head>
<title>Name and Age</title>
<script type="text/javascript">
<!--
function Submit()
{
alert("Does this do anything?");
var name = document.forms['NameAge'].elements[0];
var year = document.forms['NameAge'].elements[1];
var date = new Date();
var curr_yr = date.GetFullYear();
var age = (curr_yr - year)
alert("<h3>Hello, " + name + ", you are " + age + " years old."</h3>");
document.close()
/*if (year > curr_yr)
{
alert("You must enter a valid year!");
}
else
{
document.writeln("<h3>Hello, " + name + ", you are " + age + " years old."</h3>");
document.close()
}*/
document.forms['NameAge'].output.value = "<h3>Hello, " + name + ", you are " + age + " years old."</h3>";
}
-->
</script>
</head>
<body>
<h1>Name and Age</h1>
<form name="NameAge" onsubmit="Submit()">
<p align="left">Please Enter Your Name:
<input id="name" maxlength="32" size="24" />
</p>
<p align="left">Please Enter the Year You Were Born:
<input id="year" maxlength="4" size="24" />
</p>
<input type="submit" value="Submit" /><br />
<textarea cols="10" rows="3" name="output"></textarea>
</form>
</body>
</html>
I need to style a checkbox, so I made it into two images behind a form with hidden inputs. On click the form takes input from the other form into the hidden fields and POSTs it. Then I use PHP to grab that POST and put it back into the original form. Here are some snippets of what I am trying to do: First form input: PHP Code: <input type="text" name="email" id="email1" value="<?php if(isset($_POST['email2'])) { echo $_POST['email2']; } ?>" style="height:25px;width:270px;" /> Second form input: PHP Code: <input type="hidden" name="email2" id="email2" /> Second form submit image button: PHP Code: <input type="image" src="img/Boxchecked.jpg" value="submit" onclick="fname2.value = fname1.value; lname2.value = lname1.value; email2.value = email1.value" width="20" height="20" /> The forms work fantastic on everything but IE, which does not save the field values. How do I fix the onclick event to save them in IE? Help is much appreciated. I have many radio buttons associated with questions on a page with Yes/No options. Depending on if Yes or No is selected (varies with question), I need to prevent the user from going off of the page and somehow "mark" the questions that are answered "incorrectly/not preferred". I could probably put validation on each individual radio button and display a message when going off the page, but I'm looking to make this more dynamic. One idea I had was to put a function on each radio button's onChange event and build an array using .push() to construct the array with all the radio button IDs that are answered incorrectly. I ran into problems when deleting from the array when the radio button was changed back to a correct response though. What may be best is to somehow indicate which radio buttons need looked at when leaving the page and then run a function or case statement over all the radio buttons to build an object? I'm not sure what approach to take. Any thoughts are appreciated. Thanks. I want to make a search form where inputs only appear if a certain selection has been made. For example the user selects "Green" then the input "X" appears, and if the user clicks "Black" then input "Y" appears. How can this be done? If so, can someone give me a basic example in code that I can use to copy off?
Hi, please can someone help I wanted to blur the text in my formfield when a user clicks on it?! Code: <script language="javascript">
function cbevent()
{
var xx = document.loginform.myusername.blur();
}
</script>
<form name="loginform">
<input type="text" name="myusername" onMouseClick="cbevent()" value="Enter your email address here" />
Hi all, A piece of code I have been working on has a small issue with bluring off a div and I can't working out why. Basically what I do is append divs to the DOM and on double click I make them editable and when I blur they are none editable and I append a new div into the document. I have quickly knock up a small piece of code to illustrate the problem ... Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style text="text/css">
.dropArea {
color:#757575;
font-weight:bold;
display:block;
margin:0px;
border: 1px dashed #999999;
background-color:#DDDDDD;
left:10px;
right:10px;
/*width:auto;*/
text-align:center;
line-height:20px;
}
.textEditArea {
display:block;
margin-bottom:10px;
border: 1px dashed #999999;
background-color:inherit;
left:10px;
right:10px;
padding:5px;
width:auto;
}
</style>
<script>
function makeEditable(activeZone) {
if (activeZone.className == "dropArea") {
activeZone.innerHTML = "";
}
activeZone.contentEditable = true;
activeZone.className = "textEditArea";
}
function doneEditing(activeZone) {
// if no HTML added, make it a drop zone
if (trim(activeZone.innerHTML) == "") {
activeZone.className = "dropArea";
activeZone.innerHTML = "Drop items from or double click to add text";
} else if (activeZone.addDropZoneAlready == undefined) {
// add a new drop zone underneath
activeZone.title = "Double click to edit text";
activeZone.addDropZoneAlready = "true";
activeZone.zoneType = "textDisplay";
addNewDropZone();
}
activeZone.contentEditable = false;
}
function addNewDropZone() {
var dropArea = document.createElement("div");
dropArea.className = "dropArea";
var appendTo = document.body;
appendTo.appendChild(dropArea);
dropArea.ondblclick = function () { makeEditable(dropArea); };
dropArea.onblur = function () { alert('done'); doneEditing(dropArea); };
dropArea.innerHTML = "Drop items or double click to add text";
}
</script>
</head>
<body onload="addNewDropZone();">
<div onDblClick="this.contentEditable=true;" onBlur="this.contentEditable=false;alert('Done!');" style="background-color:#C0C0C0; width: 500px; height:200px;"></div>
</body>
</html>
The div in the body already works as expected, it alerts "Done!" however divs I append into the document have to blur twice before the onblur fires? I just don't undestand why its doing it. Anybody have any ideas as to what is happening? Thanks, Dale I have been working on this code for days and I cannot get it right!!! Can anyone please give me any pointers. It should have an error message that pops up on same line as text boxes when into is not entered property! Thanks in advance! NewBanks <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> function validate(){ var errorList = new Array(); var eMail = document.getElementById("email").value; var passwrd = document.getElementById("password").value; var cPassword = document.getElementById("confirmPassword").value; var secQuest = document.getElementById("securityQuestion").value; var secAns = document.getElementById("securityAnswer").value; var regEx = /^\s*[\w\\+_]+(\.[\w\\+_]+)*\@[\w\\+_]+\.[\w\\+_]+(\.[\w\\+_]+)*\s*$/; if(!regEx.test(eMail)){ errorList[errorList.length] = ("You must enter a valid email address!<br/>"); valid = false; } if(passwrd == "" || passwrd.length <6){ errorList[errorList.length] = ("Your password must be 6 characters long! <br/>"); valid = false; } if(passwrd != cPassword){ errorList[errorList.length] = ("Passwords do not match! <br/>"); valid = false; } if (secAns == ""){ errorList[errorList.length] = ("Please enter your Security Answer! <br/>"); valid = false; } if(errorList.length > 0){ for(var i = 0; i < errorList.length; i++){ document.getElementById("errors").innerHTML += errorList[i]; } return false; } else return true; window.onload = function() { 0(); } } </script> </head> <body> <form id="login" action="confirm.html"method="get" onsubmit="return validate();"/> Email: <input type="text" name="email" id="email" onblur="validate(this);" /> <br/><span id = "Invalid Email"></span> Password: <input type="text" name="password" id="password" onblur="validate(this);" /> <br/><span id = "Incorrect Password"></span> Confirm Password: <input type="text" name="password" id="confirmPassword" onblur="validate(this);" /> <br/><span id = "Invalid password"></span> Security Question: <select id = "securityQuestion" onblur="validate(this);"> <option value= "maiden" >What is your mother's maiden name </option> <option value= "animal"> What is your favorite animal </option> </select> <br/> <input type="text" name="securityAnswer" id="securityAnswer" onblur="validate(this);" /> <br/><span id = "Security Answer does not match"></span> <p><input type = "Submit" /></p> <span id = "errors"> </span> </form> </body> </html> Hi, I have do a calculation when an user enters the value in the textbox during onblur event. But during the onblur event I need to capture the tabkey (keyCode) and if it is 9 do the calculate else not do that. But the problem is we cannot detect a keyCode for tab in onblur. But for sure I need to use onblur in this case and cannot use onkeydown as this will have impact on the UI screen for this particular scenario. How to go about this? in the textbox I am calling onblur = "test()" Please provide a helping hand. Thanks. I have these "editable" divs in my document. When you click them, a text box comes up and you type something and push enter. It changes what's in the div. There is also a blur event associated with the text box. When the user tabs or clicks away, it fires the blur event. Here lies the problem. I have other elements on the page that are clickable. I don't want those clickable things to fire their events if the user is clicking away from the text box, ie. the blur event. This isn't a problem is the user pushes tab, for instance. So my thought was that if i know how the user blurred (via keyboard, or clicking) i could take the appropriate action. Any ideas? Hi guys, I have the following code that should hide the dropdown part of a select box when clicked (don't ask why, this is part of a separate project). Please see a simple example below: Code: <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<select name="select1" id="select1" onfocus="$(this).blur();">
<option value=""></option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
This all works fine in IE and FF but in chrome the options are still shown after clicking the element. I've been racking my brains for hours on this and, no matter what method I use, I can't get this to work correctly in Chrome. Can anyone suggest a way I can get this to work? Thanks in advance! I've set up a mock registration form page so I can learn a bit about javascript's form validation. (newbie) I want to try to attempt to style the border of a form field green when the user enters the correct info into the form text field and red on all other fields if the user doesnt enter any info into them. When i test it, enter the right info into the username field, leave the others blank, and hit the submit button it styles the username field green ok but it doesnt make the next fields (password and so on) red. Could someone please explain what I am doing wrong? here is my code so far... Note: just for testing purposes I've put return false on everything so it displays a message when everythings ok. Code: ....
<script type="text/javascript">
window.onload = function() {
document.forms[0].username.focus();
}
function validate(form)
{
var form = document.getElementById("reg");
var e = document.getElementById("error");
e.style.background = "red";
for(var i = 0; i < form.elements.length; i++)
{
var el = form.elements[i];
if(el.type == "text" || el.type == "password")
{
if(el.value == "")
{
e.innerHTML = "Please fill in all fields!";
el.style.border = "1px solid red";
el.focus();
return false;
} else {
el.style.border = "1px solid green";
return false;
}
}
}
var un = form.username;
un.value = un.value.replace(/^\s+|\s+$/g,"");
if((un.value.length < 3)|| (/[^a-z0-9\_]/gi.test(un.value)))
{
e.innerHTML = "Only letters,numbers and the underscore are allowed (no spaces) - 3-16 characters";
un.focus();
return false;
}
var pw = form.password;
pw.value = pw.value.replace(/^\s+|\s+$/g,"");
if((pw.value.length < 3) || (/[^a-z0-9]/gi.test(pw.value)))
{
e.innerHTML = "Only letters and numbers are allowed (no spaces) - 3-16 characters";
pw.focus();
return false;
}
e.innerHTML = "You filled in all the fields, well done!";
e.style.background = "green";
return false;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>My Cool Website</h1>
</div>
<div id="content">
<div class="padding">
<h2>Registration</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<form id="reg" action="#" method="post" onsubmit="return validate(this)">
<div id="error"></div>
<div><label for="username">Username</label></div>
<div><input type="text" name="username" id="username" size="30" maxlength="16" /></div>
<div><label for="password">Password</label></div>
<div><input type="password" name="password" id="password" size="30" maxlength="16" /></div>
<div><label for="c_password">Confirm Password</label></div>
<div><input type="password" name="c_password" id="c_password" size="30" maxlength="16" /></div>
<div><label for="email">Email address</label></div>
<div><input type="text" name="email" id="email" size="30" maxlength="200" /></div>
<div><label for="c_email">Confirm Email address</label></div>
<div><input type="text" name="c_email" id="c_email" size="30" maxlength="200" /></div>
<div><label for="firstname">First name</label></div>
<div><input type="text" name="firstname" id="firstname" size="30" maxlength="100" /></div>
<div><label for="surname">Surname</label></div>
<div><input type="text" name="surname" id="surname" size="30" maxlength="100" /></div>
<div><label for="gender">Gender</label></div>
<div>
<div><input type="radio" name="gender" id="gender" value="m" checked="checked" />Male</div>
<div><input type="radio" name="gender" value="f" />Female</div>
</div>
<div><input type="submit" value="Register" name="submit" /></div>
</form>
</div>
</div>
<div id="footer">
<p>Copyright © 2009 My Cool Website</p>
</div>
</div>
</body>
</html>
How can I add a form field value to a url. I tried the below but it no work. Code: href="index2.php?q=4&id=+document.theForm.lists.value+&picklist" function checkValidFormInput() { if (document.getElementsByName('customerName').value != '') { document.getElementById('customerNameImg').innerHTML = '<img alt="Valid" src="images/greenTick.png">'; } else { document.getElementById('customerNameImg').innerHTML = '<img alt="Invalid" src="images/redX.png">'; } if (document.getElementsByName('customerEmail').length > 0) { document.getElementById('customerEmailImg').innerHTML = '<img alt="Valid" src="images/greenTick.png">'; } else { document.getElementById('customerEmailImg').innerHTML = '<img alt="Invalid" src="images/redX.png">'; } } I need to learn how to clear form fields when a user clicks on them. Here is the site in question: http://www.yourvancouvermortgagebroker.ca/apply They used to work, but then I changed the field value and now it doesn't work on some of the fields (whichever ones I changed). Here is a link to the .js file: http://www.yourvancouvermortgagebroker.ca/js/apply.js Is there a way to give an input or textarea field the focus and set the focus to begin right at the end of the current text in the field?
Hi there, I have a html form, and I need it so that when a user clicks a button, it adds a field into the form. I also need it to write <td></td> around the new field, and I need it to write this in a specific part row of a table. How would I go about doing this? I've tried searching for the past two hours, but no luck. Many thanks, I appreciate it, Jason I have a form which has various fields which are arrays (so the name of a field may be myField[]). The reason for this is that the form has add buttons to add another field or fields for the purpose of entering another email address, etc., to send invitations and do other things. The problem that I am running into is how to access the individual fields in an array of fields inside javascript to do form validation. So if I have an email address field name emailAddress[], and using the add button, the user of my site adds 3 other copies of the emailAddress[] field, I want to then do form validation onSubmit to ensure those email address are valid using standard procedures. However, inside the javascript code, how do I access the individual fields that make up emailAddress[]? I just cannot find anywhere online the proper way to get at these values. If anyone can help me, I would greatly appreciate it. Happy Holidays Hi! I use the :: Form field Progress Bar from DynamicDrive: Form field Progress Bar Now I trided to change the text when the textarea is full "Limit:100%" to "Your max. characters is reached" I trided it but with no luck. This is the main code.. Code: <script type="text/JavaScript">
function textCounter1(field,counter,maxlimit,linecounter) {
// text width//
var fieldWidth = 137;
var charcnt = field.value.length;
// trim the extra text
if (charcnt > maxlimit) {
field.value = field.value.substring(0, maxlimit);
}
else {
// progress bar percentage
var percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ;
document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+"px";
document.getElementById(counter).innerHTML="Limiet: "+percentage+"%"
// color correction on style from CCFFF -> CC0000
setcolor(document.getElementById(counter),percentage,"background-color");
}
}
function setcolor(obj,percentage,prop){
obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
}
</script>
This is the place where the text is set. Code: ((fieldWidth*percentage)/100)+"px"; document.getElementById(counter).innerHTML="Limiet: "+percentage+"%" Help would be highly appreciated ! greetings Jardin |
|||||||