将文本框值复制到另一个-ASP.NET MVC Razor

Question

I have the following form within an ASP.NET MVC 5 application

@model ProjectOasis.Models.RegisterViewModel
@{
    ViewBag.Title = "Register";
}

<h2>@ViewBag.Title.</h2>

@using (Html.BeginForm("Admin", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h4>Create a new account.</h4>
    <hr />
    @Html.ValidationSummary("", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label"})
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label"})
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
        </div>
    </div>
    //more form stuff
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Create" />
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

How do I make it so that whenever a value is entered into the m.Email textbox that the value is immediately copied into the m.UserName textbox? (I will be making the UserName textbox un-editable after I have this working).

Thanks.

Answer 1

So if you want to just display the username, here is an example (vanilla js), something like:

 document.getElementById("txt2").onkeyup = function() { document.getElementById("txt1").value = this.value; }; 

 <input type="text" id="txt1" disabled /> <input type="text" id="txt2" /> 

or here is the jquery version:

 $("#txt2").on("keyup", function() { $("#txt1").val($(this).val()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="txt1" disabled /> <input type="text" id="txt2" /> 

I hope this helps.

Answer 2

Use javascript. Probably you have already included jQuery in your site scripts. So, all you have to do is to add following script:

$(function(){
    $("#Email").change(function(){
        $("#UserName").val($(this).val());
    });
})

Please ensure about letter casing since I am not sure if Razor camelifies names or not - just preview HTML source in your browser and check the field names spelling.

Here is some working sample for you

Answer 3

Option 1

 $("#Email").change(function(){
        $("#UserName").val($(this).val());
 });

Option 2

 $("#Email").focusout(function(){
        $("#UserName").val($(this).val());
 });

and to enforce to use email as username, have this in your username textbox:

@Html.TextBoxFor(m => m.UserName, new { @class = "form-control", @disabled = "disabled" }