JavaScript - Form Field W/ ✔ Graphic

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

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

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

Hey,

I want to create a nice Info Graphic for Web, something like this one:



Is possible to do it with JS and style with CSS?

Is there any library to generate this graphics and allow to style it with CSS?

I've looked at google charts api but I think that I'm not able to style it as I want.

Let me know if is there any other solution to create this (without flash).

Thanks

use in form fields - onBlur="chkalpha(this)"

function chknum(field) {
var valid = "0123456789";
var ok = "yes";
var temp;
for (var i=0; i<field.value.length && ok == "yes"; i++) {
temp = "" + field.value.substring(i, i+1);
if (valid.indexOf(temp) == "-1") { var ok = "no"; }
}
if (ok == "no") {
alert("Invalid entry! Only numeric data is accepted!");
field.value=""; field.focus();
field.select();
}
}

function chkalpha(field) {
var valid = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ ";
var ok = "yes";
var temp;
for (var i=0; i<field.value.length && ok == "yes"; i++) {
temp = "" + field.value.substring(i, i+1);
if (valid.indexOf(temp) == "-1") { var ok = "no"; }
}
if (ok == "no") {
alert("Invalid entry! Only alphabetic data is accepted!");
field.value=""; field.focus();
field.select();
}
}

function chkalphanum(field) {
var valid = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ@_-. ";
var ok = "yes";
var temp;
for (var i=0; i<field.value.length && ok == "yes"; i++) {
temp = "" + field.value.substring(i, i+1);
if (valid.indexOf(temp) == "-1") { var ok = "no"; }
}
if (ok == "no") {
alert("Invalid entry! Only alphanumeric data is accepted!");
field.value=""; field.focus();
field.select();
}
}

I need help troubleshooting javascript I am using to concatenate two fields in a form and populating a hidden field with them.

Here's the javascript:
<script type="text/javascript">
function combName() {
var fname = document.forms[0].fname.value;
var lname = document.forms[0].lname.value;
document.forms[0].name.value = fname + " " lname;
}
</script>

Here are the form fields:
<input id="fname" name="fname" type="text">
<input id="lname" name="lname" type="text" onKeyUp="combName()">
<input name="name" type="hidden" id="name" size="20" maxlength="80">
<input name="Submit" type="submit" id="OnSubmit" value="OnSubmit">

What am I doing wrong? Thanks.

Hello,

First off thank you for looking at my post. Please forgive me if I do something incorrectly here. I have never posted in a forum before.
You are very kind to assist me in this problem.

I wish to send the javascript calculated value in a form from one page to another page form. I just need the one value sent. The value is "answer: in the code below. I would like to send it to a form page called "answer.html"

I am not a computer person, and I am doing this in frontpage. I do not know how to write java or anything, I just copied this from a free script site and am trying to use it.

Thank you once again for your kindness and patience with me. Thanks to all you experts!

Michael

here is the code I have.
---------------------------------------------

Code:

<table cellspacing=0 width=427 
   height=1 bgcolor="#FFFFFF" style="border-collapse: collapse" cellpadding="0" border="0">
  <tr>
    <td width="634" nowrap height="1"> 

<script language="JavaScript">
function findcalculatorcalculate(form) {
a = form.debt.value - 0;
b = form.faith.value - 0;
d = a / b;
form.answer.value = Math.round (d);
}</script>


                <p align="right" style="margin-left: 3; margin-right: 5"></p>
                <form name="form" style=" margin-right: 5; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1" action="--WEBBOT-SELF--" method="POST">
                  <p align="right">
                  <font style="font-size: 11pt; font-weight:700">Input amount <input class="regfont" size="13" type="text" name="debt"></font><span style="font-size: 11pt; font-weight:700"> <br>
                  divide by
                  </span><font style="font-size: 11pt; font-weight:700"><input class="regfont" size="6" type="text" name="faith"></font><br>
                  <b><font color="#FF0000" size="5">&nbsp;</font></b><font style="font-size: 11pt"><input onclick="findcalculatorcalculate(this.form)" value="CLICK HERE TO CALCULATE" type="button" style="border-style:solid; border-width:2; font-weight: bold; font-family:Arial"><br>
                  <b>ANSWER</b>
                  </font></font>
<INPUT NAME="answer" SIZE="5" VALUE=""><br>
<INPUT TYPE="BUTTON" onClick="nextpage()" VALUE="Go to the next page"></p>
                  </p>
                  </form>
    </td>
  </tr>
  </table>
<p align="right" style="margin-left: 3; margin-right: 5">I would like ANSWER 
field to 
pre populate the calculated amount on the second page titled &quot;answer.html&quot; THANK 
YOU!</p>

------------------------
Thank you again for helping me in plain language because I do not have the skills that all of you do.

