Is there way to set razor @HTML.Hidden control value within a JavaScript code block?

<tbody>

                    @Html.Hidden("customerID")
                    @if (Model != null)
                    {
                        var customers = Model.Customers.ToList();
                        for (var i = 0; i < customers.Count; i++)
                        {
                        <tr class="gradeX">
                            <td>
                                <a href="#"><span onclick="GetCustomerID()">@customers[i].CustomerId.ToString()</span></a>
                            </td>
                            <td>
                                <a href="#">@customers[i].Name</a>
                            </td>                                
                        </tr>
                        }
                    }
                </tbody>

and my JavaScript block is

<script type="text/javascript">
    var globleCustomerId = null;

    function GetCustomerID() {

        globleCustomerId = $('#customerID').val();

        //globleCustomerId value should be set to @Html.Hidden()


    }
</script>

Within this JavaScript block I need to set globleCustomerId value to @Html.Hidden("customerID").

How to get that value?

Is there way to set razor @HTML.Hidden control value within a JavaScript code block?

<tbody>

                    @Html.Hidden("customerID")
                    @if (Model != null)
                    {
                        var customers = Model.Customers.ToList();
                        for (var i = 0; i < customers.Count; i++)
                        {
                        <tr class="gradeX">
                            <td>
                                <a href="#"><span onclick="GetCustomerID()">@customers[i].CustomerId.ToString()</span></a>
                            </td>
                            <td>
                                <a href="#">@customers[i].Name</a>
                            </td>                                
                        </tr>
                        }
                    }
                </tbody>

and my JavaScript block is

<script type="text/javascript">
    var globleCustomerId = null;

    function GetCustomerID() {

        globleCustomerId = $('#customerID').val();

        //globleCustomerId value should be set to @Html.Hidden()


    }
</script>

Within this JavaScript block I need to set globleCustomerId value to @Html.Hidden("customerID").

How to get that value?

• c#
• javascript
• razor
• hidden

Share Improve this question Follow edited Nov 19, 2013 at 13:23 BenMorel 36.8k5252 gold badges206206 silver badges337337 bronze badges asked Jul 25, 2012 at 10:22 ddfnfalddfnfal 1,42722 gold badges1717 silver badges2121 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You could use the .val() method:

$('#customerID').val('some value');

There are 2 overloads: the one that doesn't take any arguments and which allows you to read the value (and which is what you have shown in your question) and one that takes an argument and sets the value (the one I have shown in my answer).

---

UPDATE:

Apparently you are trying to put the value of the customer id that was clicked upon in the hidden field. In this case you could simply give a class to your span element:

<a href="#">
    <span class="customerId">
        @customers[i].CustomerId.ToString()
    </span>
</a>

and then simply subscribe to the click event of this element:

$(function() {
    $('.customerId').click(function() {
        $('#customerId').val($(this).text());
        return false;
    });
});

function GetCustomerID() {

    globleCustomerId = $('#customerID').val();

     //  Use this line to set the globleCustomerId value to @Html.Hidden() field

      $('#customerID').val(globleCustomerId);

}

well pure Javascript version is ;

//set
document.getElementById("customerID").value = "new value";
//get
var customerIDValue = document.getElementById("customerID").value;