Solved

Enable hidden fields when checkbox is checked (in repeated region)

Posted on 2014-11-12
51
168 Views
Last Modified: 2014-11-12
I have a script that enables a field when a checkbox is checked, I need to add code to it so that it also enables both fields listed below. Help on the syntax on how to do this would be greatly appreciated.


 --- This is my script---

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


 -- this is the checkbox --

 <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'));">

 -- this is the field that is initially disabled and gets enabled when the checkbox is checked --

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

The above works fine, it gets enabled with the code I already have, but I need to enable the two fields below as well:


 --- Hidden fields --

  <input name="itemdesc" type="hidden" id="itemdesc" disabled="true" value="<%=(PaymentLines.Fields.Item("ItemDesc").Value)%>">


       <input name="id" type="hidden" id="id" disabled="true" value="<%=(PaymentLines.Fields.Item("Id").Value)%>">
0
Comment
Question by:amucinobluedot
  • 30
  • 21
51 Comments
 
LVL 32

Expert Comment

by:Big Monty
ID: 40437357
hidden fields don't need to be enabled.disabled. whats the logic behind disabling them?
0
 

Author Comment

by:amucinobluedot
ID: 40437398
Well ... the information is passed from page # 1 to page # 2 from the repeated region.

the id, description and amount, the description its in a hidden field, if I don't do this then this happens:

If there are say 5 records and I enable record 3 and 4, it will pass on the correct amounts, but will pass ALL the descriptions, so it will save description # 1 with the amount of record # 3 instead of disabling description 1 and 2 and enabling # 3 along with the correct amount.

Hard to explain otherwise.
0
 

Author Comment

by:amucinobluedot
ID: 40437408
I can also try the following. Use the field like this instead of hidden:

<input name="itemdesc" type="text" class="bodytext" id="itemdesc" disabled="true" value="<%=(PaymentLines.Fields.Item("ItemDesc").Value)%>" readonly>

How can I add code to enable it when the checkbox is checked ?
If hidden fields can't be disabled that is, which is the better option.
0
 

Author Comment

by:amucinobluedot
ID: 40437461
Any ideas ?   ... unfortunately this is a bug and is causing issues right now .. gotta fix it ASAP  :#
0
 

Author Comment

by:amucinobluedot
ID: 40437495
I tried the following:

Checkbox:

<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'));enableme(this,this.getAttribute('data-id'));">

First field to enable when checkbox is checked:
<input name="itemdesc" type="text" class="bodytext" disabled="true"  id="item<%=(PaymentLines.Fields.Item("Id").Value)%>"   value="<%=(PaymentLines.Fields.Item("ItemDesc").Value)%>" readonly>

Second field to enable when checkbox is checked:
 <input name="amount" type="text" disabled="true" class="bodytext" id="item2<%=(PaymentLines.Fields.Item("Id").Value)%>" value="0" size="5" maxlength="10" data-max="<%=PaymentLines.Fields.Item("Balance")%>" >

Problem: Right now it is only enabling the first field and not the second  :$
0
 

Author Comment

by:amucinobluedot
ID: 40437560
Can I add a third element in the script  ?

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

I get an error in syntax though, and maybe I can use 'third' for the other text field so that it is enabled on click ?

How would that work ?  

Any other ideas ?
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40437590
sorry, was in the car, back at computer now, will have a solution for you momentarily (or more questions :) )
0
 

Author Comment

by:amucinobluedot
ID: 40437595
Thank you !
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40437599
if that code is in a repeated region, you're generating incorrect IDs, as they seem to be all the same. or did you simplify the code to help better understand it?
0
 

Author Comment

by:amucinobluedot
ID: 40437600
This is an example (attached). it is passing the description of the FIRST item with the Id and amount of the second, this is because the description is not disabled. I need to only pass the description of those records that are enabled, this is why I thought disabling the hidden field and enabling it when the checkbox is checked.
example.gif
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40437622
i think the easiest way to do this would be to check the checkbox value on the processing page (page2.asp), if there is a value for that checkbox, then process that row.

otherwise you'll need to get into blanking out the values for the hidden field, then putting them back if the user re-checks the record. setting a hidden field to disabled does not prevent that field from being posted. in fact all it does is prevent users from entering data in it, and seeing how its a hidden field, this would never be the case.

another option is when your submit button is pressed, fire off a function that loops through the repeated region and grabs only the records that are checked and sticks them either in a query string, or a hidden variable (that allows it to post) that separates each key/value pair with a separator
0
 

Author Comment

by:amucinobluedot
ID: 40437645
Ok. What would you like me to do ?  Attached is the ASP code in its entirety.
code.txt
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40437666
let me have a look at your processing code then I can make a better recommendation
0
 

Author Comment

by:amucinobluedot
ID: 40437687
Can you help me with that ?  I understand the logic.
The next page code is attached, it processes everything that is posted. perhaps you can help me modify it so that it only processes the records in which the checkbox is checked ?  Sounds like the easy solution.

