Auto generate field numbers??

**lindm** · 08-24-2007, 04:29 PM

I need to find a solution to fill a series of checkboxes with the numbers 1, 2, 3 etc depending on if another field contains any information or not. Example below:

On execution of the javascript it will check fields field1, field2, field3 etc (if more fields on the page beginning with "field". If field1 and field3 containg information "notefield1" will be given number 1 and "notefield3" will be given number 2. "notefield 2" will not contain any number...anyone got a simple nice loop solution?

Thanks

HTML 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>Untitled Document</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <p>
    <input type="text" name="field1" id="field1" />
    <input name="notefield1" type="text" id="notefield1" size="2" />
    <br />
    <input type="text" name="field2" id="field2" />
    <input name="notefield2" type="text" id="notefield2" size="2" />
    <br />
    <input type="text" name="field3" id="field3" />
    <input name="notefield3" type="text" id="notefield3" size="2" />
    <br />
  </p>
</form>
</body>
</html>

**jscheuer1** · 08-24-2007, 05:04 PM

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>Untitled Document</title>
</head>
<script type="text/javascript">
function setFields(form){
for (var i = 0, f=form.elements; i < f.length; i++)
for (var j = 0; j < f.length; j++)
if(f[i].name=='field'+j&&f[i].value)
f['notefield'+j].value=j;
else if (f[i].name=='field'+j)
f['notefield'+j].value='';
}
</script>
<body>
<form id="form1" name="form1" method="post" action="">
  <p>
    <input type="text" name="field1" id="field1" onchange="setFields(this.form);" />
    <input name="notefield1" type="text" id="notefield1" size="2" />
    <br />
    <input type="text" name="field2" id="field2" onchange="setFields(this.form);" />
    <input name="notefield2" type="text" id="notefield2" size="2" />
    <br />
    <input type="text" name="field3" id="field3" onchange="setFields(this.form);" />
    <input name="notefield3" type="text" id="notefield3" size="2" />
    <br />
  </p>
</form>
</body>
</html>

Notes: In most browsers, the onchange event could be assigned just once, to the form itself:

Code:

<form id="form1" name="form1" method="post" action="" onchange="setFields(this);">

But, IE doesn't like that.

Also, an initialization function could be written to add these events, but since I'm not sure you want to run onchange, and it is better if they are hard coded anyway, I've not bothered with that.

**lindm** · 08-24-2007, 05:52 PM

Thanks for the solution! One strange thing. When I fill in field1 and field3, notefield3 is given the number 3...I wanted it to be 2 as there are only two fields with contents...possible?

**jscheuer1** · 08-24-2007, 06:14 PM

Yes (and I had missed that in the original request), but then you have to decide what happens if the user later goes back and fills in another intermediate field. I was playing around with the idea of initialization also, to make the markup in IE as simple as in other browsers, so I will give you that version here and highlight the changes to the original function that show one way of working out the numbers:

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>Untitled Document</title>
</head>
<script type="text/javascript">
function setFields(form){
var n=1;
for (var i = 0, f=form.elements; i < f.length; i++)
for (var j = 0; j < f.length; j++)
if(f[i].name=='field'+j&&f[i].value)
f['notefield'+j].value=n++;
else if (f[i].name=='field'+j)
f['notefield'+j].value='';
}

// Below added to init IE:
if (typeof window.attachEvent!='undefined' && typeof window.addEventListener=='undefined')
window.attachEvent('onload', function(){
for (var i = 0, f=document.forms; i < f.length; i++)
if(f[i].onchange=='setFields(this);'){
for (var j = 0, e=f[i].elements; j < e.length; j++)
if(/field\d+/.test(e[j].name))
e[j].onchange=function(){setFields(this.form);};
f[i].onchange=null;
}
});
</script>
<body>
<form id="form1" name="form1" method="post" action="" onchange="setFields(this);">
  <p>
    <input type="text" name="field1" id="field1" />
    <input name="notefield1" type="text" id="notefield1" size="2" />
    <br />
    <input type="text" name="field2" id="field2" />
    <input name="notefield2" type="text" id="notefield2" size="2" />
    <br />
    <input type="text" name="field3" id="field3" />
    <input name="notefield3" type="text" id="notefield3" size="2" />
    <br />
  </p>
</form>
</body>
</html>

**lindm** · 08-24-2007, 06:51 PM

Hi John,

Now the numbering is fine. I tried it in Firefox and it works, but not in Safari (I am on Mac). However I really only want the function to be executed when the visitor clicks a button or link. Tried changing the code but it won't work...any solution for the click link? (guess it must be messing with the onload event...

**lindm** · 08-24-2007, 07:25 PM

Got it now. Quick newbie question...do I need the windows hack if I use an onclick action on a button instead of onchange?

**jscheuer1** · 08-24-2007, 08:38 PM

It's not really a 'windows hack'*, but no, you shouldn't need it. If all you have is something like:

Code:

<form id="form1" name="form1" method="post" action="">
  <p>
    <input type="text" name="field1" id="field1" />
    <input name="notefield1" type="text" id="notefield1" size="2" />
    <br />
    <input type="text" name="field2" id="field2" />
    <input name="notefield2" type="text" id="notefield2" size="2" />
    <br />
    <input type="text" name="field3" id="field3" />
    <input name="notefield3" type="text" id="notefield3" size="2" />
    <br />
    <input type="button" value="Update" onclick="setFields(this.form);" />
  </p>
</form>

That would work just fine without the added IE init function.

In fact, if it isn't important that the user sees this extra numerical data, you could so something like this (also without the 'hack'):

Code:

<form id="form1" name="form1" method="post" action="" onsubmit="setFields(this);">
  <p>
    <input type="text" name="field1" id="field1" />
    <input name="notefield1" type="hidden" id="notefield1" size="2" />
    <br />
    <input type="text" name="field2" id="field2" />
    <input name="notefield2" type="hidden" id="notefield2" size="2" />
    <br />
    <input type="text" name="field3" id="field3" />
    <input name="notefield3" type="hidden" id="notefield3" size="2" />
    <br />
    <input type="submit" value="Submit" />
  </p>
</form>

Important Note: Whether seen or unseen, users with javascript disabled or without javascript will not generate the expected data.

* The term hack implies something that isn't technically supported by the browser. The code in my IE workaround is fully documented and supported in any browser that can pass its object tests.

Thread: Auto generate field numbers??

Thread Tools

Search Thread

Auto generate field numbers??

Bookmarks

Bookmarks

Posting Permissions