I have been staring at this code for too long and need some help. I want to pass a value received through the Url to another screen with new data by a form using the method="get". I have tried several different ways, my latest attempt was to use a hidden field hoping that would add to the url string but it isn't working.

Thank you in advance

Here is my code, its not pretty
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Field Location</title>
<link rel="stylesheet"
	href="css/INTERPRETING_TR_CONTROL_ELECTRICAL_READINGS.css"
	type="text/css" media="screen" />
</head>
<body>

<div>
<form id="form1" name="form1" method="get" action="./nameplateInformation.html">
<h3>Where is this field located?</h3>
<select name="fieldValue" id="fieldValue"
	title="Where is this field located">
	<option value="field1">Inlet Field</option>
	<option value="field2">Second Field</option>
	<option value="field3">Third Field</option>
	<option value="field4 ">Outlet Field</option>
</select>

<script type="text/javascript">
(function(){ // Import GET Vars :D 
	   document.getVars = [];
	   var urlHalves = String(document.location).split('?');
	   if(urlHalves[1]){
	      var urlVars = urlHalves[1].split('&');
	      for(var i=0; i<=(urlVars.length); i++){
	         if(urlVars[i]){
	            var urlVarPair = urlVars[i].split('=');
	            document.getVars[urlVarPair[0]] = urlVarPair[1];
	         }
	      }
	   } 
	})();
 prceptType = document.getVars.preceptType;
 document.write('<input type="hidden" name="preceptType" value='+preceptType+' />'); 
 </script>  

<input type="submit" value="Submit" />
<input type="button" name="backButton" value="Back"
	onclick="parent.location = './welcome.html'" /> <input type="button"
	name="homeButton" value="Home"
	onclick="parent.location = '../index.html'" /></form>
</div>
</body>
</html>

I need when I click to type into a form field, I need an onclick event to show another form field. I would assume this would be a hiddin div or an on click event to post another form field.

So in theory just because I actually clicked into one form field...another form field shows up underneath it...can anyone help...

Hello,

I have several event handlers on my page; one of them doesn't work. I'll post them all here, indicating how they are executed:

#1: Works
[CODE]<script type="text/javascript">
function combName() {
var fname = document.forms[0].fname.value;
var lname = document.forms[0].lname.value;
document.forms[0].name.value = fname + " " + lname;
}
</script>[CODE]
NOTE: The "lname" field uses "onKeyUp" to make the script run. A hidden field named "name" is populated with the concatenation.

#2: Works
(this script is too long to post; it is a validation script and runs via the "onSubmit" in the form tag.)

#3: Doesn't Work
[CODE]<script type="text/javascript">
function combPrograms()
{
document.forms[0].00N70000002WNax.value = "1st Choice: " + document.forms[0].sf1.value + document.forms[0].alameda1.value + document.forms[0].sanmateo1.value + document.forms[0].marin.value + document.forms[0].cc1.value + "2nd Choice: " + document.forms[0].sf2.value + document.forms[0].alameda2.value + document.forms[0].sanmateo2.value + document.forms[0].marin2.value +
document.forms[0].cc2.value;
}
</script>[CODE]
Note:
1. Not all of the values for Choice 1 and Choice 2 are populated.
2. For that reason, one of the later, unrelated text fields in the form has "onKeyUp="combPrograms()" to run the event.
3. A hidden field named 00N70000002WNax is populated with the concatenation.

Any help is much appreciated!

Using the url test.html?a=john&b=doe

I am using the following code:

<script type="text/javascript" language="javascript">
function getUrlVars() {
var map = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi;
function(m,key,value) { map[key] = value; }); return map;
}
var john=getUrlVars(map[a]);
alert (getUrlVars(map[a]))
alert (john)
</script>

I can't seem to get an alert to show me anything. The eventual result is not an alert, but a document.write to post the url contents to various form fields for firstname= and lastname= etc.

I am really having a hard time using the document.write function, and am not sure how to employ it, whether in the same script statement or in a separate script in the body.

hi all, i was hoping somebody could help me out.

i'm trying to write a code that generates a random number between 1 and 9999 on page load, concatenates it with "pwn" at the start, and adds it to a disabled form text input box. this is the code i have below, but it's not working at all. any help would be greatly appreciated.

in the head section
Code:

<script type="text/javascript">
				function createcode()
				{
					var randomnumber = Math.floor(Math.random()*10000);
					var homecode = 'pwn' + randomnumber;
				}
			</script>

my body tag
Code:

<body onload="createcode()">

and the form field itself
Code:

<input type="text" name="homename" id="homename" disabled="disabled" />
										<script type="text/javascript">
											document.getElementByID("homename").value = homecode;
											document.write(homecode);
										</script>

thanks in advance.