Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1242
  • Last Modified:

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.

0
JohnLucania
Asked:
JohnLucania
  • 4
  • 3
1 Solution
 
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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
 
JohnLucaniaAuthor Commented:
great!  It works!
0
 
nschaferCommented:
Glad I could help,

Neal.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now