[ScHwErV]

Ok, I have this form, and I cant get it to do what I want. Its a web form with a bunch of fields. Some of the fields are redundant, but necessary. To keep from having to fill in the same data over and over, I added some javascript to do the job for me. Fill in one field, click the copy link, it copies to the correct fields. The code looks like this.
[codebox]document.getElementById('2ndStreet').value=document.getElementById('1stStreet').value;
document.getElementById('2ndCity').value=document.getElementById('1stCity').value;
document.getElementById('2ndState').value=document.getElementById('1stState').value;
document.getElementById('2ndZip').value=document.getElementById('1stZip').value;
document.getElementById('2ndPhone').value=document.getElementById('1stPhone').value;[/codebox]
This code takes the data entered into the 1st fields, and copies it to the 2nd fields.

I have one link where I need it to copy the phone, but blank out the information in the Address, City, State, and Zip fields. I cant figure out how to do that. I can make it copy the new phone, but it leaves the existing information for address. Any ideas?

[Advertisements]

I think what you are asking for is this:

The phone box 1 gets copied to phone box 2. All address box 1's get erased.

Correct me if I understood wrong.

Anyways, for this you could do:

document.getElementById('1stStreet').value="";
document.getElementById('1stCity').value="";
document.getElementById('1stState').value="";
document.getElementById('1stZip').value="";
document.getElementById('2ndPhone').value=document.getElementById('1stPhone').value;

[stettybet0]

I think what you are asking for is this:

The phone box 1 gets copied to phone box 2. All address box 1's get erased.

Correct me if I understood wrong.

Anyways, for this you could do:

document.getElementById('1stStreet').value="";
document.getElementById('1stCity').value="";
document.getElementById('1stState').value="";
document.getElementById('1stZip').value="";
document.getElementById('2ndPhone').value=document.getElementById('1stPhone').value;

[ScHwErV]

Stetty, mind if I PM you with a zip of the files I am working with? For some reason its still not working. I believe you have the idea correct.

[stettybet0]

Sure, though I may not get a chance to look at it today.

[ScHwErV]

It appears to be a few mistakes on my part, stetty got me all hooked up now. Many thanks.

While I have this thread open, Ill ask a few more questions as it seems that javascript folks are actually here.

Phone verification. I have found a number of scripts available to ensure that a phone number is entered as (555)555-5555, but I cant find anywhere that I can force 555.555.5555 (what we use). I found one, but when I tried to outlaw "()-" as characters and allow ".", it didn't work at all. Any suggestions?

Also, date verification. I found this script which works excellent in IE, but doesn't work in FF, and its huge. I don't need something that "all inclusive". I just need it to ensure that the date is mm/dd/yyyy (including filling in zeros and the 19 if they just enter 2/9/77 so it will come out 02/09/1977)

I know using pre-built scripts is not the best way to do things, but its what I get time for.

[Ax238]

Hey ScHwErV,

For the phone number, there are many ways you can do it. My experience is that the less a user is required to do the better, so maybe you could try to format the number for them. I came up with the following, which searches for substrings with three or more digits and parses them into the format you described:

function formatPhone (phone){
var regX = new RegExp("\d{3,}");
matches = phone.match(regX);
var fPhone = new String("");
for(var i = 0; i < matches.length; i++)
   {
	  fPhone.concat(matches[i]);
   }
return fPhone.slice(0,2) + "." + fPhone.slice(3,5) + "." + fPhone.slice(6,9);
}

I haven't tested it at all, but it should do the job. I haven't done any length checking or anything in here. Basically all that is needed is at least 10 digits.

For formatting dates, here's a prebuilt script:
JavaScript Date Format : Flagrant Badassery

Regards,

Ax

[ScHwErV]

Thanks for the help, but the phone script didnt work for me. I used onkeyup and onchange both for the phone format, and I could type along 7783374373 and even after I left the field, it stayed that way.

[Ax238]

Sorry about that ScHwErV,

That's what I get for not testing first. This should work better, call it with the Id of the element and it will update that element's value:

