redirection to an action with asp.net mvc application using javascript call

Question

i have an asp.net application in which i have to custmize the action click in submit button of a form :

the Script

<script>
  $(function(){
    function result(arr, identificateur,Pages) {
   var f1 = $('input[name="reception' + arr + '"]').val();
   var f2 = $('input[name="client' + arr + '"]').val();
   var f3 = $('input[name="cloture' + arr + '"]').val();
   var f4 = $('input[name="tag' + arr + '"]').val();
   location = "@Url.Content("/Pages/Index")?identificateur=" + identificateur + "&Pages=" + Pages + "&_reception=" + f1 + "&_cloture=" + f3 + "&_client=" + f2 + "&_tag=" + f4;
    }});
  </script>

then, the form:

 <input type="submit" onclick="result(@i.ToString(),@Model[1][i].Id ,"1");" value="Enregistrer"/>

When i click into the submit button, nothing is happend and i'm not redirected to the action Index.

What are the reasons of this problem? How can i fix it?

Edit

<input type="submit" id="Enregistrer" value="Enregistrer" data-arr="@i.ToString()" data-identificateur="@Model[1][i].Id"  />





<script>
    $(function () {
            $('#Enregistrer').click(function () {
            var self = $(this); // This is the submit button
            var identificateur = self.data('identificateur');
            var arr = self.data('arr');
            var f1 = $('input[name="reception' + arr + '"]').val();
            var f2 = $('input[name="client' + arr + '"]').val();
            var f3 = $('input[name="cloture' + arr + '"]').val();
            var f4 = $('input[name="tag' + arr + '"]').val();
             document.location.href = "@Url.Content("/Pages/Index")?identificateur=" + identificateur + "&Pages=1&_reception=" + f1 + "&_cloture=" + f3 + "&_client=" + f2 + "&_tag=" + f4;
        });
    });
  </script>

The problems :

the redirection didn't work
Only in the first tr i can reach the js function

have you tried location.href = ... ? or location.replace(...) — Romko
– Romko, Commented Oct 8, 2013 at 9:45
Do you get any console errors? Does your code even reach the result() function? Try adding console.log("IM IN RESULT()"); in the result() and check if it show in console. — Kamil T
– Kamil T, Commented Oct 8, 2013 at 9:49
@Lamloumi, What was an equivalant js/html code rendered for your razor syntax. Please check the viewsource or response with firebug if it is a Ajax response. Like to see wat was actually rendered — Murali Murugesan
– Murali Murugesan, Commented Oct 8, 2013 at 10:51
You can't use many elements with the same id. Use the class instead. The class selector is $(".className") instead of $("#id"). — Kamil T
– Kamil T, Commented Oct 8, 2013 at 10:54

Murali Murugesan · Accepted Answer · 2013-10-08 10:04:06Z

2

Pass the string parameter with quote ' like 'someVal', else you will get undefined error

Changing this below line

 onclick="result(@i.ToString(),@Model[1][i].Id ,"1");"

to

onclick="result('@i.ToString()','@Model[1][i].Id' ,"1");"

will make a call to your javascript function, otherwise all rendered string will be considered as variable like below and you will get someval,someId undefined error

onclick="result(someval,someId ,"1");"

Also use location.href for navigation

edited Oct 8, 2013 at 10:04

answered Oct 8, 2013 at 9:45

Murali Murugesan

22.6k18 gold badges76 silver badges123 bronze badges

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

3 Comments

Lamloumi Afif Over a year ago

the problem is that i can't reach the javascript function not inside it

Murali Murugesan Over a year ago

@Lamloumi, Updated the answer. Now you could able to reach your js function

Lamloumi Afif Over a year ago

the same result , i can't reach the js function

Henk Mollema · Accepted Answer · 2013-10-09 13:27:15Z

1

I think I spotted two errors:

location

should be

location.href

And the second, try to prefix the function with javascript::

<input type="submit" onclick="javascript:result(@i.ToString(),@Model[1][i].Id ,"1");" value="Enregistrer"/>

Or even better, use unobtrusive javascript with html5 data- attributes.

<input type="submit" id="Enregistrer" value="Enregistrer" data-reception="@i.ToString()" />

With the following JavaScript:

$('#Enregistrer').click(function () {
    var self = $(this); // This is the submit button
    var reception = self.data('reception');   // Get the data from the attributes.
});

edited Oct 9, 2013 at 13:27

answered Oct 8, 2013 at 10:00

Henk Mollema

46.9k12 gold badges101 silver badges107 bronze badges

6 Comments

Henk Mollema Over a year ago

@Lamloumi good point, I updated by answer. By the way, does the javascript: prefix work in the onclick attribute?

Henk Mollema Over a year ago

@Lamloumi is this submit button inside a for(each) loop, ie. is it on the page multiple times?

Lamloumi Afif Over a year ago

yes sorry @Henk i change the code : i proceed by class because i'm in a for loop. only the problem of redirection stays

Henk Mollema Over a year ago

@Lamloumi is the generated url correct? Try to use @Url.Action("Index", "Pages", new { identificateur = identificateur, pages = 1, _reception = f1 }) with all the other parameters.

Lamloumi Afif Over a year ago

let us continue this discussion in chat

|

Lamloumi Afif · Accepted Answer · 2013-10-08 09:58:50Z

1

Put the definition of result() function inside $(function(){ /* put it here */ }); instead of simple <script>.

Also remember to put apostrophes instead of quotation marks in onclick="result(@i.ToString(),@Model[1][i].Id ,"1");"

when you pass the ""`.

It should be

onclick="result(@i.ToString(),@Model[1][i].Id ,'1');"

edited Oct 8, 2013 at 9:58

Lamloumi Afif

9,12728 gold badges106 silver badges195 bronze badges

answered Oct 8, 2013 at 9:44

Kamil T

2,2161 gold badge19 silver badges28 bronze badges

1 Comment

Lamloumi Afif Over a year ago

for the apostrophes i didn't understand you sorry

Collectives™ on Stack Overflow

redirection to an action with asp.net mvc application using javascript call

3 Answers 3

3 Comments

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related