Call different javascript files based on radio-button values

Question

First I would like to select among radio buttons, and then based on the selected button I would like to call a series of different javascript files (see demo.js and demo1.js is the difference). Here is my code, but it doesn't work:

  <body>
  <form action="/action_page.php">
      <p>Please select your gender:</p>
      <input type="radio" id="male" name="gender" value="male">
      <label for="male">Male</label><br>
      <input type="radio" id="female" name="gender" value="female">
      <label for="female">Female</label><br>
      <input type="radio" id="other" name="gender" value="other">
      <label for="other">Other</label>
      var form = document.getElementById("gender");
  </form>       
    <!-- INCLUDE JEELIZ FACEFILTER SCRIPT -->
    <script src="../../../dist/jeelizFaceFilter.js"></script>
    <!-- INCLUDE THREE.JS -->
    <script src="../../../libs/threejs/v97/three.js"></script>
    <!-- INCLUDE JEELIZRESIZER -->
    <script src="../../../helpers/JeelizResizer.js"></script>
    <!-- INCLUDE JEELIZTHREEJSHELPER -->
    <script src="../../../helpers/JeelizThreejsHelper.js"></script>
    <!-- INCLUDE FLEXMATERIAL (CUSTOM DEV) -->
    <script src="../../../libs/threejs/customMaterials/FlexMaterial/ThreeFlexMaterial.js"></script>
    <!-- INCLUDE TWEEN.JS -->
    <script src='../../../libs/tween/v16_3_5/Tween.min.js'></script>
    <!-- INCLUDE JQUERY -->
    <script src='../../../libs/jquery/jquery-3.3.1.min.js'></script>
    <!-- INCLUDE GLFX -->
    <script src='libs/glfx.js'></script>
    <!-- INCLUDE DEMO SCRIPT -->
    if(form="male")
    {
    <script src="./demo.js"></script>
    }
    else
    {
    <script src="./demo1.js"></script>
    }
    <!-- INCLUDE ADDDRAGEVENTLISTENER.JS -->
    <script src='../../../helpers/addDragEventListener.js'></script>
  </body>

Your approach can't work this way for several reasons. HTML has no `if()` or any logic programming ability. Even if it did, the `if()` would run when page loads, not when event occurs. Also `form` is an element and is not a string. Why do you think you need different script files for this? What you have here is known as an [XY Problem](http://xyproblem.info/) — charlietfl, Aug 22 '20 at 14:30
I would like to choose between different face filters (demo.js and demo1.js) with the radio buttons. How could I do it? — knorbika, Aug 22 '20 at 14:36
You would assign change event listeners to the radios and when the event occurs use value of the radio to determine the logic to process — charlietfl, Aug 22 '20 at 14:38

score 0 · Answer 1 · edited Aug 22 '20 at 15:04

0

This question has been asked before multiple times. You could create a custom function.

function include(filename)
{
   var head = document.getElementsByTagName('head')[0];

   var script = document.createElement('script');
   script.src = filename;
   script.type = 'text/javascript';

   head.appendChild(script); 
}

if this script does not work, i suggest you to look over and read this post: How do I include a JavaScript file in another JavaScript file?

edited Aug 22 '20 at 15:04

Dharman

30,962
25
85
135

answered Aug 22 '20 at 14:58

Nick van der Waal

414
2
13

Highly suspect that OP thinks they need different scripts where all they really need is different logic based on a change event. – charlietfl Aug 22 '20 at 15:01

score 0 · Accepted Answer · answered Aug 22 '20 at 15:23

Since you already are using jQuery (referenced in your posted code), the easiest way to do this is to use jQuery and ajax.

First, you need to detect the user clicking the radio button. Then, you can check which radio button was clicked and use jQuery $.load() (one of the ajax functions, which will load a file from the server into your project).

Example code (untested):

<p>Please select your gender:</p>
<label for="male">
   Male: <input type="radio" id="male" name="gender" value="male">
</label><br>
<label for="female">
   Female: <input type="radio" id="female" name="gender" value="female">
</label><br>
<label for="other">
   Other: <input type="radio" id="other" name="gender" value="other">
</label>
<div id="loader"></div>


$(function(){
   $('input[type=radio]').click(function(){
      let id = this.id;
      //alert(`You chose: ${id}`);
      if (id === 'male'){
         $('#loader').load('./demo.html');
      }else if (id === 'female'){
         $('#loader').load('./demo1.html');
      }
   });
});

Note that the demo.html/demo1.html files will just contain the javascript you wish to load, but between <script> and </script> tags - since they are html documents.

Also note that there is no need for the <form> construct. We used forms in the days before we had ajax. See this question for more info.

Call different javascript files based on radio-button values

2 Answers2