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

Improve this question

1 Answer 1

Reset to default
1

Checkboxes are handled differently in html and in Javascript/JQuery. Value is not what you want to change here. You want to set your variable's value based on a checkbox property.

Based on your feedback I have updated the code where the select change makes the ajax call to initiate the form based on selected value. And then on change of any input in the form the values are read back to format the string for hidden field.

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

  $("#pick_listing").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();  

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

  $("#no-text, #customCheck1, #customCheck2, #customCheck3").change(function() {
      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");
      }

      var duration_value = $('#no-text').val();
      var listing = $('#pick_listing').val();
      var featured = ($('#customCheck1').prop('checked')) ? "1" : "0";
      var topsearch = ($('#customCheck2').prop('checked')) ? "1" : "0";
      var sidebar = ($('#customCheck3').prop('checked')) ? "1" : "0";

      // 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);


  });
Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

Thanks for your reply Nawed! I have changed the lines but it's still the same, the featured, topsearch and sidebar vars won't update when I click/unclick the checkbox. It stays the same.
If its unclear to you maybe, so all the var variables should be changable, and all of them are instead of checkboxes, after I click for example #customCheck1 checkbox it should make var featured = 1. But when I click it it won't change its variable and it won't update it in this line $('input[name=custom]').val. So for your reference this is the image of the console, as you see checkbox 1 is checked but in console it still stands as 0 i.imgur.com/giKi1Zk.png. So the three last 0 are actually featured, topsearch and sidebar vars, those should be updated checkmark change.
I think it has something to do with that the checkboxes are in the page that gets called by ajax and other varibales are not, maybe I'm wrong.
Are you re-drawing the whole form from promote.php via ajax every time the checkbox is changed? If you are then you should realize that the checkboxes coming from ajax are not checked because by default everything is 0 in your database.
I want to re-draw the whole form via ajax everytime the select changes. Then the checkboxes as you see on promote.php have value depending on its column, so if the listings column sidebar has 1 it will show 1 in value and vice versa. And then users can check "unpromoted" promotions with the value 0 by clicking, and when they do the checkbox value should apply in my AJAX and inside input name custom so that it can be applied.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.