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

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)%>">
LVL 1
AleksAsked:
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.

Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
hidden fields don't need to be enabled.disabled. whats the logic behind disabling them?
0
AleksAuthor Commented:
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
AleksAuthor Commented:
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
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

AleksAuthor Commented:
Any ideas ?   ... unfortunately this is a bug and is causing issues right now .. gotta fix it ASAP  :#
0
AleksAuthor Commented:
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
AleksAuthor Commented:
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
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
sorry, was in the car, back at computer now, will have a solution for you momentarily (or more questions :) )
0
AleksAuthor Commented:
Thank you !
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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
AleksAuthor Commented:
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
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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
AleksAuthor Commented:
Ok. What would you like me to do ?  Attached is the ASP code in its entirety.
code.txt
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
let me have a look at your processing code then I can make a better recommendation
0
AleksAuthor Commented:
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
AleksAuthor Commented:
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
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
sure no problem, I understand totally...gimme a few min to come up with something
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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
AleksAuthor Commented:
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
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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
AleksAuthor Commented:
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
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
ok i see the issue, your arrays are of different sizes. I'm coming up with a solution for you now, stand by :)
0
AleksAuthor Commented:
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
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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
AleksAuthor Commented:
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
AleksAuthor Commented:
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
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
Please post the first pages code
0
AleksAuthor Commented:
Attached both pages. For now still using the test page2 instead of the one that will process the array.
page1code.txt
page2code.txt
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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
AleksAuthor Commented:
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
AleksAuthor Commented:
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
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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
AleksAuthor Commented:
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
AleksAuthor Commented:
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
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
can you post just the html markup for the text box?
0
AleksAuthor Commented:
<input name="itemdesc" type="text" disabled="true" class="bodytext" id="itemdesc" value="<%=(PaymentLines.Fields.Item("ItemDesc").Value)%>" size="80" maxlength="80" readonly>
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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
AleksAuthor Commented:
I did, I check the box the description does not become enabled.
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
any javascript errors?
0
AleksAuthor Commented:
None, the field simply remains disabled.
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
also, get rid of the readonly attribute on it
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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
AleksAuthor Commented:
I did, but that changed nothing. I check the box, the amount becomes enabled but the description remains disabled.
0
AleksAuthor Commented:
I am not sure what you are asking for. I just sent you the code for page 1  and page 2
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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
AleksAuthor Commented:
Here it is. Used chrome to view source of the page.
renderedpage.txt
0
AleksAuthor Commented:
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
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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

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
AleksAuthor Commented:
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
AleksAuthor Commented:
It looks good ! ... thanks so much. I wish I could give you more points for this one.
0
AleksAuthor Commented:
Great follow up and thanks for staying with me until solved. I greatly appreciate it !
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
my pleasure, glad I could help out :)
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
ASP

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.