As you can see it creates an array and three stored procedures use it to insert/update data in the database. You might have actually helped me with that code a couple weeks ago.
page2.txt
0
 

Author Comment

by:amucinobluedot
ID: 40437703
I apologize if I ask for so much help but this is an issue found in live server so people are waiting on me to fix it :$
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40437713
sure no problem, I understand totally...gimme a few min to come up with something
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40437740
it looks like you have a check already in place:

if arrItemIDs( counter ) <> "" then

that line of code checks the checkbox field and sees if there is a vaue present. if it's unchecked, no value should be present.

as a test, can you make sure only two records are checked and press submit. and in your code, add the following to your first #BeginBlock for new bill payment:

itemIDs = request.form("itemid")
Response.Write itemIDs
Response.End

only 2 IDs should show
0
 

Author Comment

by:amucinobluedot
ID: 40437764
They do, but  the description is wrong, it is the one of the first item, the amount is that of the second one, correct, but the description is that of the first one instead of the second record which is the one I checked  :(
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40437787
ok can you do the same thing with the amounts and descriptions variables? can you list the actual data here so I can see exactly what they look like? and let's select 3 records for this test please
0
 

Author Comment

by:amucinobluedot
ID: 40437813
Ok, here are the results. Attached both screenshots.

Page 1: I checked two items and added amounts.  Then submitted them to page # 2

Both ID's are correct, both amounts are correct. The description is NOT correct. It Is passing the description of ALL items listed and not the ones that are checked. That is the problem.
page1.gif
page2.gif
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40437866
ok i see the issue, your arrays are of different sizes. I'm coming up with a solution for you now, stand by :)
0
 

Author Comment

by:amucinobluedot
ID: 40437873
That's right. This is because ALL the descriptions are being posted unlike the amounts where only the selected rows are posted. If we could only post the descriptions of the selected records that would take care of it.

Same issue with 3 selected, no matter how many I select all descriptions are passed to page 2. Need to only pass those descriptions of checked records.
secondpage1.gif
secondpage2.gif
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40437937
ok, let's try this. first thing I want you to do is change your description html to this:

   <td><span class="bodytext" id="spnOrigDesc<%=(PaymentLines.Fields.Item("Id").Value)%>"><%=(PaymentLines.Fields.Item("ItemDesc").Value)%>
      <input name="itemdesc" type="hidden" id="itemdesc<%=(PaymentLines.Fields.Item("Id").Value)%>" value="<%=(PaymentLines.Fields.Item("ItemDesc").Value)%>">
      <input name="id" type="hidden" id="id" value="<%=(PaymentLines.Fields.Item("Id").Value)%>">
    </span></td>

Open in new window


note I added an ID value to your span. This is so we can keep a reference to the original description in case the user un-checks, then decides to re-check that record. I also changed the ID of your hidden description field so we can reference it easily in the javascript function

next, I want you to only pass the recordID into the function, so change your checkbox to:

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

Open in new window


note i removed the string "item" from your data-id attribute.

next, let's change your javascript. I've never been a fan of using the  ? and : operators, it's difficult to read and follow, I prefer to type out the conditions

function enableme(first, id) {
    if( ! first.checked ) {             //-- record was un-checked
            document.getElementById('item' + id ).disabled = false;
            document.getElementById('itemdesc' + id ).value = '';
    } else {          //-- record was re-checked
            document.getElementById('item' + id ).disabled = true;
            document.getElementById('itemdesc' + id ).value = document.getElementById('spanOrigDesc' + id ).innerText;
    }
}

Open in new window


un-tested, but should get you going :)
0
 

Author Comment

by:amucinobluedot
ID: 40437950
I am testing.

First issue.

Amount is initially disabled, which is OK, but if I check the box it is NOT enabled. If I uncheck it then it is enabled. If I check it then its disabled.

It should be the other way around, should be enabled when checked.
0
 

Author Comment

by:amucinobluedot
ID: 40437958
Second issue, this are the values passed:

itemids =

descriptions = FEDEX, , I-751 Divorced Late Filing W/Children,

amounts = 200, 232
the descriptions are incorrect. and there is a comma separating the two items being displayed. The two descriptions passed are the two I did not select. Perhaps caused by the issue above.

And the item id's are not being passed to the second page
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 32

Expert Comment

by:Big Monty
ID: 40437964
Please post the first pages code
0
 

Author Comment

by:amucinobluedot
ID: 40437996
Attached both pages. For now still using the test page2 instead of the one that will process the array.
page1code.txt
page2code.txt
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40438002
i had them backwards, try this:

