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.

JohnLucaniaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

nschaferCommented:
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.
0
JohnLucaniaAuthor Commented:
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); ?
0
nschaferCommented:
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.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

JohnLucaniaAuthor Commented:
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.
0
nschaferCommented:
OK, then we need to change the DisableFields function a bit

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); }
     if (theFld.cchecked) {
       document.getElementById('InAmount' + fldIdx).style.textDecoration = "line-through";
       document.getElementById('InDate' + fldIdx).style.textDecoration = "line-through";
     }
     else {
       document.getElementById('InAmount' + fldIdx).style.textDecoration = "none";
       document.getElementById('InDate' + fldIdx).style.textDecoration = "none";
    }
}

Looking at your function a bit more closely, we don't actually need the rowID variable.  You have already set fldIdx to be the same value.  

It's possible that we could do this in your existing if statements, but I'm not sure what the setAttribute method might be for setting a style parameter.  In any case the above code should work.

Neal.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
JohnLucaniaAuthor Commented:
great!  It works!
0
nschaferCommented:
Glad I could help,

Neal.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.