Restart jquery function when condition inside it is met

Question

I got a payment page which shows a couple of payment options, if the payment option is equal to 10, it shows a list of banks that payment option support.

According to what bank is clicked I generate a button with the correct payment url.

My problem is that the script fires its ajax post only once, when I check the toppaymentopt radio button.

But I want to post again when a bank is clicked in the shown dropdown.

How can I do that?

This is my code with an attempt (which doesn't work unfortunately):

tpj('#checkoutform').on('change', 'input[name="toppaymentopt"]', function () {
  if(tpj(this).attr("id") == '10'){
    tpj('#checkoutform').on('change', '#idealbank > option', function () {
      var $idealbanken = tpj('#idealbank > option').val();
    });
    tpj("#idealbank").show();
  }else{
    var $idealbanken = '';
    tpj("#idealbank").hide();
  }

  // Laat een loading gif zien voor wanneer de afrekenen link wordt gegenereerd
  tpj(".buttoncheckout").html("<img class='loadingif' src='images/loading.gif'>");
  // Check of de afwijkend adres checkbox is aangeklikt
  if (tpj('input[name="checkbox"]').prop('checked')) {
    $afwijkendpostcode = tpj('input[name="billing_postcodeafw"]').val(),
    $afwijkendhuisnummer = tpj('input[name="billing_housenumberafw"]').val(),
    $afwijkendstraat = tpj('input[name="straatafw"]').val(),
    $afwijkendplaats = tpj('input[name="plaatsafw"]').val();
  }else{
    $afwijkendpostcode = '',
    $afwijkendhuisnummer = '',
    $afwijkendstraat = '',
    $afwijkendplaats = '';
  }

  var url = 'includes/betaal.php',
  $betaalid = tpj(this).attr("id"),
  $bedrag = tpj('input[name="totaalbedrag"]').val(),
  $voornaam = tpj('input[name="billing_first_name"]').val(),
  $achternaam = tpj('input[name="billing_last_name"]').val(),
  $mail = tpj('input[name="billing_email"]').val();

  var posting = tpj.post( url, {
    betaalid: $betaalid,
    bedrag: $bedrag,
    voornaam: $voornaam,
    achternaam: $achternaam,
    mail: $mail,
    afwijkendpostcode: $afwijkendpostcode,
    afwijkendhuisnummer: $afwijkendhuisnummer,
    afwijkendstraat: $afwijkendstraat,
    afwijkendplaats: $afwijkendplaats,
    idealbanken: $idealbanken
  } );
  // Stop het resultaat in een div met de class .adresscript
  posting.done(function( data ) {
    tpj( ".buttoncheckout" ).empty().append( data );
  });
});

This is my generated payment list from my PHP file:

<div id="payment" class="kl-store-checkout-payment">
   <ul class="payment_methods methods">
      <li>
         <input type="radio" name="toppaymentopt" id="10"> <img src="https://admin.pay.nl/images/payment_profiles/10.gif"> <label> iDEAL</label> 
         <select class="bankdropdown" id="idealbank" style="display: inline-block;">
            <option value="1">ABN Amro</option>
            <option value="2">Rabobank</option>
            <option value="4">ING Bank</option>
            <option value="5">SNS Bank</option>
            <option value="8">ASN Bank</option>
            <option value="9">RegioBank</option>
            <option value="10">Triodos Bank</option>
            <option value="11">Van Lanschot Bankiers</option>
            <option value="12">Knab bank</option>
            <option value="5080">Bunq</option>
         </select>
      </li>
   </ul>
</div>

I know I can just copy paste the ajax post but it must be possible to do this with fewer lines of code.

Answer 1

tpj(document).ready(function(){

tpj('#checkoutform').on('change', 'input[name="toppaymentopt"]', function () {
  if(tpj(this).attr("id") == '10'){
    tpj("#idealbank").show();
  }else{
    var $idealbanken = '';
    tpj("#idealbank").hide();
  }
});

tpj('#checkoutform').on('change', '#idealbank', function () {
      var $idealbanken = tpj('#idealbank').val();
      run_ajax($idealbanken);
});


function run_ajax($idealbanken){

  // Laat een loading gif zien voor wanneer de afrekenen link wordt gegenereerd
  tpj(".buttoncheckout").html("<img class='loadingif' src='images/loading.gif'>");
  // Check of de afwijkend adres checkbox is aangeklikt
  if (tpj('input[name="checkbox"]').prop('checked')) {
    $afwijkendpostcode = tpj('input[name="billing_postcodeafw"]').val(),
    $afwijkendhuisnummer = tpj('input[name="billing_housenumberafw"]').val(),
    $afwijkendstraat = tpj('input[name="straatafw"]').val(),
    $afwijkendplaats = tpj('input[name="plaatsafw"]').val();
  }else{
    $afwijkendpostcode = '',
    $afwijkendhuisnummer = '',
    $afwijkendstraat = '',
    $afwijkendplaats = '';
  }

  var url = 'includes/betaal.php',
  $betaalid = tpj('input[name="toppaymentopt"]').attr("id"),
  $bedrag = tpj('input[name="totaalbedrag"]').val(),
  $voornaam = tpj('input[name="billing_first_name"]').val(),
  $achternaam = tpj('input[name="billing_last_name"]').val(),
  $mail = tpj('input[name="billing_email"]').val();

  var posting = tpj.post( url, {
    betaalid: $betaalid,
    bedrag: $bedrag,
    voornaam: $voornaam,
    achternaam: $achternaam,
    mail: $mail,
    afwijkendpostcode: $afwijkendpostcode,
    afwijkendhuisnummer: $afwijkendhuisnummer,
    afwijkendstraat: $afwijkendstraat,
    afwijkendplaats: $afwijkendplaats,
    idealbanken: $idealbanken
  } );
  // Stop het resultaat in een div met de class .adresscript
  posting.done(function( data ) {
    tpj( ".buttoncheckout" ).empty().append( data );
  });
}
});

You can use this code. No need to bind select on change inside radio on change. Separate these two events. Create a function to run AJAX. Now call this function on change of the select value.