Getting input value on submit MVC 3

I've setup the default MVC 3 application and I'm new to it, but I've a problem when I'm trying to print a value from an input-field after I've clicked the submit button.

It's a simple register form with a submit button at the bottom. When I click the submit button nothing shall happen expect the text from one of the input-fields shall be printed to a label or something beneath the submit button. I'm totally lost on how to do this, I've tried to make a label with an id but I'm not able to get access to neither the input-fields value or the label.

Controller action looks like this:

[HttpPost]
        public ActionResult Create(Person person)
        {
            if (ModelState.IsValid)
            {
                db.Persons.Add(person);
                db.SaveChanges();
                return RedirectToAction("Index");  
            }

            return View(person);
        } 

The complete form looks like this:

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>

        <div class="editor-label">
            @Html.LabelFor(model => model.Firstname)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Firstname)
            @Html.ValidationMessageFor(model => model.Firstname)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Lastname)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Lastname)
            @Html.ValidationMessageFor(model => model.Lastname)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Phone)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Phone)
            @Html.ValidationMessageFor(model => model.Phone)
        </div>
        <p>
            <button id="btn_Register">
                <span class="ui-button-text">Register</span>
            </button>
        </p>               
    </fieldset>
 }

In order to get all the values from the posted form, they will be ( in your example ) within the person object.

To output a value in a label, you will need to modify the person object with the new value, and then on the View output this value.

e.g.

person.labelvalue = "foo";

<span>@model.labelvalue</span>

I suggest you take a look at asp.net/mvc as a starting base before moving from asp.net to asp.net mvc

You can have the way to go to the controller on button submit, get the input field value and set it on view to label you want to. However, if its just setting the label text on click of a button, then you don't need to have any server side code and so to say MVC code. Just use simple button instead of submit button. Write a JavaScript/jQuery event/function for button click and set the label text from required input-field. Something like...

$("#fooLabel").text($("#fooTextEditor").val());

To do this you will have to know the Ids of these two controls. As there is no built-in overload to provide Id to fields using @Html.EditorFor or @Html.LabelFor, you can either override HtmlHelper like suggested in this post.. How to specify ID for an Html.LabelFor<> (MVC Razor)

Or even simpler you can use any browser dev tool to find the generated Id for two controls and directly use them in your JaveScript/jQuery. Usually it is same as the model field name.

As you do not want to submit the page or any other action, you have to perform this action on the client side using java script or Jquery. In java script just add onclick event to btn_Register button and set the value of label to the text field. If you are using jquery in the click event assign the value as below

btn_Register.click(function(){
    $("#label1").text($('txtfield1').val());
});