Question

因此，我有两个代表不同产品的单选按钮，一旦单击其中一个，我想根据所选产品更新网站上的价格。问题是onclick可以很好地工作，在这里我只是有一个功能，它根据选中的单选按钮显示警报，但是一旦我添加了ajax查询代码，我就会在控制台中收到以下错误：“ Uncaught ReferenceError：pricecheck is没有定义的在HTMLInputElement.onclick”。我已经尝试了很多方法来解决此问题，但是还没有发现任何东西。

代码如下：

这是单选按钮：

 <input onclick="pricecheck()" type="radio" id="stdclick" name="stdmaxselect" value="standard"
         checked></br>

  <input onclick="pricecheck()" type="radio" id="maxclick" name="stdmaxselect" value="max" >

这是可通过上述html正确触发的javascript代码：

<script type="text/javascript">

function pricecheck() {
        if (document.getElementById("stdclick").checked){
alert("execute standard query");


        } else if (document.getElementById("maxclick").checked){
alert("execute max query");

        }
    }
 </script>

这是由于错误而根本不会触发的Javascript：

<script type="text/javascript">

function pricecheck() {
        if (document.getElementById("stdclick").checked){
alert("execute standard query");
          jQuery.ajax({
            url: "/functions.php", //the page containing php script
            type: "post", //request type,
            dataType: 'json',
           data: {pricechangefunction: "success", productid: "5922"}
            success: function(result) {
alert(result);
document.getElementById("pricedisplayfield").innerHTML = result;       

document.getElementById("buttonorder").innerHTML = '<a style="background-color:#dc2a1b; color:#ffffff;" class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-rounded vc_btn3-style-custom" href="?add-to-cart=5922" title="">SOLD OUT</a></div>"';           
}
         });

        } else if (document.getElementById("maxclick").checked){
alert("execute max query");
 jQuery.ajax({
            url: "/functions.php", //the page containing php script
            type: "post", //request type,
            dataType: 'json',
           data: {pricechangefunction: "success", productid: "7360"}
            success: function(result) {
alert(result);
document.getElementById("pricedisplayfield").innerHTML = result;   

document.getElementById("buttonorder").innerHTML = '<a style="background-color:#dc2a1b; color:#ffffff;" class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-rounded vc_btn3-style-custom" href="?add-to-cart=7360" title="">SOLD OUT</a></div>"';           
}
         });
        }
    }
 </script>

Answer 1

尝试使用全部jQuery。

jQuery('#stdclick').on('click', function(){

//you can get value of raido button here and use it in the code if required.

jQuery.ajax({
            url: "/functions.php", //the page containing php script
            type: "post", //request type,
            dataType: 'json',
           data: {pricechangefunction: "success", productid: "5922"}
            success: function(result) {
alert(result);
document.getElementById("pricedisplayfield").innerHTML = result;       

document.getElementById("buttonorder").innerHTML = '<a style="background-color:#dc2a1b; color:#ffffff;" class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-rounded vc_btn3-style-custom" href="?add-to-cart=5922" title="">SOLD OUT</a></div>"';           
}
         });
});

jQuery('#maxclick').on('click', function(){

//you can get value of raido button here and use it in the code if required.

jQuery.ajax({
            url: "/functions.php", //the page containing php script
            type: "post", //request type,
            dataType: 'json',
           data: {pricechangefunction: "success", productid: "7360"}
            success: function(result) {
alert(result);
document.getElementById("pricedisplayfield").innerHTML = result;   

document.getElementById("buttonorder").innerHTML = '<a style="background-color:#dc2a1b; color:#ffffff;" class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-rounded vc_btn3-style-custom" href="?add-to-cart=7360" title="">SOLD OUT</a></div>"';           
}
         });
});

Answer 2

我建议您采用这样的结构，当您运行它时，它可以很好地工作：

$(function() {

  function makeAjaxRequest(productId) {
    console.log('making ajax request for product with id: ' + productId);
    // jQuery.ajax({
    //     url: "/functions.php", //the page containing php script
    //     type: "post", //request type,
    //     dataType: 'json',
    //     data: {
    //       pricechangefunction: "success",
    //       productid: productId
    //     }
    //     success: function(result) {
    //       console.log(result);
    //     }
    //   });  
  }

  $('#stdclick').click(function() {
    makeAjaxRequest("5922");
  });

  $('#maxclick').click(function() {
    makeAjaxRequest("7360");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="stdclick" name="stdmaxselect" value="standard" checked>
</br>
<input type="radio" id="maxclick" name="stdmaxselect" value="max">

Answer 3

因此，我找到了解决方案，并希望将其发布，以防其他人遇到相同的问题。基本上，我应该提到它，因为我在wordpress中，并且该函数位于functions.php中，所以我需要使用预构建的AJAX系统才能正确调用functions.php中的函数。答案中的上述两个示例都可以触发点击，但是我只需要将JS切换到该位置即可：

<script type="text/javascript"> 

jQuery('#stdclick').on('click', function(){

jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'pricechangefunction',
            // add your parameters here
            productid: "5922"
        },
        success: function (output) {
document.getElementById("pricedisplayfield").innerHTML = output;       

document.getElementById("buttonorder").innerHTML = '<a style="background-color:#dc2a1b; color:#ffffff;" class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-rounded vc_btn3-style-custom" href="?add-to-cart=5922" title="">SOLD OUT</a></div>"';           
}
        });
});

jQuery('#maxclick').on('click', function(){

jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'pricechangefunction',
            // add your parameters here
            productid: "7360"
        },
        success: function (output) {
document.getElementById("pricedisplayfield").innerHTML = output;       

document.getElementById("buttonorder").innerHTML = '<a style="background-color:#dc2a1b; color:#ffffff;" class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-rounded vc_btn3-style-custom" href="?add-to-cart=7360" title="">SOLD OUT</a></div>"';           
}
        });
});

 </script>

在单选按钮单击上调用的Ajax（到php函数）jQuery导致未引用javascript函数

3 个答案: