javascript - AJAX 调用后单击更改变量
问题描述
我找不到我面临的这个问题的答案或解决方案。所以我制作了一个脚本(php & jquery),允许用户在我的网站上推广他们的“列表”。因此,当他们登陆一个页面时,他们可以选择他们想要推广的列表,然后当他们选择它时,jquery 调用 AJAX(在选择更改时),然后调用 php 页面并获取所选列表的计划。由于我使用的是 PayPal Standard,我只能通过一个输入传递变量(我将所有变量存储在一个自定义输入中,然后在 php 页面上将它们作为数组读取)。一切正常,我的列表 ID 会在列表更改时更改,当他们在输入中更改时,持续时间会更改,但不起作用的是复选框。
因此,在数据库中,我在列表表下有三列(精选、顶部搜索、侧边栏),默认情况下它们的值为 0。因此,在页面上,我禁用所有已通过从数据库中获取值的计划,然后如果值为 0 表示计划可用于推广,如果为 1,则表示已经推广,禁用用于推广。现在,当为某个计划选择复选框时,它会将复选框值更改为 1,然后计划是更新列表,例如,如果用户选择侧边栏,它将将该列从 0 更新为 1。但无论我做什么var featured
,var topsearch
并且var sidebar
在单击它们后不会更改我的 AJAX 调用。它会更新复选框输入值,但不会反映在我的 AJAX 调用中。
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');
}
});
});
提升.php 文件:
$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>
我真的很困惑,因为var duration_value
andvar selectedValue
每次更改都会更新,但 checkboxese 不会。我已经读过我应该使用document on change
而不是仅仅使用change
功能,但我尝试过但没有帮助。我知道发布的问题很混乱,但我无法在 jsfiddle 中复制它,抱歉。我只需要关于持有复选框以更改其在 CHANGE 上的值的解决方案。
问候
解决方案
复选框在 html 和 Javascript/JQuery 中的处理方式不同。值不是你想在这里改变的。您想根据复选框属性设置变量的值。
根据您的反馈,我更新了代码,其中选择更改使 ajax 调用基于所选值启动表单。然后在更改表单中的任何输入时,将读回值以格式化隐藏字段的字符串。
$('.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);
});
推荐阅读
- javascript - 使用变异观察者检查 div 是否有类
- javascript - 如何使 Matter.js 中的鼠标事件更具响应性?
- python - Maya Python:重命名重复的联合子项
- c++ - 随机重新排列数组中的元素而不重复
- flutter - Flutter image_picker不会更改相机上的语言
- python - 如何在网格上使用 python tkinter 制作垂直和水平滚动条
- html - 添加底部边框
- r - 使用函数在 R 中创建用于可视化的箱线图
- html - 单元格底部中心的文本和同一单元格顶部中心的图像
- github - Lint 拆分的 OpenAPI 定义