How to add values on existing parameter using Jquery?

Question

I have a jquery code that is almost complete. I want the new values of the existing parameter to be added on the <a href> using jquery but my code only adds the value at the end of the href.

Sample case: My parameters in the href are food-option AND talent-option.:

<a href="food-option=0&talent-option=0">

Then I have new values to be added for food option.

values: 123,456

My href should be like this:

<a href="food-option=0,123,456&talent-option=0">

This is my code that adds the value:

  $(this).closest(".option-container").find("a.food-form-select-food").each(function () {
        var _href = $(this).attr("href");
        $(this).attr("href", _href + ',' + addnid);
    });

But the result is like this:

 <a href="food-option=0&talent-option=0,123,456">

Which is wrong.

Here is a JSfiddle/Demo of my work

Can somebody please help me?

Thank you very much in advance!

dsharew · Accepted Answer · 2015-04-27T05:54:28.040

4

You are almost there.
Try this:

  $(this).closest(".option-container").
          find("a.food-form-select-food").each(function () {

            var _href = $(this).attr("href").split("&");
            _href[0] +=  ',' + addnid;

            $(this).attr("href", _href.join("&"));

        });

edited Apr 27 '15 at 05:54

answered Apr 27 '15 at 05:39

dsharew

10,377
6
49
75

score 0 · Answer 2 · edited May 23 '17 at 11:58

i think your looking for something like this:

$(this).closest(".option-container").find("a.food-form-select-food").each(function () {
        var _href = $(this).attr("href");
        var n = str.indexOf(",");
        var output = _href.substr(0, position) + addnid + _href.substr(position);
    });

and if you want more answers look at this: Inserting string at position x of another string

score 0 · Answer 3 · answered Apr 27 '15 at 06:02

try this, JSFIDDLE

$(document).ready(function () {

        $(".select-addon").click(function () {

            var addtitle = $(this).closest('.optionlist').find('.option-title').html();
            var addnid = $(this).closest('.optionlist').find('.option-nid').html();
            var html = '<li class="option-list">' + addtitle + '<div class="addnid2">' + addnid + '</div><span class="remove-addons"> Remove</span></li>';
            $(this).closest(".option-container").find('#your-addons').append(html);

            $(this).closest(".option-container").find("a.food-form-select-food").each(function () {
                var _href = $(this).attr("href");
                var splited = _href.split('&');
                $(this).attr("href", splited[0] + ',' + addnid+'&'+splited[1]);
            });

        });

        $(document).on('click', '.remove-addons', function () {
            var addnid2 = $(this).closest('.option-list').find('.addnid2').html();
            $(this).closest(".option-container").find("a.food-form-select-food").each(function () {
                var href = $(this).attr('href');
                $(this).attr('href', href.replace("," + addnid2, ""));
            });
            $(this).closest('li').remove()
        });

    });

 .option-nid {
        display: none;
    }

    .addnid2 {
        display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="option-container" style="width:200px; float:left">
    <div class="optionlist">
        <div class="option-title">Food Set A</div>
        <span class="select-addon">SELECT </span>

        <div class="option-nid">132</div>
    </div>
    <div class="optionlist">
        <div class="option-title">Food Set B</div>
        <span class="select-addon">SELECT </span>

        <div class="option-nid">133</div>
    </div>
    <div class="optionlist">
        <div class="option-title">Food Set C</div>
        <span class="select-addon">SELECT </span>

        <div class="option-nid">134</div>
    </div>
    <br/>
    <br/>
    <br/>
    <ol id="your-addons"></ol>
    <a href="food-option=0&talent-option=0" class="food-form-select-food">LINK</a>

</div>
<div class="option-container col-md-6">
    <div class="optionlist">
        <div class="option-title">Food Set A</div>
        <span class="select-addon">SELECT </span>

        <div class="option-nid">132</div>
    </div>
    <div class="optionlist">
        <div class="option-title">Food Set B</div>
        <span class="select-addon">SELECT </span>

        <div class="option-nid">133</div>
    </div>
    <div class="optionlist">
        <div class="option-title">Food Set C</div>
        <span class="select-addon">SELECT </span>

        <div class="option-nid">134</div>
    </div>
    <br/>
    <br/>
    <br/>
    <ol id="your-addons"></ol>
    <a href="food-option=0&talent-option=0" class="food-form-select-food">LINK</a>

</div>

How to add values on existing parameter using Jquery?

3 Answers3