-1

I'd like to select an input: <input id="tb-radio-gym_custom_radio-10ce67e3" type="radio" value="OUI" name="form_fields[gym_custom_radio]" data-price-inc="0" checked="checked">

I'd like to select it, by his name and value. The id is random so i can't select like this.

I don't know how to select it with : value="OUI" and name="form_fields[gym_custom_radio]"

When i can select this input, i'd like to hide it then. It can be JS or Jquery, i tried but i can't do it, so thank you for your help !!

seb606
  • 31
  • 7

1 Answers1

0

Use an Attribute Selector with multiple attributes.

const radioButton = document.querySelector(
    'input[name="form_fields[gym_custom_radio]"][value="OUI"]')

Make sure you quote the values so you don't run into trouble with the square-brackets in the name.

You can use the same selector string with jQuery.

Demo...

const radioButton = document.querySelector(
    'input[name="form_fields[gym_custom_radio]"][value="OUI"]')
    
radioButton.classList.add('active')
console.log('OUI data-price-inc:', radioButton.dataset.priceInc)
.active {
  box-shadow: 0px 0px 5px 2px red;
}
<input id="tb-radio-gym_custom_radio-10ce67e3" type="radio" value="OUI" name="form_fields[gym_custom_radio]" data-price-inc="0" checked="checked">
<input id="tb-radio-gym_custom_radio-7r7r09r" type="radio" value="NON" name="form_fields[gym_custom_radio]" data-price-inc="1">
Phil
  • 128,310
  • 20
  • 201
  • 202
  • Thank you for your answer but i get this error : "TypeError: radioButton is null" – seb606 Apr 24 '20 at 05:33
  • @seb606 either your element does not look like it does in your question or you are running the JS **before** the element appears in your document. If the latter, please see [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Phil Apr 24 '20 at 05:44
  • Thank you Phil, yes i think it's because of this. I use a reservation calendar, nd as you said, i think the element doesn't appear yet. I will see with the link you game me, maybe with the "defer attribute". (if you think it can be good ?) – seb606 Apr 24 '20 at 05:59
  • I tried like this: `document.addEventListener('DOMContentLoaded', function() { const radioButton = document.querySelector('input[name="form_fields[gym_custom_radio]"][value="OUI"][checked="checked"]') radioButton.classList.add('cacheInputOui') console.log('OUI data-price-inc:', radioButton.dataset.priceInc) });` I have no error but nothing happened... – seb606 Apr 24 '20 at 06:15
  • Do you see the console line with `OUI data-price-inc:`? You should either see that or an error but not _nothing_ – Phil Apr 24 '20 at 06:21
  • I don't see it, here is the similar page: https://www.coursdeyoga-94.fr/reservations/ The input i tried to change is after i selected a date and time. – seb606 Apr 24 '20 at 06:30
  • Your document appear to be updating dynamically. You will need to run the selector script at the appropriate time – Phil Apr 24 '20 at 06:33
  • Thank you Phil, yes it's like this but i use a Wordpress plugin and not easy to know where and how i can do this. (i included the plugin in another page i did with my own code). I'll try to see with the WP plugin's author. – seb606 Apr 24 '20 at 06:43