Get Value From Dynamically Populated Hidden Field

Question

Hi I am new to MVC and I have hidden fields that are populated through jQuery on a checkbox change event.

Is it possible to then get this value and use it in an MVC @Html.ActionLink?

Sample code:

<div class="col-md-3" style="text-align: center;">
    <label style="text-decoration: underline;">Quote 3</label>
    <br />
    <label id="lblQuote3"></label>
    <input type="hidden" id="hdfQuote3" />
</div>

<div class="col-md-3 compareButtonDiv" style="text-align: center;">
    @Html.ActionLinkNonEncoded("Compare Risks", "CompareRisks", "Lead", routeValues: new { bid = @Request.QueryString.Get("bid") }, htmlAttributes: new { @class = "btn btn-primary btn-md", @title = "Compare Risks" }) 
</div>

I am trying to get the value from the hidden field lblQuote3 and send that value to the controller. I think to send the value I include it in the rootValues.

You need to use javascipt/jquery to modify the `href` attribute of your link — , Jun 09 '15 at 11:16
@StephenMuecke something like this? `$("a").attr("href", "http://www.google.com/")` — Paul C, Jun 09 '15 at 11:18
Yes, that would work (but is the hidden input really necessary - the function that updates the inputs could just update the href attribute?) — , Jun 09 '15 at 11:23
Yeah, I still need the hidden field. Your answer has worked for me! Thanks :) — Paul C, Jun 09 '15 at 11:49
Happy for you to post you own answer with the actual code you used, but I just posted [this answer](http://stackoverflow.com/questions/30731582/pass-a-javascript-variable-as-parameter-to-url-action/30733494#30733494) to a similar issue which you might be interested in — , Jun 09 '15 at 14:13

score 0 · Answer 1 · edited May 23 '17 at 11:51

After taking advice from Stephen Muecke I was able to build a solution to my problem.

On my page, I have dynamically added checkboxes that when their checked property changes a function is called to either add or remove text to/from a <label>.

This text was then to be added to, or removed from, the href of a button.

The solution I came up with was to write a couple of functions that handle all the logic I require.

Checkbox On Change event:

$('input[type="checkbox"].style2').checkbox().on('change', function () {
        var compareRiskLinkObject = $('#lnkCompareRisks');
        var compareRiskLinkHref = compareRiskLinkObject.attr('href');
        var QuoteRef = "";
        var checkboxID = $(this).attr('id');
        QuoteRef = $(this).siblings('#hdfQuoteRef').val();

        if ($(this).prop('checked')) {
            checkAndStoreToAvailableRiskSlot(QuoteRef, checkboxID, compareRiskLinkObject, compareRiskLinkHref);
        } else {
            checkAndRemoveFromRiskSlot(QuoteRef, compareRiskLinkObject, compareRiskLinkHref);
        }
    });

Functions called:

function checkAndStoreToAvailableRiskSlot(quoteRef, checkboxID, linkbutton, href) {
    // get IDs of 3 risk slots
    var risk1 = $('#lblQuote1');
    var risk2 = $('#lblQuote2');
    var risk3 = $('#lblQuote3');
    var hdf1 = $('#hdfQuote1');
    var hdf2 = $('#hdfQuote2');
    var hdf3 = $('#hdfQuote3');

    if (risk1.text() == "") {
        risk1.text(quoteRef);
        hdf1.val(checkboxID);
        appendHrefWithRisks(linkbutton, href, "risk1=" + quoteRef);
    } else if (risk1.text() != "" && risk2.text() == "") {
        risk2.text(quoteRef);
        hdf2.val(checkboxID);
        appendHrefWithRisks(linkbutton, href, "risk2=" + quoteRef);
    } else if (risk1.text() != "" && risk2.text() != "" && risk3.text() == "") {
        risk3.text(quoteRef);
        hdf3.val(checkboxID);
        appendHrefWithRisks(linkbutton, href, "risk3=" + quoteRef);
    } else {
        alert("You have already selected 3 quotes.  Please uncheck one before adding another.");
    }
}



function checkAndRemoveFromRiskSlot(quoteRef, linkbutton, href) {
    // get IDs of 3 risk slots
    var risk1 = $('#lblQuote1');
    var risk2 = $('#lblQuote2');
    var risk3 = $('#lblQuote3');

    if (risk1.text() === quoteRef) {
        risk1.text("");
        removeFromHref(linkbutton, "risk1", href);
    } else if (risk1.text() !== quoteRef && risk2.text() === quoteRef) {
        risk2.text("");
        removeFromHref(linkbutton, "risk2", href);
    } else if (risk1.text() !== quoteRef && risk2.text() !== quoteRef && risk3.text() === quoteRef) {
        risk3.text("");
        removeFromHref(linkbutton, "risk3", href);
    } else {
        alert("You have already selected 3 quotes.  Please uncheck one before adding another.");
    }
}

function appendHrefWithRisks(linkbutton, href, appendData) {
    var newHref = "";
    newHref = href + '&' + appendData;
    linkbutton.attr('href', newHref);
}

function removeFromHref(linkbutton, risk, href) {
    var newHref = "";

    if (risk == "risk1") {
        newHref = href.replace(/&?((risk1))=[^&]*/gi, "");
    } else if (risk == "risk2") {
        newHref = href.replace(/&?((risk2))=[^&]*/gi, "");
    } else if (risk == "risk3") {
        newHref = href.replace(/&?((risk3))=[^&]*/gi, "");
    }
    linkbutton.attr('href', newHref);
}

When a checked box is checked it call on, function checkAndStoreToAvailableRiskSlot which in turn calls the function appendHrefWithRisks.

The href of the link button is passed through the methods and then appended on the successful addition of a risk to a label.

Hopefully this helps someone else someday :)

Get Value From Dynamically Populated Hidden Field

1 Answers1