如何使用javascript在mvc 4中单击链接时动态添加文本框 [英] How to add text boxes dynamically on the click of a link in mvc 4 using javascript

问题描述

我是mvc和javascript的新手，我正在尝试开发一个小问题银行类型的网站。我有一个网页，用户可以在文本框中输入他的问题，并作为问题的答案，他可以创建他想要的多个选项（因为这是一个客观类型的问题）。



我的观点如下：



@model QuestionBank_Razor1.Models.HomeModel

@ {ViewBag.Title =创建你自己的问题;

布局=〜/ Views / Shared / _Layout.cshtml;

}

@using（Html。 BeginForm（））

{

@ Html.TextBoxFor（m => m.YourQuestion，new {placeholder =Your Question}）

@ Html.ActionLink（添加选项，AddOptions，新{onclick =add（）;}）

}

}



我想在用户点击添加选项链接时生成一个文本框，以便用户可以在文本框中输入他的选项。我希望文本框能够生成链接点击次数。



我想我必须在这里使用javascript，但我不知道如何。



我试过使用下面的脚本，但它在form.appendChild中抛出异常（）

 <   script     type   =  text / javascript    >  
 function add（）{
 var i = 0; 
 var form = document.getElementById（form）; 
 var input = document.createElement（input）; 
 input.type =text; 
 input.id =txtBoxOptions+ i + 1; 
 form.appendChild（输入）; 
} 
 <   / script  >  

帮助！

解决方案

 var form = document.getElementById（form）; 

查看你的页面来源，有没有形式为id的元素？如果没有，则表单将为null。你需要自己添加id

 @using（Html.BeginForm（YourAction，YourController，FormMethod.Post，new { id =form}））

或者你可以使用像


这样的js b $ b

  document  .forms [ 0 ]。appendChild（input） ; 

此外，您还需要在函数外部移动i变量，否则每个框都将具有相同的ID。此外，您只需要一个id和css和javascript，如果输入作为表单的一部分提交，您还需要为它们提供一个名称属性。



< pre lang =Javascript> var i = 0 ;
function add（）{
var form = document .getElementById（ form）;
var input = document .createElement（ input）;
input.type = text;
input.id = txtBoxOptions + i + 1 ;
input.name = input.id; // 不确定这是否有效，我还没有测试过它
document .forms [ 0 ]。appendChild（input）;
}

I am new to mvc and javascript and I am trying to develop a small question bank type website. I have a web page where the user can enter his question in a textbox and as answers for the question he can create as many options as he want (since it is a objective type question).

My view is as follows:

@model QuestionBank_Razor1.Models.HomeModel
@{ViewBag.Title = "Create your own questions";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@using (Html.BeginForm())
{

@Html.TextBoxFor(m=>m.YourQuestion, new { placeholder="Your Question"})

@Html.ActionLink("Add Options", "AddOptions", new { onclick="add();"})
}
}

I want to generate a text box when the user clicks on "Add Options" link so that the user can enter his option in the text box. I want the text box to generate as many times as the link is clicked.

I think I will have to use javascript here, but I don't know how.

I have tried to use the below script, but it is throwing exception in form.appendChild()

<script type="text/javascript" >
        function add() {
            var i = 0;
            var form = document.getElementById("form");
            var input = document.createElement("input");
            input.type = "text";
            input.id = "txtBoxOptions" + i + 1;
            form.appendChild(input);
        }
        </script>

Help!

解决方案

var form = document.getElementById("form");

View the source of your page, are there any elements with an id of form? If not then form is going to be null. You need to add the id yourself

@using (Html.BeginForm("YourAction", "YourController", FormMethod.Post, new { id = "form" }))

Or you can use js like

document.forms[0].appendChild(input);

Also you'll need to move your "i" variable outside the function otherwise every box will have the same id. Also you only need an id for css and javascript, if the input is submitted as part of a form you'll need to give them a name attribute also.

var i = 0;
function add() {
    var form = document.getElementById("form");
    var input = document.createElement("input");
    input.type = "text";
    input.id = "txtBoxOptions" + i + 1;
    input.name = input.id; // not sure if this is valid, I haven't tested it
    document.forms[0].appendChild(input);
}

这篇关于如何使用javascript在mvc 4中单击链接时动态添加文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！