MVC: Retrieving form values after submitting

Question

I have a form on a dialog box like so:

<form action="../ControlerFunction">
    <input type=text id="id1"/>
    <input type=text id="id2"/>
    <button type="submit"> OK </button>
    <button type="button" class="close"> Cancel </button>
</form>

When the form is submitted it hits my controller function, but how can I retrieve the values of the two text boxes?

Also when I change the form action to:

<form action="JavaScriptFunction();">
or:
<form action="JavaScriptFunction();return false;">

and I have my JavaScript on the same page as:

function JavaScriptFunction()
{
    alert("Hi!");
}

it does not hit the function. Am I missing something?

Answer 1

In your controller add another action method that accepts an HTTP POST and takes in the form collection.

Like:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult ControllerFunction(FormCollection collection)

Kindness,

Dan

Answer 2

Further to @Daniel.

You can either use MyAction[FormCollection collection] and then pull your values from the collection object.

Or, if you have a model that you passed to the view you can use TryUpdateModel() to propergate your model with the values from the form.

If you need more then post a comment and I'll add code.

Going home now so there will be a delay as I fight the traffic. :)

Oh, and welcome to SO.

Answer 3

Try considering this first:

1. FORM Tag needs method(POST or GET);
2. Your INPUT tags don't have name attributes which will be used for accessing the values.

Additional code:

<form name="form1" method="POST" onSubmit="JavaScriptFunction(); return false;">
        <input type=text id="id1" name="id1"/>
        <input type=text id="id2" name="id2"/>
        <button type="submit"> OK </button>
        <button type="button" class="close"> Cancel </button>
</form>

javascript:

function JavaScriptFunction()
{
    var id1Text = document.form1.elements["id1"].value; //get the value of id1
    var id2Text = document.form1.elements["id2"].value; //get the value of id2
    //do whatever you want here.
}

Answer 4

Correct html form tag syntax:

<form method="post" action="/controller/method/" onsubmit="yourJSFunction();">

...

This suits ALL server-side languages and technologies.

Answer 5

I want to answer your first question.

how can i retreive the values of the two text boxes?

One answer is given by Daniel Elliot.
After giving you input tags a name attribute with the same value of the id attribut, you can access the values as parameters to your action method.

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult ControllerFunction(String id1, String id2)

Your second question about java script is answerd by Sergei

Answer 6

<form name="form1" method="POST" onSubmit="JavaScriptFunction(); return false;">
        <input type=text id="id1" name="id1"/>
        <input type=text id="id2" name="id2"/>
        <button type="submit"> OK </button>
        <button type="button" class="close"> Cancel </button>
</form>

javascript:

function JavaScriptFunction()
{
    var id1Text = document.form1.elements["id1"].value; //get the value of id1
    var id2Text = document.form1.elements["id2"].value; //get the value of id2
    //do whatever you want here.
}