Custom list of choice

Nico3939 · 2019-05-16 01:12:28

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)

rod barbee · 2019-05-16 01:32:21

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>
    ';
}

Nico3939 · 2019-05-16 02:20:35

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

Also try with document.getElementsByName, don't works

Daniel Leu · 2019-05-16 02:39:01

A link to your site would be helpful.

Nico3939 · 2019-05-16 02:42:44

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)

Daniel Leu · 2019-05-16 03:12:24

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.

Nico3939 · 2019-05-16 03:30:59

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

image habbo

Thanks very much!

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

image habbo

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

Nico3939 · 2019-05-16 03:45:26

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 !

Daniel Leu · 2019-05-16 03:51:48

Yeah, this doesn't look nice.

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

Nico3939 · 2019-05-16 03:59:01

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

Daniel Leu · 2019-05-16 03:59:58

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

Nico3939 · 2019-05-16 04:03:03

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)

Nico3939 · 2019-05-16 04:08:24

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

Daniel Leu · 2019-05-16 04:10:51

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

Daniel Leu · 2019-05-16 04:18:14

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;
}

Nico3939 · 2019-05-16 04:22:19

Unity is strength, thanks for you help Daniel!

Nico3939 · 2019-05-16 04:23:24

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

Nico3939 · 2019-05-16 05:33:14

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

Daniel Leu · 2019-05-16 06:32:31

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.

Nico3939 · 2019-05-16 06:35:37

Done with your modification.

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

Nico3939 · 2019-05-16 06:40:00

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)

Nico3939 · 2019-05-16 07:14:56

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

And the cart module send by mail:

Daniel Leu · 2019-05-16 07:15:11

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.

Nico3939 · 2019-05-16 08:06:59

Seems to work with contact module.

But cart module has no field as:

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

Daniel Leu · 2019-05-16 08:14:14

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

Community @ The Turning Gate

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

Custom list of choice

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

Re: Custom list of choice

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

Re: Custom list of choice

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

Re: Custom list of choice

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

Re: Custom list of choice

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

Re: Custom list of choice

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

Re: Custom list of choice

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

Re: Custom list of choice

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

Re: Custom list of choice

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

Re: Custom list of choice

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

Re: Custom list of choice

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

Re: Custom list of choice

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

Re: Custom list of choice

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

Re: Custom list of choice

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

Re: Custom list of choice

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

Re: Custom list of choice

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

Re: Custom list of choice

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

Re: Custom list of choice

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

Re: Custom list of choice

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

Re: Custom list of choice

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

Re: Custom list of choice

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

Re: Custom list of choice

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

Re: Custom list of choice

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

Re: Custom list of choice

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

Re: Custom list of choice

Board footer