Click a radio button must set textfield value

Question

I have these radio-buttons in my checkout page:

<input id="95292" type="radio" name="GLSShop" value="95292" onclick="SaveShopID('95292')">
<input id="95064" type="radio" name="GLSShop" value="95064" onclick="SaveShopID('95064')">
<input id="95403" type="radio" name="GLSShop" value="95403" onclick="SaveShopID('95403')">

When user click e.g. button no. 2 I want the value of a textfield to be set to '95064'

I was thinking about making a java- or jqueryscript something like this:

function SaveShopID($ShopID){
     $("#order_comments").val($ShopID);
};

1: Would this be the best and easiest way of doing it?

2: If so, how would the script look like, I would be surprised if mine is correct ;-)

3: where do I place the script?

4: How do I add/enqueue the script? I've seen examples using add_action("wp_enqueue_scripts'.....) but I'm not sure how to do it.

I use a child-scheme of course.

And I have full control of the radio button's HTML so it can be easily changed to something else if prefered ;-)

Answer 1

There many approach for your js part on input, and you were correct, but we can't disccuss a lot about it here. And a part for your question related to WordPress, yes you are right. You can use wp_enqueue_scripts to enqueue your js function inside js file, remember to use get_stylesheet_directory_uri as part url of your js file since you are in child theme, and set to in footer ( take your time to search for example code here, a lot! ).

But for a pieces code, I would like just fire wp_footer, take a look @EAMann answer.

Your code may like this ( put in functions.php theme file ):

add_action( 'wp_footer', 'wpse222047_script_footer' );
function wpse222047_script_footer() {
?>
<script type="text/javascript">
  if ( undefined !== window.jQuery ){
      function SaveShopID($ShopID){
          jQuery("#order_comments").val($ShopID);
      }
  }
</script>
<?php
}

I hope this helps.