function formatPhone (elId){
	var el = document.getElementById(elId);
	var phone = new String(el.value);
	var regX = new RegExp("\\d{3,}", "g");
	var matches = phone.match(regX);
	var fPhone = "";
	for(var i = 0; i < matches.length; i++)
   	{
			  fPhone = fPhone + matches[i];
   	}
	phone = new String(fPhone);
	el.value = phone.slice(0,3) + '.' + phone.slice(3,6) + '.' + phone.slice(6,10);
}

Let me know how it works,

Ax

Edited by Ax238, 21 November 2007 - 04:07 PM.

[ScHwErV]

I'm still going to do this, I just haven't had time yet today. I was off work since Wednesday and I have dialup at home, so I don't do much internet type stuff from there. Ill try it yet today and let you know how it came out.

[Ax238]

I understand, please do let me know. If we need to modify anything after that point, I'd be more than willing to assist.

[ScHwErV]

Ok, I must be doing something wrong. Here is what I have.

In the head, I have this.

<script language="JavaScript" src="/admin/javascript/phone_validate.js"></script>

In the phone_validate.js I have this

<!--    function formatPhone (elId)    {	var el = document.getElementById(elId);	var phone = new String(el.value);	var regX = new RegExp("\\d{3,}", "g");	var matches = phone.match(regX);	var fPhone = "";	for(var i = 0; i < matches.length; i++)	{		fPhone = fPhone + matches[i];	}	phone = new String(fPhone);	el.value = phone.slice(0,3) + '.' + phone.slice(3,6) + '.' + phone.slice(6,10);    }//-->

Finally, for the field, I have this

<input type="text" onkeyup="formatPhone(elId);" name="[01]Home_Phone" id="home_phone" value="" size="27">

Which step am I missing?

[Ax238]

ScHwErV,

There are a couple of problems that I see that need to be dealt with. The first is that you aren't giving the element ID to the function. We'll change this so that you can just pass a reference to the element itself by using the keyword "this". That should make things easier and I was debating whether to write it that way in the first place, but didn't know you were using the input's event to format it.

The second problem is that you are using the "onkeyup" event. By using this event, the function will be fired every time a key has been pressed in the field. The logic cannot deal with this and can only deal with a number after it has been entered, not while it is being entered. For this you should use the "onchange" event, which will fire when the field loses focus (if it has been changed).

Here's the (hopefully) final function:

function formatPhone (el)
{
	var phone = new String(el.value);
	var regX = new RegExp("\\d{3,}", "g");
	var matches = phone.match(regX);
	var fPhone = "";
	for(var i = 0; i < matches.length; i++)
	{
		fPhone = fPhone + matches[i];
	}
	if (fPhone.length >= 10)
	{
		phone = new String(fPhone);
		el.value = phone.slice(0,3) + '.' + phone.slice(3,6) + '.' + phone.slice(6,10);
	}
	else{}
}

I've added an if clause to make sure there are at least ten numbers (if more, only ten will be used). If there are not, the field will not be formatted. You could optionally handle this situation differently by filling in logic for the else.

Here is how you'll want to write your input:

<input type="text" onchange="formatPhone(this);" name="[01]Home_Phone" id="home_phone" value="" size="27">

Regards,

Ax

[ScHwErV]

Thats the ticket, you are the man. The element ID thing obviously made me stumble, I don't know why. I should have seen what you were trying to get me to do.

Now, along the same idea, cant I make the date the same way? Possibly forcing it to add a 0 at the beginning if necessary? Let me see what I can come up with. It should be relatively simple using the code you already gave me.

[Ax238]

Glad to hear it! No problem at all, I really didn't explain the logic all that much, so it's not much surprise you had some difficulty.

You could do it in a similar manner, but did you take a look at my previous suggestion?

For formatting dates, here's a prebuilt script:
JavaScript Date Format : Flagrant Badassery

Let me know what you end up doing or if you need anything else.

Regards,

Ax

[ScHwErV]

I did look at that script, and while nice, I would prefer not to use something so complicated. If it breaks, I need to be able to fix it. That script would be too much for me to learn and comprehend with the time I am given.

I customized your script and got it to put in the slashes. I just need to put in some if statements to make it do exactly what I need. It now turns 02192000 into 02/19/2000. That will be a big help.

I need to find a way to make it go from 2192000 into 02/19/2000. Either that, or I could just have it add the slashes, and if it doesn't have 8 characters, it displays an error popup. That would work too.