Link to home
Start Free TrialLog in
Avatar of JohnLucania
JohnLucania

asked on

Strike-through onClick

I have:

bla...
<tr>
<INPUT type=hidden name="INST708" value="708">
<TD class=notetext2>Amount: <INPUT tabindex="47" type=text class=notetext2 name="InAmount708" value="500" onBlur="AddGA(this.form);"></TD>
<TD class=notetext2>Date: <INPUT style="width:7em" tabindex="48" type=text class=notetext2 name="InDate708" value="04/30/2006"></TD>
<TD class=notetext2>Delete: <INPUT tabindex="49" type=checkbox class=notetext2 name="Delete708" value="checkbox" onClick="DisableFields(this)"></TD>
</TR>
bla...

I want to put 'Strike-through' on the texts on:

<TD class=notetext2>Amount: <INPUT tabindex="47" type=text class=notetext2 name="InAmount708" value="500" onBlur="AddGA(this.form);"></TD>
<TD class=notetext2>Date: <INPUT style="width:7em" tabindex="48" type=text class=notetext2 name="InDate708" value="04/30/2006"></TD>

when <TD class=notetext2>Delete: <INPUT tabindex="49" type=checkbox class=notetext2 name="Delete708" value="checkbox" onClick="DisableFields(this)"></TD> is checked off.

Avatar of nschafer
nschafer
Flag of United States of America image

1. Add an id to the inputs you wish to strikethrough.  Make it the same as the name
2. In your DisableFields Function put in the following code:
  // assuming that obj is the variable used in your function call
   rowID = obj.name.substr(7,obj.name.length-6);
   document.getElementById('InAmount' + rowID).style.textDecoration = "line-through";
   document.getElementById('InDate' + rowID).style.textDecoration = "line-through";

That should do it.

Neal.
Avatar of JohnLucania
JohnLucania

ASKER

It is:

function DisableFields (theFld) {
     var trObj = getParent (theFld, 'TR');
     
     var fldIdx = theFld.name.substring (6);
     var disValue = theFld.checked ? 'disabled': '';
     cObj = getChildByName(trObj, amtFldPrefix+fldIdx);
     if (cObj) { cObj.setAttribute ("disabled", disValue); }
     cObj = getChildByName(trObj, dateFldPrefix+fldIdx);
     if (cObj) { cObj.setAttribute ("disabled", disValue); }
}

>> 1. Add an id to the inputs you wish to strikethrough.  Make it the same as the name
 What do you mean adding IDs to the inputs?
 
There are many more of:

bla...
<tr>
<INPUT type=hidden name="INST708" value="708">
<TD class=notetext2>Amount: <INPUT tabindex="47" type=text class=notetext2 name="InAmount708" value="500" onBlur="AddGA(this.form);"></TD>
<TD class=notetext2>Date: <INPUT style="width:7em" tabindex="48" type=text class=notetext2 name="InDate708" value="04/30/2006"></TD>
<TD class=notetext2>Delete: <INPUT tabindex="49" type=checkbox class=notetext2 name="Delete708" value="checkbox" onClick="DisableFields(this)"></TD>
</TR>
bla...


so, there will be:

<tr>
<INPUT type=hidden name="INST709" value="709">
<TD class=notetext2>Amount: <INPUT tabindex="47" type=text class=notetext2 name="InAmount709" value="500" onBlur="AddGA(this.form);"></TD>
<TD class=notetext2>Date: <INPUT style="width:7em" tabindex="48" type=text class=notetext2 name="InDate709" value="05/30/2006"></TD>
<TD class=notetext2>Delete: <INPUT tabindex="49" type=checkbox class=notetext2 name="Delete709" value="checkbox" onClick="DisableFields(this)"></TD>
</TR>
<tr>
<INPUT type=hidden name="INST710" value="710">
<TD class=notetext2>Amount: <INPUT tabindex="47" type=text class=notetext2 name="InAmount710" value="500" onBlur="AddGA(this.form);"></TD>
<TD class=notetext2>Date: <INPUT style="width:7em" tabindex="48" type=text class=notetext2 name="InDate710" value="06/30/2006"></TD>
<TD class=notetext2>Delete: <INPUT tabindex="49" type=checkbox class=notetext2 name="Delete710" value="checkbox" onClick="DisableFields(this)"></TD>
</TR>

....

There are generated by LOOP.

>> 2. In your DisableFields Function put in the following code:
  // assuming that obj is the variable used in your function call
   rowID = obj.name.substr(7,obj.name.length-6);
   document.getElementById('InAmount' + rowID).style.textDecoration = "line-through";
   document.getElementById('InDate' + rowID).style.textDecoration = "line-through";

what is rowID here?  
Should it be rowID = obj.theFld.substr(7,obj.theFld.length-6); ?
By "Add an ID to the input"  I mean this.

<td> class=notetext2>Amount<input style="width:7em" tabindex="48" type="text" class="notetext2" name="InDate710" id="InDate710" value="06/30/2006"</td>

Note the id parameter right after the name.  I assumed that this was being generated in a loop and my example was based on that assumption.  You can add the ID to the field the same way you add the name parameter.

Given your function rowID would be
  rowID = theFld.name.substr(6,thFld.name.length-6);

  -- Note that I made an error in my original post.  The first number in the substr function should be 6 because "Delete" is 6 letters.

Basically this is just getting the numeric portion of the name of the checkbox.  With this we can get a reference to the field using the getElementById function that is why we need to add the ID to the fields.
ok, it works when I checked off.
But, the strike-through line is still there when I uncheck the checkboxes.

When I uncheck them, I want no line on them.
ASKER CERTIFIED SOLUTION
Avatar of nschafer
nschafer
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
great!  It works!
Glad I could help,

Neal.