Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2019-05-16 01:12:28

Nico3939
Member
From: France
Registered: 2016-10-05
Posts: 175
Website

Custom list of choice

Because Backlight does not support radio buttons, I'm looking for another way to create a list of choices.

In Cart, on the CheckOut page, with the ability to add additional fields, I almost found a solution. It would be to create buttons that would return (populate) the values chosen in the additional field.

I tried with the function document.getElementById but the only thing missing is that in Backlight Fields have no ID.

So I tried with the function document.getElementsByName but even if the field is named, the script does not find the field.

Here is the code:
I put this in an additional field:

Selected your payment method:<br>
        <input type="button" value="transfer" name="no" onclick="moveNumbers(this.value)"> 
        <input type="button" value="mandate" name="no" onclick="moveNumbers(this.value)"> 
        <input type="button" value="check" name="no" onclick="moveNumbers(this.value)">

And this in Phplugin:

<script>
        function moveNumbers(number){
            document.getElementById("result").value=number;
        }
    </script>

You can try it:
https://www.w3schools.com/code/tryit.as … 3GADGKBIVU

In your opinion, is it possible?
Thanks
Nico

Last edited by Nico3939 (2019-05-16 01:27:39)

Offline

#2 2019-05-16 01:32:21

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,657
Website

Re: Custom list of choice

in your phplugins file, did you put the script in a properly formatted function?

for Backlight 1:

function ttg_scripts($style, $path) {
      echo'
          <script>
              function moveNumbers(number){
             document.getElementById("result").value=number;
        }
        </script>
    ';
}

Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#3 2019-05-16 02:20:35

Nico3939
Member
From: France
Registered: 2016-10-05
Posts: 175
Website

Re: Custom list of choice

Yes but when I click button nothing happen, the field is not populate

Also try with document.getElementsByName, don't works

Offline

#4 2019-05-16 02:39:01

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 1,388
Website

Re: Custom list of choice

A link to your site would be helpful.


Daniel Leu | Photography   
DanielLeu.com

Offline

#5 2019-05-16 02:42:44

Nico3939
Member
From: France
Registered: 2016-10-05
Posts: 175
Website

Re: Custom list of choice

my site is still in development but you can look here:

https://phototheque.nicolaslogerot.com/?page=radiotest






Web adress change because web site still in development

Last edited by Nico3939 (2019-05-16 09:34:49)

Offline

#6 2019-05-16 03:12:24

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 1,388
Website

Re: Custom list of choice

Two things, it is getElementsByName with an 's', and it returns a NodeList: try document.getElementsByName("result")[0]

<script>
     function moveNumbers(number){
         document.getElementsByName("result")[0].value=number;
     }
</script>

I think that this approach, which I like very much, should work with node lists too. The result field can be hidden with css/javascript to not confuse the user once it is working.


Daniel Leu | Photography   
DanielLeu.com

Offline

#7 2019-05-16 03:30:59

Nico3939
Member
From: France
Registered: 2016-10-05
Posts: 175
Website

Re: Custom list of choice

YES Daniel it works! you can try by the link before

Capture-d-cran-2019-05-15-20-32-45.png
image habbo

Thanks very much!

The only problem is in the confirmation mail who send the code, not the field name

Capture-d-cran-2019-05-15-20-27-16.png
image habbo

Last edited by Nico3939 (2019-05-16 03:33:10)

Offline

#8 2019-05-16 03:45:26

Nico3939
Member
From: France
Registered: 2016-10-05
Posts: 175
Website

Re: Custom list of choice

Daniel wrote:

I think that this approach, which I like very much, should work with node lists too. The result field can be hidden with css/javascript to not confuse the user once it is working.


Good idea Daniel ! but it requires some knowledge in CSS to link the buttons between them and change the state clicked between them.

Ex. If I click on a button, change state, click on another, then it changes state, but the previous one goes back to its original state ... we almost got to create radio buttons !

Offline

#9 2019-05-16 03:51:48

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 1,388
Website

Re: Custom list of choice

Yeah, this doesn't look nice.

Maybe you could try to insert the selection using javascript instead of (miss)using the text field.


Daniel Leu | Photography   
DanielLeu.com

Offline

#10 2019-05-16 03:59:01

Nico3939
Member
From: France
Registered: 2016-10-05
Posts: 175
Website

Re: Custom list of choice

yes no doubt Daniel, but I'm definitely not good enough to do that!

Offline

#11 2019-05-16 03:59:58

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 1,388
Website

Re: Custom list of choice

Nico3939 wrote:
Daniel wrote:

I think that this approach, which I like very much, should work with node lists too. The result field can be hidden with css/javascript to not confuse the user once it is working.


Good idea Daniel ! but it requires some knowledge in CSS to link the buttons between them and change the state clicked between them.

Ex. If I click on a button, change state, click on another, then it changes state, but the previous one goes back to its original state ... we almost got to create radio buttons !

A working example: https://www.w3schools.com/code/tryit.as … 3L95Z8F28B


Daniel Leu | Photography   
DanielLeu.com

Offline

#12 2019-05-16 04:03:03

Nico3939
Member
From: France
Registered: 2016-10-05
Posts: 175
Website

Re: Custom list of choice

Oh, mashed!  I would have spent hours doing this!  it's great Daniel!
I had not thought of that!

