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.

Answer 1

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

Answer 2

Use below code to get the textbox values

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