how to pass values from view to javascript?

Question

So, i works in a project and i have a problem when i pass data from my view to my javascript,i have a foreach loop but always i get the last elements, this is my view :

 @foreach (var al in Model.alerts)
    { 
    <table border="0">
     <tr>
     <td rowspan=3><img src= '@Html.Raw(al.Owpicture)' class="img" alt="IMAGES"/></td>
     <td><label class="lb">@Html.Raw(al.cinOw)</label></td>
     </tr>
     <tr>
    <td><label class="lb">@Html.Raw(al.Owname)</label></td>
     </tr>
     <tr>
     <td><label class="lb">@Html.Raw(al.OwpermitNumber)</label></td>
     </tr>
    </table>
        <script>
            //this is variable to pass
            var carNum = '@Html.Raw(al.carNumber)';
        </script>
    <input type="submit" name="Report" value="Report" onclick="IsReport(carNum)" />

and this is my script code :

 function IsReport(carNum)
   {
       var url = '/Home/IsReport/' + carNum;
        $.ajax({
        type: "Post",
        url: url,
        data: {},
        datatype: 'json',
        success: function (data) { alert(carNum); },
    });
   }

i tried everything but always i get the last carNum, so please if someone have any idea i will be very appreciate .

every time you loop through, you are overwriting carNum with the current value. — Evan Davis
– Evan Davis, Commented Apr 28, 2013 at 19:45
The key to understanding this is in being aware that the <script> blocks in which you set carNum are all executed at page rendering, and so only this variable takes the last value you set it to. So, by the time any onclick handler is run, it will always take this value. If you pass the value directly in the handler however, it will work. — halfer
– halfer, Commented Apr 28, 2013 at 19:48
Incidentally, since you are using jQuery, it would be worth looking into an unobtrusive approach to attaching event functions - they're much better than legacy onclick handlers. — halfer
– halfer, Commented Apr 28, 2013 at 19:50
That's some horrible HTML right there. A table for each object, incorrect use of the label element and a very helpful IMAGES alternative for the images. — powerbuoy
– powerbuoy, Commented Apr 28, 2013 at 19:55

PSL · Accepted Answer · 2013-04-28 19:53:49Z

4

You need to try this way:-

<input type="submit" name="Report" value="Report" onclick="IsReport(@Html.Raw(al.carNumber))" />

What happens here in your code is that every iteration it will put the following in your html. and when you refer to the variable carnum it has the value from the last iteration.

<script>
            //this is variable to pass
            var carNum = '@Html.Raw(al.carNumber)';
        </script>

Another way is to use data attribute instead of using onclick event:-

<input type="submit" name="Report" value="Report" data-carnum="@al.carNumber" />

and in your script

$(function(){
$("input[name=Report]").on('click',function(){
....//some code
IsReport($(this).data('carnum'));
...///some code
});

});

edited Apr 28, 2013 at 19:53

answered Apr 28, 2013 at 19:45

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Mohammadov Over a year ago

thanks @PSCoder i already try this but onclick="IsReport(@Html.Raw(al.carNumber))" give me a syntax error !!

PSL Over a year ago

just try onclick="IsReport(@al.carNumber)" and by the way you are getting syntax error in your Razor? when does it say?

Mohammadov Over a year ago

just a not, for data-carnum can i give it more than 1 variable

PSL Over a year ago

more than 1 variable means? how the value looks like?

PSL Over a year ago

You can give multiple data attributes say [email protected] and access it as $(this).data('driverName')

|

Tiago Sippert · Accepted Answer · 2013-06-24 12:05:54Z

0

    function IsReport()
       {
            $.ajax({
            type:"Post",
            url:'/Home/IsReport/' + carNum,
            datatype:'json',
            success:function (data) { alert(data.carNum); },
        });
       }

The above answer display's the data.carNum value.

edited Jun 24, 2013 at 12:05

Tiago Sippert

1,3307 gold badges24 silver badges33 bronze badges

answered Jun 24, 2013 at 11:48

user2496033

Collectives™ on Stack Overflow

how to pass values from view to javascript?

2 Answers 2

7 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Related