Solved

click chekbox in repeated region to enable field for that one row

Posted on 2014-10-21
18
121 Views
Last Modified: 2014-10-21
I have a repeated region with a checkbox and a textbox. The textbox is disabled by default, but if user checks the box for that one row then the text box for that one row should be enabled.

The checkbox name is:  
<input name="itemid" type="checkbox" id="itemid" value="<%=(PaymentLines.Fields.Item("Id").Value)%>">

The text field is:
<input name="amount" type="text" class="bodytext" id="amount" value="0" size="5" maxlength="10" disabled ="true">

As you can see it is disabled by default.

Checking the box should only enable the field for that particular row.

I tried using a script I have to disable a field and tweaking it but so far no luck.

I have:

<SCRIPT LANGUAGE="javaScript">
function disableme(first, second)
{
 ((first.checked == true)?second.disabled = true:second.disabled =  false );

 }
</SCRIPT>
0
Comment
Question by:amucinobluedot
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 7
18 Comments
 

Author Comment

by:amucinobluedot
ID: 40395351
Tried the following:

<SCRIPT LANGUAGE="javaScript">
function enableme(first, second)
{
 ((first.checked == true)?second.disabled = false:second.disabled =  true );

 }
</SCRIPT>

 <input name="itemid" type="checkbox" id="itemid" value="<%=(PaymentLines.Fields.Item("Id").Value)%>" onClick="enableme(document.form1.amount);" >

No luck so far
0
 

Author Comment

by:amucinobluedot
ID: 40395359
Correction: This is the checkbox code:

<input name="itemid" type="checkbox" id="itemid" value="<%=(PaymentLines.Fields.Item("Id").Value)%>" onClick="enableme(document.form1.itemid,document.form1.amount);" >

I get no errors but the amount stays disabled when I check the box.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40395363
Your function is expecting two parameters - you are only sending first
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:amucinobluedot
ID: 40395369
I just updated but nothing happens. This is my current code:

Checkbox:

<input name="itemid" type="checkbox" id="itemid" value="<%=(PaymentLines.Fields.Item("Id").Value)%>" onClick="enableme(document.form1.itemid,document.form1.amount);" >

Text field:

  <input name="amount" type="text" class="bodytext" id="amount" value="0" size="5" maxlength="10" >

Script:

<SCRIPT LANGUAGE="javaScript">
function enableme(first, second)
{
 ((first.checked == true)?second.disabled = true:second.disabled =  false );

 }
</SCRIPT>
0
 
LVL 58

Expert Comment

by:Gary
ID: 40395373
With your corrected input onclick the code works fine

http://jsfiddle.net/Lgng2crr/
0
 
LVL 58

Expert Comment

by:Gary
ID: 40395374
Your logic is the wrong way round, should be

function enableme(first, second) {
    ((first.checked == true) ? second.disabled = false : second.disabled = true);
} 

Open in new window

0
 

Author Comment

by:amucinobluedot
ID: 40395383
Works fine when not inside a repeat region. When inside of it doenst work, this is the code for my repeat region using the script above.

--- Code ---

  <%
 Dim RecordCounter
RecordCounter = 0
%>
                  <%
