Jump to content

TPL file - display field upon selection of another field


Guillaume
 Share

Recommended Posts

Hi,

In a module I am developping, for the admin page, I want to allow or disallow Payment by Installments. If allowed, then I want to allow the admin to select other fields (such as, minimum amount for installments, amount of the first installment, etc.) as below:

image.png.e14dd60cfea866814cdb5cb8185f6cf2.png

My tpl file looks like this:

image.thumb.png.61f25a367e0a33e531e907da58206c3e.png

 

My problem is that, the if condition seems to check what is actually in the database. And simply clicking on the field doesn't fill it in the database: for the detailed fields to appear (or disappear) one needs to tick in (or off) the option "Payment by Installments" and then save. And this is a bit cumbersome.

What I am after, is a way to do display/hide fields upon click or selection (I have another similar issue, where I'd like a field to be displayed upon selection of a given value from a drop-down list) on another field. I believe this requires a bit of javascript, if anyone had an example or could point me out to another Cubecart module having this somewhere, that would be very helpful.

Best regards,

Guillaume

 

 

index.tpl

Link to comment
Share on other sites

The All-in-One-Shipping module has two examples: Advanced Options on the first tab and choosing the scope of a zone.

Also, the Foundation skin, at "checkout confirm" for not logged in visitors, has a checkbox that exposes or hides a password field (create an account), and has a checkbox that exposes or hides delivery address fields (deliver to billing address).

 

Link to comment
Share on other sites

Thanks, I just realized it's a standard PHP/JS thing and there is nothing specific to TPL files. Still I believe there is something I am doing wrong:

  • I have the "multipay" checkbox (line 100), which onclick is supposed to call a JS function (lines 102 through 115) to show/hide the div section multipay_details (hidden by default, line 123 onwards)
  • But onclick nothing happens. I have tried to change the JS function to  simple "alert" (commented lines 116 through 121), and when not commented it displays the alert indeed, so I believe I am doing something wrong in my JS function

index.tpl

Link to comment
Share on other sites

I've eventually managed to get things more or less working. Indeed, upon click on that checkbox, the fields show if they were hidden, and vice-versa.

Now I'm trying to improve this by checking the actual value (is the box ticked or not?), as I believe it would be more reliable. I have tried the below, but for some reason, "document.getElementById(multipay)" always equals "null" and I am never able to retrieve its value...

image.thumb.png.0cfb396c63de06964930c2bd8f1f171d.png

Is there anything I am doing wrong here? I would really like to make it value-based, because this would also solve my other use-case (below picture), where the admin chooses the payment system they want but there an option "other" where I'm dynamically displaying a field where the admin would input their custom value:

image.png.04f72bb05ff9a03a8b1904a4c584bd6a.png

Best regards,

Guillaume

 

Link to comment
Share on other sites

You're right - apologies this was very stupid of me.

I've actually just realized that this is actually a basic PHP/JS matter... From what I have read online, apparently for a checkbox I can get its status via the attribute "checked" (although I am not sure whether the attribute "checked" represents the default status of the checkbox, or its actual status at the time javascript/php is executed).

I have therefore tried the below (where multipay is the checkbox, and multipay_details is the section to be displayed if checkbox is checked). In the javascript function multipay is therefore the fromId and I am trying to base the action depending on its attribute "checked". Unfortunately, with either of the methods I use to get it (chk and chk2), it is always "true" (whether the box is ticked or unticked). Any obvious reason for that?

image.thumb.png.423c4e19637bc497ebf43f36cd8f7e6d.png

index.tpl

Ok I'm gonna answer this one myself, I managed to make the below code work:

image.thumb.png.b43bb68444747fc46e7dcc2d0507c969.png

Thanks a lot for your help!

index.tpl

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...