Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 74735

Change variables on click after AJAX call

$
0
0

I can't find an answer or solution to this issue that I'm facing. So I have made a script (php & jquery) that allows users to promote their "listings" on my website. So when they land on a page they can select which listing they want to promote, then when they select it the jquery calls AJAX (on select change) which then calls the php page and get the plans for the selected listing. Since I'm using PayPal Standard I can only pass variables with one input (I'm storing all variables in one custom input and then read them on the php page as array). Everything works fine, my listing ID gets changed when the listing is changed, the days duration gets changed when they change it in input but the thing that doesn't work is checkboxes.

So in the datebase I have three columns under listing table (featured, topsearch, sidebar) and by default their value is 0. So on the page I disable all plans that are already promoted with getting the value out of the datebase and then if the value is 0 the plan is available for promoting, and if its 1 its already promoted and its disabled for promoting. Now when the checkbox is selected for the certain plan it changes the checkbox value to 1, and then the plan is to update the listing and for example if user selected sidebar it will update the column from 0 to 1. But whatever I do the var featured, var topsearch and var sidebar won't change in my AJAX call after clicking them. It updates the checkbox input value but it won't reflect in my AJAX call.

jQuery:

$('.select-placement').hide();
  $('.s-b').hide();
  $('#count-duration').text('0');

  $("#pick_listing, #no-text, #customCheck1, #customCheck2, #customCheck3").change(function() {
    var selectedValue = $('#pick_listing').val();
    $.ajax({
    url: '../paypal/promote/promote.php',
    type: 'POST',
    data: {selectedValue: selectedValue},
    success: function(data) {
    $('.select-placement').show();
    $(".select-results").html(data);
    $('.s-b').show();

    let ajax_duration = parseFloat($('#no-text').val() || '0');
    if (ajax_duration == 1) {
    $('#count-duration').text(ajax_duration + " day");
    } else {
    $('#count-duration').text(ajax_duration + " days");
    }

   // Changes checkbox value if its checked -- NOT WORKING
   if ($('#customCheck1').is(':checked')) {
      $("#customCheck1").val("1");
   } else { 
      $("#customCheck1").val("0");
   }

   if ($('#customCheck2').is(':checked')) {
      $("#customCheck2").val("1");
   } else { 
      $("#customCheck2").val("0");
   }

   if ($('#customCheck3').is(':checked')) {
      $("#customCheck3").val("1");
   } else { 
      $("#customCheck3").val("0");
   }

    var duration_value = $('#no-text').val();
    var listing = $('#pick_listing').val();
    var featured = $('#customCheck1').val(); // It should update when the checkbox is checked
    var topsearch = $('#customCheck2').val(); // It should update when the checkbox is checked
    var sidebar = $('#customCheck3').val(); // It should update when the checkbox is checked

    // This is the custom PayPal input in which I store all the collected variables 
   // All variables changes on change function instead of checkbox 
    $('input[name=custom]').val("<?php echo $current_token; ?>," + listing + "," + duration_value + "," + featured + "," + topsearch + "," + sidebar);

    $('#tots').text("0");
    $('#tots2').text("0");
    $('#icon1').css('color','#ccc');
    $('#icon2').css('color','#ccc');
    $('#icon3').css('color','#ccc');
    }
    });
});

promote.php file:

$placement_token = $_POST['selectedValue']; // Getting the value from AJAX

