Styjun

I want, depending on the radio selected, for the javascript associated with the radio to function, and when its not selected or deselected, to not be functioning.

HTML for tabs and radios:

<nav>
 <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
 <a class="nav-item nav-link active no-decoration" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Video</a>
 <a class="nav-item nav-link no-decoration" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Tweet</a>
 </div>
</nav>
<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
 <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">

 <div class="card-body">
 CHOOSE RADIO

 <form id="selectForm">
 <ul class="nav flex-column">
 <li class="nav-item">
 <label class="custom-control custom-radio in active">
 <input type="radio" name="distTravel" value="Ontario" class=" no-decoration" data-id="onlyON" />
 <span class="custom-control-indicatore"></span>
 <span class="custom-control-description">You</span>
 </label>
 </li>
 <li class="nav-item">
 <label class="custom-control custom-radio">
 <input type="radio" name="distTravel" value="NA" class=" no-decoration" data-id="onlyNA" />
 <span class="custom-control-indicator"></span>
 <span class="custom-control-description">Someone else</span>
 </label>
 </li>
 </ul>
 </form>

 <div class="tab-content in active">
 <div class="card-block tab-pane active" id="onlyON">
 TEXT
 </div>

 <span class="token"></span>
 <% end %>
 <% end %>
 </div>
 <div class="card-block tab-pane" id="onlyNA">

 </div>

 </div>
 </div>

</div>
</div>
<div class="tab-pane-1 fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
 <div class="card-body">

 CHOOSE RADIO
 <form id="selectForm">
 <ul class="nav flex-column">
 <li class="nav-item">
 <label class="custom-control custom-radio">
 <input type="radio" name="distTravel-2" value="Ontario-2" class="no-decoration" data-id="onlyON-1" />
 <span class="custom-control-indicator"></span>
 <span class="custom-control-description">You</span>
 </label>
 </li>
 <li class="nav-item">
 <label class="custom-control custom-radio">
 <input type="radio" name="distTravel-2" value="NA-2" class="no-decoration" data-id="onlyNA-1" />
 <span class="custom-control-indicator"></span>
 <span class="custom-control-description">Someone else</span>
 </label>
 </li>
 </ul>
 </form>

 <div class="tab-content-2 in active">
 <div class="card-block tab-pane-1 active" id="onlyON-1">

 TEXT
 </div>

 <span class="token"></span>

 <div class="card-block tab-pane-1" id="onlyNA-1">
 </div>
 <% end %>
 <% end %>
 </div>
 </div>
</div>

Javascript tags:

<%= javascript_include_tag "stripe" %>
<%= javascript_include_tag "stripe-a" %>
<%= javascript_include_tag "stripe-2" %>
<%= javascript_include_tag "stripe-2-a" %>

For example:

If radio [data-id="onlyON"] is selected, then <%= javascript_include_tag "stripe" %> will be be loaded. Then, when [data-id="onlyON-1"] is selected, <%= javascript_include_tag "stripe" %> will unload, and <%= javascript_include_tag "stripe-a" %> will load so on and so fourtha

There's no easy way to unload/disable a script tag once it's added to a document; especially when it's a third-party script like Stripe, and not a script you can easily edit yourself.

Instead, I'd break the problem into multiple documents. If the body of each tab includes an iframe, and each iframe contains a Stripe JS file and the form components it cares about, you'll have isolated each Stripe script to its own document and they shouldn't interfere with each other.

I surrounded the js stripe code with click functions. works. when a radio or tab is clicked (depending on form navigation) the js code will "toggle" on. it works when going back and fourth between function toggles as well.

All solved now and haven't had issues from my tests