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 MontyWeb Ninja at largeCommented:
hidden fields don't need to be enabled.disabled. whats the logic behind disabling them?
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.
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.
Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

AleksAuthor Commented:
Any ideas ?   ... unfortunately this is a bug and is causing issues right now .. gotta fix it ASAP  :#
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  :$
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 ?
Big MontyWeb Ninja at largeCommented:
sorry, was in the car, back at computer now, will have a solution for you momentarily (or more questions :) )
AleksAuthor Commented:
Thank you !
Big MontyWeb Ninja at largeCommented:
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?
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
Big MontyWeb Ninja at largeCommented:
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
AleksAuthor Commented:
Ok. What would you like me to do ?  Attached is the ASP code in its entirety.
code.txt
Big MontyWeb Ninja at largeCommented:
let me have a look at your processing code then I can make a better recommendation
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
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 :$
Big MontyWeb Ninja at largeCommented:
sure no problem, I understand totally...gimme a few min to come up with something
Big MontyWeb Ninja at largeCommented:
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
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  :(
Big MontyWeb Ninja at largeCommented:
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
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
Big MontyWeb Ninja at largeCommented:
ok i see the issue, your arrays are of different sizes. I'm coming up with a solution for you now, stand by :)
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
Big MontyWeb Ninja at largeCommented:
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 :)
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.
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
Big MontyWeb Ninja at largeCommented:
Please post the first pages code
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
Big MontyWeb Ninja at largeCommented:
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

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 ?
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
Big MontyWeb Ninja at largeCommented:
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

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  :(
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
Big MontyWeb Ninja at largeCommented:
can you post just the html markup for the text box?
AleksAuthor Commented:
<input name="itemdesc" type="text" disabled="true" class="bodytext" id="itemdesc" value="<%=(PaymentLines.Fields.Item("ItemDesc").Value)%>" size="80" maxlength="80" readonly>
Big MontyWeb Ninja at largeCommented:
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>
AleksAuthor Commented:
I did, I check the box the description does not become enabled.
Big MontyWeb Ninja at largeCommented:
any javascript errors?
AleksAuthor Commented:
None, the field simply remains disabled.
Big MontyWeb Ninja at largeCommented:
also, get rid of the readonly attribute on it
Big MontyWeb Ninja at largeCommented:
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
AleksAuthor Commented:
I did, but that changed nothing. I check the box, the amount becomes enabled but the description remains disabled.
AleksAuthor Commented:
I am not sure what you are asking for. I just sent you the code for page 1  and page 2
Big MontyWeb Ninja at largeCommented:
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
AleksAuthor Commented:
Here it is. Used chrome to view source of the page.
renderedpage.txt
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>
Big MontyWeb Ninja at largeCommented:
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

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.
AleksAuthor Commented:
It looks good ! ... thanks so much. I wish I could give you more points for this one.
AleksAuthor Commented:
Great follow up and thanks for staying with me until solved. I greatly appreciate it !
Big MontyWeb Ninja at largeCommented:
my pleasure, glad I could help out :)
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.