正文 

当前位置： 首页 > 源码 >

JavaScript-如何使用输入字段动态创建多个 div

     2023-04-18     261

关键词：

【中文标题】JavaScript-如何使用输入字段动态创建多个 div【英文标题】：JavaScript- how to create dynamically multiple divs with inputs field 【发布时间】：2015-04-09 07:01:35 【问题描述】：

我必须创建 3 个输入文本框来获取有关姓名和电子邮件地址的用户输入。 我必须动态创建它，即当用户点击电子邮件输入字段时，应该创建所有三个元素的新行。 这是一行 3 个输入的代码：

<div class='row' id="inputcontainer">
        <div class="form-group clearfix" >
            <div class="col-md-2 col-md-offset-2">
                <div class="form-text-field first-name">
                    <label>First name</label>
                    <input type="text" id="firstName10" class="signup-input" name="" placeholder="">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-text-field last-name">
                    <label>Last name</label>
                    <input type="text" id="lastName0" class="signup-input" name="" placeholder="optional">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-text-field email">
                    <div>
                    <label>Email</label>
                    <input type="text" data-index="0" id="inputMail0" class="signup-input text-value " name="email[0]"  placeholder="e.g. example@url.com"/>
                    <span class="common-sprite disNone sign-up-cross first"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

如何动态创建？

我正在使用以下代码进行克隆，它克隆了多次而不是 1