Last edited by Nico3939 (2019-05-16 04:04:19)

Offline

#13 2019-05-16 04:08:24

Nico3939
Member
From: France
Registered: 2016-10-05
Posts: 175
Website

Re: Custom list of choice

good now i'm going to look at the css to hide the field to the visitor on the front end and look for that returning the name of the field in the email is ok

Offline

#14 2019-05-16 04:10:51

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 1,388
Website

Re: Custom list of choice

Nico3939 wrote:

Oh, mashed!  I would have spent hours doing this!  it's great Daniel!
I had not thought of that!

It's all based on your code smile


Daniel Leu | Photography   
DanielLeu.com

Offline

#15 2019-05-16 04:18:14

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 1,388
Website

Re: Custom list of choice

Nico3939 wrote:

good now i'm going to look at the css to hide the field to the visitor on the front end and look for that returning the name of the field in the email is ok

Here is the code for your custom.css:

form input[name=temp] {
    display: none !important;
}

Daniel Leu | Photography   
DanielLeu.com

Offline

#16 2019-05-16 04:22:19

Nico3939
Member
From: France
Registered: 2016-10-05
Posts: 175
Website

Re: Custom list of choice

Unity is strength, thanks for you help Daniel!

Offline

#17 2019-05-16 04:23:24

Nico3939
Member
From: France
Registered: 2016-10-05
Posts: 175
Website

Re: Custom list of choice

Daniel Leu wrote:
Nico3939 wrote:

good now i'm going to look at the css to hide the field to the visitor on the front end and look for that returning the name of the field in the email is ok

Here is the code for your custom.css:

form input[name=temp] {
    display: none !important;
}

Your so fast! Thanks

Offline

#18 2019-05-16 05:33:14

Nico3939
Member
From: France
Registered: 2016-10-05
Posts: 175
Website

Re: Custom list of choice

I've change the original adress because my website is still in development, so now the code is for contact from, but it's the same way.

Originaly, the selected radio was for Invoiced Checkout page to allow the customer to indicate the payment method for the future (check, bank transfer or administrative mandate)...


https://phototheque.nicolaslogerot.com/?page=radiotest

Offline

#19 2019-05-16 06:32:31

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 1,388
Website

Re: Custom list of choice

Nico3939 wrote:

I've change the original adress because my website is still in development, so now the code is for contact from, but it's the same way.

Originaly, the selected radio was for Invoiced Checkout page to allow the customer to indicate the payment method for the future (check, bank transfer or administrative mandate)...


https://phototheque.nicolaslogerot.com/?page=radiotest

I like the look with the radio button.

For this page, the code would be

.slug-radiotest form input[name=field_10] {
    display: none!important;
}

and it belongs in https://phototheque.nicolaslogerot.com/ … e-home.css. I have added the slug-radiotest class so it only applies to this page.


Daniel Leu | Photography   
DanielLeu.com

Offline

#20 2019-05-16 06:35:37

Nico3939
Member
From: France
Registered: 2016-10-05
Posts: 175
Website

Re: Custom list of choice

Done with your modification.

Last edited by Nico3939 (2019-05-16 06:38:51)

Offline

#21 2019-05-16 06:40:00

Nico3939
Member
From: France
Registered: 2016-10-05
Posts: 175
Website

Re: Custom list of choice

I'm looking desperately now for the way to not send the value of the field (name) in the confirmation email for the Cart module and replace by for example:

Payment method chooses:

Last edited by Nico3939 (2019-05-16 06:40:19)

Offline

#22 2019-05-16 07:14:56

Nico3939
Member
From: France
Registered: 2016-10-05
Posts: 175
Website

Re: Custom list of choice

It's interesting to see that the contact module send by mail:

Capture-d-cran-2019-05-16-00-10-24.jpg



And the cart module send by mail:

Capture-d-cran-2019-05-15-20-27-16.png

Offline

#23 2019-05-16 07:15:11

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 1,388
Website

Re: Custom list of choice

Maybe something like this might work:

function ttg_scripts($style, $path) {
      echo'
          <script>
$(".slug-radiotest .contact-field_10 label").append(\'<input type="radio" name="gender" value="red" onclick="moveNumbers(this.value)"> Red<br>   <input type="radio" name="gender" value="green" onclick="moveNumbers(this.value)"> Green<br>   <input type="radio" name="gender" value="blue" onclick="moveNumbers(this.value)">Blue\');
        </script>
    ';
}

The code adds the radio buttons to contact-field-10.


Daniel Leu | Photography   
DanielLeu.com

Offline

#24 2019-05-16 08:06:59

Nico3939
Member
From: France
Registered: 2016-10-05
Posts: 175
Website

Re: Custom list of choice

Seems to work with contact module.

But cart module has no field as:

<p class="contact-field_12">

Last edited by Nico3939 (2019-05-16 08:07:33)

Offline

#25 2019-05-16 08:14:14

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 1,388
Website

Re: Custom list of choice

Nico3939 wrote:

It's interesting to see that the contact module send by mail:

https://i.ibb.co/GT6KSyB/Capture-d-cran-2019-05-16-00-10-24.jpg

Great! So the concept works smile


Daniel Leu | Photography   
DanielLeu.com

Offline

Board footer

Powered by FluxBB