动态添加文本框

Question

Newbie at web..

This should be simple. I have text box the user should write City. I'd like the user to press on "Add City" and another text box will be shown (do this up to 3 times). can you give me headstart on how to implement this?

<section class="row-inner clearfix">
    <section class="form-field">
        @Html.TextBoxFor(m => m.Cities, new { @class = "autocomplete-init-no-img"})
        <label>Cities</label>
    </section>

    <section class="form-field">
        <a href="#">Add City</a>
    </section>
</section>

Answer 1

You will need to do this client side via JS. The examples I am showing you use JQuery.

Something like

$("#button").click(function(){
   $("#section").append("<input type='text' name='City1'/>");
});

The problem with this is that you will end up dynamically having to deal with parameters. If you know you only want to have 3, then that is fine.

If you wanted to use more of the built in controls, you could do something like.

<div>@Html.TextBoxFor(...city1...)</div>
<div class="hidden">@Html.TextBoxFor(....city2....)</div>

Then for the JS, you could just find the first hidden one and unhide it.

$("#button").click(function(){
   $(".hidden").first().show();
});

You will also want to hide the "add city" button after all the cities that can be added have been added.

Hope that helps.

Answer 2

Javascript to create textbox with properties...

var input = document.createElement('input'); 
input.type = "text"; 
//...    
container.appendChild(input);

make a button and add an onClick function

<button id="myButton" onClick="javaScriptFunction();"> button Text </button>

in the function create the button (see code above) and add it to the HTML body ...