如何在jQuery中將輸入值分配給我的url參數？

Question

我正在使用ajax鏈接將產品添加到WordPress的購物車中。 我可以使用以下代碼添加沒有其他產品選項的產品 ：

<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的插件，該插件在將商品添加到購物車之前添加了復選框或日期（預訂目的）

只要我將插件生成的name和value屬性提供給url，就可以將產品添加到使用ajax鏈接包含的選項的購物車中。 請看下面的復選框示例：

插件提供的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>

Answer 1

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


    }

});

Answer 2

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