[英]How to add specific designed textbox which is of html form on button click
How to add specific designed textbox which is of html form on button click 如何在单击按钮时添加具有html形式的特定设计的文本框
$(document).ready(function() { var max_fields = 10; //maximum input boxes allowed var wrapper = $(".input_fields_wrap"); //Fields wrapper var add_button = $(".add"); //Add button ID var x = 1; //initlal text box count $(add_button).click(function(e) { //on add input button click e.preventDefault(); if (x < max_fields) { //max input box allowed x++; //text box increment $(wrapper).appendTo('<div class="fields_wrap">'); //add input box } }); $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text e.preventDefault(); $(this).parent('div').remove(); x--; }); }); <!-- begin snippet: js hide: false console: true babel: false -->
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css" /> <link href="assets/css/consolidation.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <title></title> </head> <div class="fields_wrap row"> <div class="col-xs-3 col-lg-2 col-md-2"> <div class="new-input-label-a"> SELECT bankname </div> </div> <div id='dropdown' class="txt-input-dropdown col-xs-2 col-lg-2"> <select class="form-control" id="Select1" name="dropdown"> </select> </div> <div class="col-xs-3 col-md-2 col-lg-2"> <div class="new-input-label"> FOLIO NUMBERS </div> </div> <div class="txt-input col-xs-4 col-md-3 col-lg-3"> <textarea class="textarea form-control" rows="5" id="fno"></textarea> </div> <div class="add" id="addbtn"><i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i></div> <div class="row"> <div class="input_fields_wrap"> </div> </div>
I have textbox and textarea within a div with class fields_wrap which are designed in html form. 我在div中有以text形式设计的类fields_wrap的文本框和textarea。
Whenever I click on addbutton then add the class fieldswrap which is having textbox and textarea inside div input_fields_wrap. 每当我单击addbutton,然后添加在div input_fields_wrap中包含文本框和文本区域的类fieldswrap。
But I am not able to add that specific designed div of html form inside div whenever click on button add. 但是,每当单击按钮添加时,我都无法在div中添加html表单的特定设计的div。
In the first glance I found 3 problems in your code 乍一看,我在您的代码中发现了3个问题
<div class="fields_wrap row">
doesn't have closing </div
第一个div <div class="fields_wrap row">
没有结束</div
$(add_button).click(function(e) {
. I don't know whether this is wrong syntax in jquery because I have never tried that :) add_button和wrapper已经是jquery对象,但是在事件中,您再次将它们包装在$ $(add_button).click(function(e) {
。我不知道这在jquery中是否是错误的语法,因为我从未尝试过:) < max_fields
. 最重要的是:您的代码没有添加数量< max_fields
。 You are actually adding one box again and again. 您实际上是一次又一次地添加一个框。 To add more than one box you have to create a hidden box of class input_fields_wrap
and use .clone().show().appendTo('<div class="fields_wrap">').
要添加多个框,您必须创建一个类别为input_fields_wrap
的隐藏框,并使用.clone().show().appendTo('<div class="fields_wrap">').
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.