function enableme(first, id) {
    if( ! first.checked ) {             //-- record was un-checked
            document.getElementById('item' + id ).disabled = true;
            document.getElementById('itemdesc' + id ).value = '';
    } else {          //-- record was re-checked
            document.getElementById('item' + id ).disabled = false;
            document.getElementById('itemdesc' + id ).value = document.getElementById('spanOrigDesc' + id ).innerText;
    }
}

Open in new window

0
 

Author Comment

by:amucinobluedot
ID: 40438012
That worked for the checkboxes. I am still getting ALL the descriptions

itemids = 4556, 4558

descriptions = FEDEX, Filing of I129, I-751 Divorced Late Filing W/Children, desc

amounts = 100, 232


This is because we are not disabling the description. If we need to have a text box so we can disable it like the amount I am ok trying that. You want me to use that instead of a hidden field ? If so, can we add code to enable the description when the checkbox is checked just like we do with the amount ?
0
 

Author Comment

by:amucinobluedot
ID: 40438022
Here is what I propose.

Attached example. Right now description is disabled, but if we add code to enable the field when the checkbox is checked I think we should be OK !  Can you help me with that ?

Also attached updated page1 code with the above.
screenshotexample.gif
page1newcode.txt
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40438044
it doesn't matter if we use a text box or hidden field, the line of code

document.getElementById('itemdesc' + id ).value = '';

blanks out the hidden field value so nothing will get passed over. if you want to change it to a text box, then the javascript function would look like:

function enableme(first, id) {
    if( ! first.checked ) {             //-- record was un-checked
            document.getElementById('item' + id ).disabled = true;
            document.getElementById('itemdesc' + id ).disabled = true;
    } else {          //-- record was re-checked
            document.getElementById('item' + id ).disabled = false;
            document.getElementById('itemdesc' + id ).disabled = false;
    }
}

Open in new window

0
 

Author Comment

by:amucinobluedot
ID: 40438058
Well .. the previous code was not working and with the above the text field is not enabled and no description is passed to the next page.

itemids = 4557, 4558

descriptions =

amounts = 78, 232

Can we enabled the field when the checkbox is checked ?  the code above didn't do it  :(
0
 

Author Comment

by:amucinobluedot
ID: 40438066
Attached the issue. When checkbox is checked only the amount is enabled, not the description box, hence no information is posted for the description.
box.bmp
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40438070
can you post just the html markup for the text box?
0
 

Author Comment

by:amucinobluedot
ID: 40438081
<input name="itemdesc" type="text" disabled="true" class="bodytext" id="itemdesc" value="<%=(PaymentLines.Fields.Item("ItemDesc").Value)%>" size="80" maxlength="80" readonly>
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40438088
change it to:

<input name="itemdesc" type="text" disabled="true" class="bodytext" id="itemdesc<%=(PaymentLines.Fields.Item("Id").Value)%>" value="<%=(PaymentLines.Fields.Item("ItemDesc").Value)%>" size="80" maxlength="80" readonly>
0
 

Author Comment

by:amucinobluedot
ID: 40438097
I did, I check the box the description does not become enabled.
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40438113
any javascript errors?
0
 

Author Comment

by:amucinobluedot
ID: 40438123
None, the field simply remains disabled.
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40438126
also, get rid of the readonly attribute on it
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40438131
if that doesn't work, please post the rendered html of the page so that i can set up a test page here on my server. that'll eliminate the back and forth and hopefully save you some time
0
 

Author Comment

by:amucinobluedot
ID: 40438132
I did, but that changed nothing. I check the box, the amount becomes enabled but the description remains disabled.
0
 

Author Comment

by:amucinobluedot
ID: 40438138
I am not sure what you are asking for. I just sent you the code for page 1  and page 2
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40438139
ok lets get the rendered html and i can get a better sense of whats happening from that

load the page, do a view source, and copy & paste it here
0
 

Author Comment

by:amucinobluedot
ID: 40438147
Here it is. Used chrome to view source of the page.
renderedpage.txt
0
 

Author Comment

by:amucinobluedot
ID: 40438148
This is the render from page 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<p>itemids = 4556, 4558</p>
<p>descriptions = </p>
<p>amounts = 100, 300</p>
</body>
</html>
0
 
LVL 32

Accepted Solution

by:
Big Monty earned 500 total points
ID: 40438168
ok i found the problem. in your code, you have a hidden field with the same ID as the text box, either comment out the field name="itemdeschidden" or change the id so it's the same as the description textbox
0
 

Author Comment

by:amucinobluedot
ID: 40438191
Looks good. I removed that field, that was the prev description. My bad. Let me test with the page that parses the array and Ill let you know if it worked shortly.
0
 

Author Comment

by:amucinobluedot
ID: 40438197
It looks good ! ... thanks so much. I wish I could give you more points for this one.
0
 

Author Closing Comment

by:amucinobluedot
ID: 40438198
Great follow up and thanks for staying with me until solved. I greatly appreciate it !
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40438202
my pleasure, glad I could help out :)
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

706 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now