Solved

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

Posted on 2014-10-21
18
129 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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 

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

Database Solutions Engineer FAQs

In this series, we will discuss common questions received as a database Solutions Engineer at Percona. In this role, we speak with a wide array of MySQL and MongoDB users responsible for both extremely large and complex environments to smaller single-server environments.

Question has a verified solution.

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

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

627 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