如何在jQuery中将输入值分配给我的url参数?

时间:2018-07-09 05:28:34

标签: javascript php jquery html wordpress

我正在使用ajax链接将产品添加到WordPress的购物车中。我可以使用以下代码添加没有extra product options的产品:

<a rel="nofollow" href="/?add-to-cart=11" data-quantity="1" data-product_id="11" data-product_sku="" class="add_to_cart_button ajax_add_to_cart">Add to cart</a>

但是我正在使用的网站使用名为extra product options的插件,该插件在将商品添加到购物车之前添加了复选框或日期(用于预订目的)之类的选项

只要我提供由插件生成的名称 value 属性,我就可以使用ajax链接将带有包含选项的产品添加到购物车中< / strong>。看看下面的复选框示例:

由插件提供的HTML复选框:

<input class="tmcp-field" name="tmcp_checkbox_0_0" value="_0" type="checkbox">

如果我创建这样的链接,我可以将产品添加到购物车中,其名称和值由其他产品选项提供,并且其复选框被选中已选中

<a rel="nofollow" href="/?add-to-cart=11&tmcp_checkbox_0_0=_0" data-quantity="1" data-product_id="11" data-product_sku="" class="add_to_cart_button ajax_add_to_cart">Add to cart</a>

在我的情况下,我使用日期选择器设置产品的预订日期。日期选择器的html是:<input type="text" class="tmcp-field" id="tmcp_date_1" value="" name="tmcp_date_0">

datepicker html的值始终为value =“”,即使我为它选择了一个日期,也不像checbox中已经有一个checked或unchecked的值。

我正在考虑获取datepicker的值,然后在使用jquery选择日期时将其传递给变量

$( "#epo-build-datepicker" ).datepicker({


    onSelect: function() {
        var dateObject = $(this).datepicker('getDate');
        console.log(dateObject);

        var paramValue = $(this).val();
        console.log("Date value is:" + paramValue);

    }

});

您知道如何将所选日期的值传递给我的url参数&tmcp_date_0 ???

<a rel="nofollow" href="/?add-to-cart=11&tmcp_date_0=VALUEOF#epo-build-datepicker" data-quantity="1" data-product_id="11" data-product_sku="" class="add_to_cart_button ajax_add_to_cart epo-build-cart-url-param">Add to cart</a>

2 个答案:

答案 0 :(得分:2)

使用jquery添加paramValue

<a rel="nofollow" href="/?add-to-cart=11" data-quantity="1" data-product_id="11" data-product_sku="" class="add_to_cart_button ajax_add_to_cart epo-build-cart-url-param">Add to cart</a>

$('a.add_to_cart_button').on('click', function(e){
  e.preventDefault();
  var val = $(this).attr('href');
  console.log(val)
})

$( "#epo-build-datepicker" ).datepicker({


    onSelect: function() {
        var dateObject = $(this).datepicker('getDate');
        console.log(dateObject);

        var paramValue = $(this).val();
        var _href = $('a.add_to_cart_button').attr('href');
        _href = _href+'&tmcp_date_0'+paramValue;
        $('a.add_to_cart_button').attr('href', _href);


    }

});

答案 1 :(得分:1)

//get href value of link
var uri = $(".add_to_cart_button").attr('href');

//assign new param
uri = uri + "&tmcp_date_0="+paramValue;

//assign new uri to a tag
$(".add_to_cart_button").prop("href", uri);