How do I assign the value of input to my url parameter in jQuery?

Question

I am adding a product to cart in WordPress using ajax link. I can add a product with no extra product options using this code:

<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>

But the website that I am working on uses a plugin called extra product options that adds options like a checkbox or a date(booking purposes) before adding an item to cart

I can add a product to cart with the options included using the ajax link as long as I provide the name and value attribute generated by the plugin to the url. Take a look at the example below for a checkbox:

Html Checkbox Provided by the plugin:

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

I can add a product to cart with the name and value provided by extra product options and its checkbox checked if I create a link like this:

<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>

In my situation I am using a datepicker to set a booking date for a product. The html for the datepicker is: <input type="text" class="tmcp-field" id="tmcp_date_1" value="" name="tmcp_date_0">

The value of the datepicker html is always value="" even though I have selected a date for it unlike the checbox where there is already a value of checked or unchecked.

I am thinking of getting the value of the datepicker then pass it to a variable when a date is selected using 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);

    }

});

Do you know how can i pass the value of the selected date to my url param &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

Add paramValue with jquery

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