// Call the promote options
$listing_placement = mysqli_query($conn, "SELECT featured, topsearch, sidebar FROM listing WHERE listing_token='$placement_token'"); ?>
<form id="custom-form" class="row row-placement">
<?php while($place_row = mysqli_fetch_row($listing_placement)) { 
    if ($place_row[0] == 1) { ?>
  <div class="col-sm-4 listing-disabled">
    <div class="select-ad disabled-ad">
      <div class="already-promoted">Already Promoted</div>
      <div class="ad-image">
        <div class="lp-select-top input-group margin-right-0 clearfix">
          <div class="custom-control custom-checkbox cst-check">
    <input type="checkbox" class="custom-control-input checks" id="customCheck1" data-price="10" value="1">
            <label class="custom-control-label" for="customCheck1"></label>
          </div>
        </div>
        <img src="https://classic.listingprowp.com/wp-content/themes/listingpro/assets/images/spotlight.png">
      </div>
      <div class="price-content">
        <h5>Featured</h5>
        <label for="customCheck1">$10 / day</label>
      </div>
    </div>
  </div>
<?php } else { ?> 
    <div class="col-sm-4">
    <div class="select-ad active-ad">
      <div class="ad-image">
        <div class="lp-select-top input-group margin-right-0 clearfix">
          <div class="custom-control custom-checkbox cst-check">
            <input type="checkbox" class="custom-control-input checks" id="customCheck1" data-price="10" value="0">
            <label class="custom-control-label" for="customCheck1"></label>
          </div>
        </div>
        <img src="https://classic.listingprowp.com/wp-content/themes/listingpro/assets/images/spotlight.png">
      </div>
      <div class="price-content">
        <h5>Featured</h5>
        <label for="customCheck1">$10 / day</label>
      </div>
    </div>
  </div>
<?php } if ($place_row[1] == 1) { ?>
<div class="col-sm-4 listing-disabled">
  <div class="select-ad disabled-ad">
    <div class="already-promoted">Already Promoted</div>
    <div class="ad-image">
      <div class="lp-select-top input-group margin-right-0 clearfix">
        <div class="custom-control custom-checkbox cst-check">
          <input type="checkbox" class="custom-control-input checks" id="customCheck2" data-price="50" value="1">
          <label class="custom-control-label" for="customCheck2"></label>
        </div>
      </div>
      <img src="https://classic.listingprowp.com/wp-content/themes/listingpro/assets/images/topofsearch.png">
    </div>
    <div class="price-content">
      <h5>Top of Search</h5>
      <label for="customCheck2">$50 / day</label>
    </div>
  </div>
</div>
<?php } else { ?>
<div class="col-sm-4">
  <div class="select-ad active-ad">
    <div class="ad-image">
      <div class="lp-select-top input-group margin-right-0 clearfix">
        <div class="custom-control custom-checkbox cst-check">
          <input type="checkbox" class="custom-control-input checks" id="customCheck2" data-price="50" value="0">
          <label class="custom-control-label" for="customCheck2"></label>
        </div>
      </div>
      <img src="https://classic.listingprowp.com/wp-content/themes/listingpro/assets/images/topofsearch.png">
    </div>
    <div class="price-content">
      <h5>Top of Search</h5>
      <label for="customCheck2">$50 / day</label>
    </div>
  </div>
</div>
<?php } if ($place_row[2] == 1) { ?>
<div class="col-sm-4 listing-disabled">
  <div class="select-ad disabled-ad">
    <div class="already-promoted">Already Promoted</div>
    <div class="ad-image">
      <div class="lp-select-top input-group margin-right-0 clearfix">
        <div class="custom-control custom-checkbox cst-check">
          <input type="checkbox" class="custom-control-input checks" id="customCheck3" data-price="20" value="1">
          <label class="custom-control-label" for="customCheck3"></label>
        </div>
      </div>
      <img src="https://classic.listingprowp.com/wp-content/themes/listingpro/assets/images/listingsidebar.png">
    </div>
    <div class="price-content">
      <h5>Sidebar</h5>
      <label for="customCheck3">$20 / day</label>
    </div>
  </div>
</div>
<?php } else { ?>
<div class="col-sm-4">
  <div class="select-ad active-ad">
    <div class="ad-image">
      <div class="lp-select-top input-group margin-right-0 clearfix">
        <div class="custom-control custom-checkbox cst-check">
          <input type="checkbox" class="custom-control-input checks" id="customCheck3" data-price="20" value="0">
          <label class="custom-control-label" for="customCheck3"></label>
        </div>
      </div>
      <img src="https://classic.listingprowp.com/wp-content/themes/listingpro/assets/images/listingsidebar.png">
    </div>
    <div class="price-content">
      <h5>Sidebar</h5>
      <label for="customCheck3">$20 / day</label>
    </div>
  </div>
</div>
<?php } } ?> 
</form>

And I really got confused because the var duration_value and var selectedValue gets updated on every change, but checkboxese won't. I have read that I should be using document on change instead of just change function but I tried and it didn't helped. I know that the posted question is messy but I couldn't replicate it in jsfiddle, sorry. I just need solutions on what could it be that is holding checkboxes to change its value on CHANGE.

Regards


Viewing all articles
Browse latest Browse all 74735

Latest Images

Trending Articles



Latest Images