maxIndex = 0;
$('form').on('input','.email',function()

    $(this).parent().find('.common-sprite').removeClass('disNone');
    var lastmail = $(this);                                                                                  if(($(this).val().length > 0)&&(lastmail.data('index') == maxIndex)) 
        var count = $('.row.inputcontainer').length;
        console.log(count);
        maxIndex++;
        var clone = $('#template').clone(true).attr('id', '');
        clone.find('.firstName[id=firstName'+(maxIndex-1)+']').attr('id', 'firstName' + maxIndex).attr('name', 'first[' + maxIndex +']').addClass('signup-input firstName').val('');
        clone.find('.lastName[id=lastName'+(maxIndex-1)+']').attr('id', 'lastName' + maxIndex).attr('name', 'last[' + maxIndex +']').addClass('signup-input lastName').val('');
        clone.find('.email[id=inputMail'+(maxIndex-1)+']').attr('id', 'inputMail' + maxIndex).attr('name', 'email[' + maxIndex +']').data('index', maxIndex).addClass('signup-input text-value email').val('');
        $('.inputcontainer').append(clone);

【问题讨论】：

【参考方案1】：

像这样？我使用.blur() 来触发动态添加，这样如果您在电子邮件输入中键入内容并在其外部单击，则会显示接下来的 3 行信息。我还添加了一些类来帮助 jquery 更快、更可靠地找到元素。我每次都使用clone() 重新创建3行的相同结构。

$(document).ready(function() 
    $('.email').on('blur', function() 
        if($(this).val().length > 0) 
            var count = $('.row').length;
            console.log(count);
            var clone = $('#template').clone(true).attr('id', '');
            clone.find('.firstName').attr('id', 'firstName' + count).val('');
            clone.find('.lastName').attr('id', 'lastName' + count).val('');
            clone.find('.email').attr('id', 'inputMail' + count).val('');
            $('body').append(clone);
                 
    );
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row inputcontainer' id="template">
    <div class="form-group clearfix" >
        <div class="col-md-2 col-md-offset-2">
            <div class="form-text-field first-name">
                <label>First name</label>
                <input type="text" id="firstName0" class="signup-input firstName" name="" placeholder=""/>
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-text-field last-name">
                <label>Last name</label>
                <input type="text" id="lastName0" class="signup-input lastName" name="" placeholder="optional"/>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-text-field email">
                <div>
                    <label>Email</label>
                    <input type="text" data-index="0" id="inputMail0" class="signup-input text-value email" name="email[0]"  placeholder="e.g. example@url.com"/>
                    <span class="common-sprite disNone sign-up-cross first"></span>
                </div>
            </div>
        </div>
    </div>
</div>

希望这会有所帮助！

【讨论】：

问题是它们必须与我最初创建的类相同 @saritrotshild，是的，这是你不想要的吗？为什么？ id 必须是唯一的，但类不必是唯一的。我更改了输入的 id 以便它们是唯一的...如果您希望整行是唯一的，您可以对行 id 实现相同的计数。 @ndubitablee- 我正在使用以下代码进行克隆，它克隆了多次而不是 1： @saritrotshild 我不明白你想要什么，这使得我的回答不足以帮助你解决动态复制问题......【参考方案2】：

这和你想要的相似吗？

$(document).on("blur",".add",function()
   
    $("#inputcontainer").append("<br />");
    $("#inputcontainer").append("First Name <input type='text' class='signup-input' name='' placeholder='' /><br />");
    $("#inputcontainer").append("last Name <input type='text' class='signup-input' name='' placeholder='optional' /><br />");
    $("#inputcontainer").append("Email Address <input type='text' data-index='0' class='signup-input text-value add' name='email[0]'  placeholder='e.g. example@url.com' /><br />");
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row' id="inputcontainer">
        <div class="form-group clearfix t" >
            <div class="col-md-2 col-md-offset-2">
                <div class="form-text-field first-name">
                    <label>First name</label>
                    <input type="text" id="firstName10" class="signup-input" name="" placeholder="">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-text-field last-name">
                    <label>Last name</label>
                    <input type="text" id="lastName0" class="signup-input" name="" placeholder="optional">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-text-field email">
                    <div>
                    <label>Email</label>
                    <input type="text" data-index="0" id="inputMail0" class="signup-input text-value add" name="email[0]"  placeholder="e.g. example@url.com"/>
                    <span class="common-sprite disNone sign-up-cross first"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

在电子邮件文本框中输入内容，然后离开以创建新的文本框。

【讨论】：

已更新，它包含一个动态的表单。我现在正在处理 css 来整理一下。 @saritrotshild 现在看看。 @Kylet-我觉得你不明白这个问题。所有 3 个输入必须在同一行。如果用户单击电子邮件字段，则必须创建具有 3 个输入的全新行 @saritrotshild 已更新。 您不应多次使用同一个 ID，ID 用于定位特定元素（其中之一）。

如何从 React.js 中的多个输入输入字段创建列表？

】如何从React.js中的多个输入输入字段创建列表？【英文标题】：HowdoIcreatealistfrommultipleinputinputfieldsinReact.js?【发布时间】：2018-06-1803:35:08【问题描述】：我知道如何使用一个输入文本字段创建名称列表。如何创建具有名字输入... 查看详情

如何在javascript中使用多个（a * b）两个输入文本值并动态显示它？

】如何在javascript中使用多个（a*b）两个输入文本值并动态显示它？【英文标题】：Howtomultiple(a*b)twoinputtextvalueandshowitDynamiclywithtextchangeinjavascript?【发布时间】：2016-09-0400:26:21【问题描述】：我想显示客户必须支付的金额，我的输... 查看详情

如何使用 JavaScript 创建具有多个可选参数的搜索？

】如何使用JavaScript创建具有多个可选参数的搜索？【英文标题】：HowcanIcreateasearchwithmultiple,optional,parametersusingJavaScript?【发布时间】：2019-11-1811:58:08【问题描述】：我目前有什么“作品”，但是每个参数都取决于最后一个。我的... 查看详情

如何循环动态生成的按钮并相应地创建输入字段

】如何循环动态生成的按钮并相应地创建输入字段【英文标题】：Howtoloopoverdynamicallygeneratedbuttonsandcreateinputfieldaccordingly【发布时间】：2021-10-0416:09:54【问题描述】：如何遍历动态生成的按钮，这些按钮的某些ID相同，而另一些ID... 查看详情

动态表单 - 如何使用反应钩子更新“onChange”事件中多个表单字段的值？

】动态表单-如何使用反应钩子更新“onChange”事件中多个表单字段的值？【英文标题】：DynamicForms-Howtoupdatethevalueofmultipleformfieldson\'onChange\'eventusingreacthooks?【发布时间】：2021-10-1208:39:01【问题描述】：使用基于类的组件，我们对... 查看详情

如何在 Angular 9 中使用向上、向下、向左和向右箭头键导航动态输入和选择表内的字段？

】如何在Angular9中使用向上、向下、向左和向右箭头键导航动态输入和选择表内的字段？【英文标题】：HowtoNavigatethedynamicinputandselectfieldinsidethetablewithUP,DOWN,LEFTandRIGHTarrowkeysinAngular9?【发布时间】：2021-09-0304:40:04【问题描述】：有... 查看详情

用 javascript 填充输入搜索字段（字段动态显示结果）

】用javascript填充输入搜索字段（字段动态显示结果）【英文标题】：Fillinputsearchfieldwithjavascript(fielddynamicallydisplaysresults)【发布时间】：2020-11-2308:45:38【问题描述】：我正在尝试使用javascript自动填写搜索字段。网站在输入时实时... 查看详情

如何在 VueJS 中动态创建输入字段

】如何在VueJS中动态创建输入字段【英文标题】：HowtodynamicallycreateInputFieldsinVueJS【发布时间】：2019-11-2511:13:44【问题描述】：我正在尝试在旅途中动态添加或删除输入字段。我从这里https://smarttutorials.net/dynamically-add-or-remove-input-t... 查看详情

如何更改多个填充的复选框输入字段值？

...我正在寻找解决方案，如何更改多个填充的复选框-使用JavaScript帮助输入字段值。如果选中复选框，如何将值从yes更改为no和no到yes。这是我使用的部分代码：html表单：<formmethod="pos 查看详情

如果数据库失败，如何保留动态创建的输入字段值？

】如果数据库失败，如何保留动态创建的输入字段值？【英文标题】：Howtoretaindynamicallycreatedinputfieldsvaluesifdatabasefails?【发布时间】：2012-12-1607:53:46【问题描述】：我有一个大约70个输入字段的大表单，表单中有可以创建其他输... 查看详情

从动态输入字段 JavaScript 读取文本

】从动态输入字段JavaScript读取文本【英文标题】：ReadingTextFromDynamicInputFieldJavaScript【发布时间】：2020-05-2417:21:07【问题描述】：我有一个网站，您可以在其中输入文本到输入字段，然后按“添加新行”以添加另一个输入字段。... 查看详情

如何在多个文件输入中动态填充文件

...【发布时间】：2020-04-0801:04:33【问题描述】：我正在使用JavaScript库here选择多个图像并通过表单将它们保存在数据库中，当我编辑表单时，我从数据中获取图像并像这样填充。<script>varupload=newFileUploadWithPreview(\ 查看详情

我在使用 Javascript 或 Jquery 创建具有字符串计数的动态字段时遇到问题

】我在使用Javascript或Jquery创建具有字符串计数的动态字段时遇到问题【英文标题】：IhaveanissuetocreatedynamicfieldswithstringcountusingJavascriptORJquery【发布时间】：2012-06-0808:54:51【问题描述】：我在使用JavaScript或jQuery创建具有string计数... 查看详情

仅使用纯javascript在单击按钮时动态生成表单输入字段递增和递减

】仅使用纯javascript在单击按钮时动态生成表单输入字段递增和递减【英文标题】：Dynamicallygenerateforminputfiledsincrementanddecrementonclickofbuttonusingpurejavascriptonly【发布时间】：2019-10-0203:38:47【问题描述】：ES6/Purejavascript/无框架或jquery/... 查看详情

从 json 动态创建的 Javascript 表单输入，需要将对象映射到另一个对象的正确字段并保存

】从json动态创建的Javascript表单输入，需要将对象映射到另一个对象的正确字段并保存【英文标题】：Javascriptforminputscreateddynamicallyfromjsonandneedtomapobjecttoproperfieldfromanotherobjectandsave【发布时间】：2012-12-1417:24:44【问题描述】：我... 查看详情

使用 VueJs 添加动态输入字段

...19【问题描述】：我正在使用Laravel5.7&VueJs2.5.*...我知道如何动态添加输入字段，但对于我的应用程序，我不明白该怎么做。我有“TicketInvoice.Vue”，在那个页面我有一个引导模式来创建和更新我的发票。我有2个单独的DB表，一... 查看详情

使用动态创建的输入字段插入多条记录

】使用动态创建的输入字段插入多条记录【英文标题】：multiplerecordsinsertionwithdynamicallycreatedinputfields【发布时间】：2016-01-0405:11:06【问题描述】：基本上这就是我在将新记录保存到我的数据库时使用eloqouent所做的事情（请参阅下... 查看详情

除了使用javascript的输入之外，如何删除每个输入的oninvalid？

】除了使用javascript的输入之外，如何删除每个输入的oninvalid？【英文标题】：Howtoremoveoninvalidforeveryinputexceptoneusingjavascript?【发布时间】：2021-06-2715:53:27【问题描述】：我创建了一个包含一些输入字段的表单，用户需要填写至少... 查看详情