Ajax (для функции php) jquery, вызываемый по щелчку по радиокнопке, приводит к тому, что функция javascript не ссылается

Question

Итак, у меня есть две радиокнопки, которые представляют разные продукты, и после нажатия на одну из них я хочу обновить цену на веб-сайте в зависимости от выбранного продукта. Проблема в том, что onclick работает нормально, когда у меня просто есть функция, показывающая оповещения в зависимости от переключателя, который проверен, но как только я добавляю код запроса ajax, я получаю следующую ошибку в консоли: «Uncaught ReferenceError: pricecheck is не определен at 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" >

Это код javascript, который правильно запускается с помощью приведенного выше HTML:

<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

Я предлагаю вам использовать такую ​​структуру, которая прекрасно работает при ее запуске:

$(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 2

Итак, я нашел решение и хотел бы опубликовать его на тот случай, если у кого-то еще возникнет такая же проблема. По сути, и я должен был упомянуть об этом, так как я нахожусь в 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>

Answer 3

попробуйте с полным 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>"';           
}
         });
});