Call MVC Controller and action method on button click

Question

I have a question about calling MVC Controller and action method on button click. What I basically trying to achieve is pass some values as parameters to my action method.

This is my button:

<button id="add" type="button" class="inner-button">
    <span class="fa fa-stack fa-lg">
       <i class="fa fa-circle fa-stack-2x img-responsive"></i>
       <i class="fa fa-plus fa-stack-1x fa-inverse img-responsive"></i>
    </span>
</button>

I have my code wrapped up inside a document.ready function

$("#add").on("click", function () {
        var var1= $("textboxName")[0].value
        var var2= $("#textboxSurname")[0].value

        window.location.href = ('/Web/AddInformation?var1=' + var1 + '&var2=' + var2)
    });

And this is my Action method:

public ActionResult AddInformation(string var1, string var2)
    {
        //code
    }

The point is to allow the user to add those variables as much as they want before the saved information is wrapped up in HTTP Post request. This is driving me crazy because I have the same button (different ID of course) and similar Jquery code that is doing the exact same thing and it work fine. However this button just refuse to work. Is this code correct? or did I missed something.

NOTE: I am aware that there is very similar question: Here But didn't find an answer to my problem there.

Once I click the button? nothing triggers. Not even an error. It seems that it dosen't call the J-query function..maybe. — morgh, Mar 15 '18 at 10:36
its because the var1 is empty always you $('#tTextboxName').val() would do the trick — RAHUL S R, Mar 15 '18 at 10:37
Then please do a console.log to check that it's called and, if not called, add the entire code where you add the event — Camilo Terevinto, Mar 15 '18 at 10:39
Is your JavaScript in a separate file? If so, check if it's cached by the browser — mojoblanco, Mar 15 '18 at 10:39
var var1= $("textboxName")[0].value what is textboxName exactly??id name class or what? — RAHUL S R, Mar 15 '18 at 10:40
RAHUL S R - Thank you sir. It worked! when I changed it to .val() instead of [0].value. However I have no idea why? could you explain? — morgh, Mar 15 '18 at 10:40

score 1 · Accepted Answer · answered Mar 15 '18 at 12:53

i know the answer is set but its just to clear out the question

in javascript we ussually use thing like

document.getElementsByName("fooName")[0].value;

what[0]--> suggests is that you are selecting the first element with that specific name,means the page may or may not contain more with the same name

that meaans

textbox name=foo
textbox name==foo

would be like

document.getElementsByName("foo")[0].value; 
document.getElementsByName("foo")[1].value;

where as in jquery you dont need that right now you tried to merge jquery functionality with javascript which sometimes work and sometimes may not

when using jquery try to use standerd jquery chainnig instead of venilla javascript

Awesome, thanks for the explanation and the correct answer :) — morgh, Mar 15 '18 at 15:46

score 0 · Answer 2 · answered Mar 15 '18 at 11:02

0

Use below code to get the textbox values

var var1 = $("textboxName").val()  
var var2 = $("#textboxSurname").val()

answered Mar 15 '18 at 11:02

Anonymous

59
7

Thanks. RAHUL S R already give me that solution. However I do not understand why does it have to be like that? in my previous jquery that was used for a different button this solution did not worked that's why I used the ...[0].value. – morgh Mar 15 '18 at 11:05

Call MVC Controller and action method on button click

2 Answers2