jquery: value on $.post that depends on link selected

Question

I have a page in my application with two hyperlinks. Both of these hyperlinks redirect the user to the same page where they can add information for a new account. When link #1 is selected, one value passed to the controller action must be 1. If the other link is chosen then the value is 2. How can this be done using jquery?

hyperlinks:

<div style="position:absolute; width:100px; top:25%; left:50%; font-family:Arial; font-weight:bold; white-space:nowrap ">
    <a href="~/rxcard/addaccount" style="color:#444444;">ADD CLINIC</a>     
</div>
<div style="position:absolute; width:100px; top:33%; left:48%; font-family:Arial; font-weight:bold; white-space:nowrap">
    <a href="~/rxcard/addaccount" style="color:#444444;">ADD MEDICAL OFFICE</a>
</div>

oguzhancerit · Answer 1 · 2016-11-11T20:10:50.093

You should define a new attribute like data-id your html element after that detect the click action and change the href.

<div>
    <a href="~/rxcard/addaccount" data-id='1'>ADD CLINIC</a>     
</div>
<div>
    <a href="~/rxcard/addaccount" data-id='2'>ADD MEDICAL OFFICE</a>
</div>

<script>
$("a").on('click',function(){
    var thiz = $(this);
    thiz.attr('href',thiz.attr('href')+?val=thiz.attr('data-id'));
});
</script>

If you have value in initialization you can give different hrefs your anchors. In this scenario you don't need to Jquery or Javascript;

<div>
    <a href="~/rxcard/addaccount?val=1">ADD CLINIC</a>     
</div>
<div>
    <a href="~/rxcard/addaccount?val=2">ADD MEDICAL OFFICE</a>
</div>

score 0 · Answer 2 · answered Nov 11 '16 at 20:09

just add a GET parameter to the links, they will keep pointing to the same URL but also will pass a parameter

<div style="position:absolute; width:100px; top:25%; left:50%; font-family:Arial; font-weight:bold; white-space:nowrap ">
    <a href="~/rxcard/addaccount?param=1" style="color:#444444;">ADD CLINIC</a>     
</div>
<div style="position:absolute; width:100px; top:33%; left:48%; font-family:Arial; font-weight:bold; white-space:nowrap">
    <a href="~/rxcard/addaccount?param=2" style="color:#444444;">ADD MEDICAL OFFICE</a>
</div>

score 0 · Accepted Answer · edited May 23 '17 at 12:06

Why on Earth do you need to use jQuery for this? Use simple GET parameters.

<a href="~/rxcard/addaccount?type=1" style="color:#444444;">ADD MEDICAL OFFICE</a>

Note the ?type=1 Passes a get parameter with a value of one.

On the recieving page you can use the folllowing function to check which get parameter was passed.

function findGetParameter(parameterName) {
    var result = null,
        tmp = [];
    location.search
    .substr(1)
        .split("&")
        .forEach(function (item) {
        tmp = item.split("=");
        if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
    });
    return result;
}

Use like this: findGetParameter('type') to get the value of the type from the url.

Got that function from here

jquery: value on $.post that depends on link selected

3 Answers3