Change/Replace Href parameter with jquery

Question

I have a URL parameter that I want to replace based on whether a checkbox has been checked:

<input id="acknowledge" type="checkbox" checked="checked" name="acknowledge" tabindex="">I accept

<a href="p_add_institution?id=55&p_acknowledge=Y" class="stronglink" id="add-institution">Add another institution</a>

I want to replace p_acknowledge parameter to be p_acknowledge=N if the checkbox is not checked and p_acknowledge=Y if it is checked.

It always return p_add_institution?id=55&p_acknowledge=Y even if the checkbox is not checked.

Also, when I hover over the link, I want to have the proper URL showing up as well.

http://jsfiddle.net/u89usjnj/5

Any help would be appreciated and if anyone can explain why it the parameter is not switching to N

Thanks

Remember to read the answers that people provided, upvote any that help you, and mark the one that helps the most as the accepted answer. This will help future users quickly find the best solution. — Stan Shaw, Nov 19 '15 at 12:35
I found the solution to my problem as my regex was looking for a digit when using \d+. It should be using \w+ instead. When I switched this, it solved the problem. — Moxie C, Nov 19 '15 at 16:24
@Stan thanks for your help and i marked the answer that was most acceptable and solved why my code wasn't returning the proper value — Moxie C, Nov 19 '15 at 16:26

void · Accepted Answer · 2015-11-18T19:58:45.580

2

// Input with id acknowledge on change event
$("input#acknowledge").change(function(){

    // Fetch checkbox is checked or not
    var status = this.checked;

    // Decide what to set in href Y or N based on status
    var yorn = (status?"Y":"N");

    // Update the link using .attr
    $("#add-institution").attr("href", "p_add_institution?id=55&p_acknowledge="+yorn);
})

Play Here

FYI:

Rule of thumb is: .prop() method should be used for boolean attributes/properties and for properties which do not exist in html (such as window.location). All other attributes (ones you can see in the html) can and should continue to be manipulated with the .attr() method. (http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/)

edited Nov 18 '15 at 19:58

answered Nov 18 '15 at 19:44

void

36,090
8
62
107

You should use .prop, since .attr has been deprecated. – Stan Shaw Nov 18 '15 at 19:47
1

@stan: Rule of thumb is: .prop() method should be used for boolean attributes/properties and for properties which do not exist in html (such as window.location). All other attributes (ones you can see in the html) can and should continue to be manipulated with the .attr() method. (http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/) – void Nov 18 '15 at 19:57

Stan Shaw · Answer 2 · 2015-11-18T20:14:45.207

0

To answer the question as it was asked:

$("#acknowledge").on("change", function(){
    $("#add-institution").attr("href", "p_add_institution?id=55&p_acknowledge=" + $(this).prop("checked") ? "Y" : "N");
});

However, you could also create two links and just toggle their display, accordingly:

HTML:

<input id="acknowledge" type="checkbox" checked="checked" name="acknowledge" tabindex="">I accept

<a href="p_add_institution?id=55&p_acknowledge=Y" class="stronglink" id="add-institution_Yes">Add another institution</a>
<a href="p_add_institution?id=55&p_acknowledge=N" class="stronglink" id="add-institution_No" style="display:none;">Add another institution</a> //Hidden by default

JQuery:

$("#acknowledge").on("change", function(){
    if ($(this).prop("checked")){
        $("#addinstitution-Yes").show();
        $("#addinstitution-No").hide();
    }
    else{
        $("#addinstitution-Yes").hide();
        $("#addinstitution-No").show();
    }
});

edited Nov 18 '15 at 20:14

answered Nov 18 '15 at 19:53

Stan Shaw

3,014
1
12
27

thanks for the tip and answer. What happens if my parameter list was dynamic and contained 6 or 7 parameters and I only wanted to replace 1 parameter. Using the attr would mean I would hardcode something like this $('#add-institution').('href', 'p_add_institution?id=55&p_acknowledge=N&p_another_parm1=XX,&p_another_parm2=YY'). Is there a replace I can use just to replace one parameter and its associated value – Moxie C Nov 18 '15 at 20:22
You could write a function to return the desired parameter string based upon variables that you set based on the users actions. Then, you would just do something like $("#add-institution").attr("href", GetParameterStringFunction()); – Stan Shaw Nov 18 '15 at 20:24

Change/Replace Href parameter with jquery

2 Answers2