While ((Repeat1__numRows <> 0) AND (NOT PaymentLines.EOF))
%>
  <tr  <%
      RecordCounter=RecordCounter + 1
      If RecordCounter Mod 2 = 1 Then
            Response.Write("bgcolor=#FBFBFB")
      End If
      %>
      bgcolor="#FFFFFF" onMouseOver="this.style.backgroundColor='#FFFFCC'" onMouseOut="this.style.backgroundColor=''">
    <td width="10">&nbsp;</td>
    <td><div align="center">
      <input name="itemid" type="checkbox" id="itemid" value="<%=(PaymentLines.Fields.Item("Id").Value)%>" onClick="enableme(document.form1.itemid,document.form1.amount);" >
    </div></td>
    <td><table width="9" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="4"><img src="../../Images/blank.gif" alt="" width="4" height="25" /></td>
        <td width="2" height="14"><img src="../../Images/menus/separator.gif" alt="" /></td>
        <td width="10"><img src="../../Images/blank.gif" alt="" width="4" height="25" /></td>
      </tr>
    </table></td>
    <td><span class="bodytext"><%=(PaymentLines.Fields.Item("ItemDesc").Value)%></span></td>
    <td width="15" valign="middle"><table width="9" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="4"><img src="../../Images/blank.gif" alt="" width="4" height="25" /></td>
        <td width="2" height="14"><img src="../../Images/menus/separator.gif" alt="" /></td>
        <td width="10"><img src="../../Images/blank.gif" alt="" width="4" height="25" /></td>
        </tr>
    </table></td>
    <td class="bodytextreports" ><div align="right" class="bodytext"><%= FormatCurrency((PaymentLines.Fields.Item("PmtRecd").Value), 2, -2, -2, -2) %></div></td>
    <td width="17"><table width="12" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="4"><img src="../../Images/blank.gif" alt="" width="4" height="25" /></td>
        <td width="10" height="14"><img src="../../Images/menus/separator.gif" alt="" /></td>
        <td width="4"><img src="../../Images/blank.gif" alt="" width="4" height="25" /></td>
        </tr>
      </table>
      <div align="center"></div></td>
    <td width="81"  ><div align="right"><%= FormatCurrency((PaymentLines.Fields.Item("Balance").Value), 2, -2, -2, -2) %></div></td>
    <td ><table width="12" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="4"><img src="../../Images/blank.gif" alt="" width="4" height="25" /></td>
        <td width="10" height="14"><img src="../../Images/menus/separator.gif" alt="" /></td>
        <td width="4"><img src="../../Images/blank.gif" alt="" width="4" height="25" /></td>
        </tr>
      </table>
      <div align="center"></div></td>
    <td width="106" ><div align="center">$
      <input name="amount" type="text" class="bodytext" id="amount" value="0" size="5" maxlength="10" disabled>
    </div></td>
  </tr>
  <tr>
  <td colspan="11" background="../../Images/menus/separatortop.gif"><img src="../../Images/blank.gif" alt="" width="10" height="3"></td>
                </tr>
  <%
  Repeat1__index=Repeat1__index+1
  Repeat1__numRows=Repeat1__numRows-1
  PaymentLines.MoveNext()
Wend
%>

------
0
 
LVL 58

Expert Comment

by:Gary
ID: 40395399
Post the rendered HTML

Every input has the same name, you should give each one a unique name or ID - otherwise how is the code supposed to know which one to enable.
0
 

Author Comment

by:amucinobluedot
ID: 40395429
I understand this, how can I do this ?  Say for example I use the id of the row to be added to both the checkbox and the amount ?

this is the id value:   <%=(PaymentLines.Fields.Item("Id").Value)%>

Right now the name is:
name="itemid"
name="amount"

what would the syntax be to append the id to the name so that it is unique ?
0
 

Author Comment

by:amucinobluedot
ID: 40395433
I tried:

<input name="itemid<%=(PaymentLines.Fields.Item("Id").Value)%>" type="checkbox" id="<%=(PaymentLines.Fields.Item("Id").Value)%>" value="<%=(PaymentLines.Fields.Item("Id").Value)%>" onClick="enableme(document.form1.itemid,document.form1.amount);" >

and

<input name="amount<%=(PaymentLines.Fields.Item("Id").Value)%>" type="text" class="bodytext" id="amount" value="0" size="5" maxlength="10" disabled >

<SCRIPT LANGUAGE="javaScript">
function enableme(first, second) {
        ((first.checked == true) ? second.disabled = false : second.disabled = true);
    }
</SCRIPT>

I check the box .. nothing happens :#
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40395478
For your checkbox and input use this format

<input name="itemid" type="checkbox" data-id="item<%=(PaymentLines.Fields.Item("Id").Value)%>" value="<%=(PaymentLines.Fields.Item("Id").Value)%>" onClick="enableme(this,this.getAttribute('data-id'));">

<input name="amount" type="text" class="bodytext" id="item<%=(PaymentLines.Fields.Item("Id").Value)%>" value="0" size="5" maxlength="10" disabled="true">

Open in new window


For your javascript use this
<script>
function enableme(first, second) {
    first.checked == true ? document.getElementById(second).disabled = false : document.getElementById(second).disabled = true;
}
</script>

Open in new window

0
 

Author Comment

by:amucinobluedot
ID: 40395489
There is a problem though. The values are passed on to the next page where an array is created from the comma delimited value that is passed under the name of 'itemid' ...
If I change the name it messes up the second page  : (  

Is there a way to enable the field without having to change the names ?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40395502
I haven't changed the name
0
 

Author Comment

by:amucinobluedot
ID: 40395519
How can I make it unique for the toggle to work without changing the name then ?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40395533
Did you not see the code I posted above?
0
 

Author Comment

by:amucinobluedot
ID: 40395540
I didn't my apologies, let me try it
0
 

Author Comment

by:amucinobluedot
ID: 40395543
AWEEESOOOMEEE !!!  Thank you so much .. I am getting closer to finishing this page :)
0
 

Author Closing Comment

by:amucinobluedot
ID: 40395546
:) !!!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question