如何在單擊按鈕時添加具有html形式的特定設計的文本框
[英]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>
我在div中有以text形式設計的類fields_wrap的文本框和textarea。
每當我單擊addbutton，然后添加在div input_fields_wrap中包含文本框和文本區域的類fieldswrap。
但是，每當單擊按鈕添加時，我都無法在div中添加html表單的特定設計的div。
1 個解決方案
解決方案1
0 2017-04-10 08:39:39
乍一看，我在您的代碼中發現了3個問題
- 第一個div
<div class="fields_wrap row">沒有結束</div - add_button和wrapper已經是jquery對象，但是在事件中，您再次將它們包裝在$
$(add_button).click(function(e) {。我不知道這在jquery中是否是錯誤的語法，因為我從未嘗試過:) - 最重要的是：您的代碼沒有添加數量
< max_fields。 您實際上是一次又一次地添加一個框。 要添加多個框，您必須創建一個類別為input_fields_wrap的隱藏框，並使用.clone().show().appendTo('<div class="fields_wrap">').
如何在單擊按鈕 PHP 時以 html 形式打印特定文本？
[英]how to print a specific text in html form on click of a button PHP?
如何通過單擊按鈕啟動 html 表單，然后按鈕消失，表單出現在屏幕上？
[英]How to initiate an html form from a button click in which the button then disappears and the form appears on the screen?
如何更改單擊按鈕時 HTML 表單中顯示的表單？
[英]How do I change which form is displayed in an HTML form on button click?
當我單擊添加行按鈕時，如何動態地將行添加到 html 中的表單？
[英]How to dynamically add rows to a form in html when i click on add row button?
如何使用與按鈕單擊相關的功能在表單中動態附加文本框
[英]How to dynamically append textbox in a form using a function associated to button click
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.