单击按钮时使用动态 HTML 添加表单

Question

我有一个网站应用程序 http://firstusadata.com/cash_flow_test/，我想为其添加一些功能，但没有成功。

这个想法是能够通过单击一个按钮添加供应商信息表单，然后能够通过单击不同的按钮将产品添加到该特定供应商信息表单。下图显示了供应商信息按钮以及添加产品按钮。

目前，如果我删除供应商信息表 (div id="dynamic_content_1") 的动态 html 功能，如下所示，添加产品按钮有效，它将附加新产品线位于之前的产品线之下。我相信我的错误位于该区域的某处，但我不确定。

function dynamic_html(){
   var content =  '<div id="dynamic_content_1">'                    
  +'<div class="row">'
   +'<div class="col-sm-8 col-sm-offset-2 SecPageMain">'
               +'<h3>Vendor Information</h3>'
    +'<form method="post" action="http://firstusadata.com/cash_flow/companies/insert_company_information">'
     +'<div class="row margin_top_25">'
      +'<div class="col-md-4 col-md-offset-1 col-sm-12">'
       +'<p>Name of Company:</p>'
      +'</div>' 
      +'<div class="col-md-6 col-sm-12">'
       +'<input type="text" class="form-control pull-left w100" name="company_name" required='' >'
      +'</div>'
     +'</div>'
     +'<div class="row margin_top_25">'
      +'<div class="col-md-4 col-md-offset-1 col-sm-12">'
       +'<p>Company Phone Number:</p>'
      +'</div>'
          
      +'<div class="col-md-6 col-sm-12">'
       +'<input type="text" class="form-control pull-left w100" id="" name="company_phone" required='' >'
      +'</div>'
     +'</div>'
     +'<div class="row margin_top_25">'
      +'<div class="col-md-5 col-md-offset-1 col-sm-12">'
       +'<p>Did this company build your website?</p>'
      +'</div>'
          
      +'<div class="col-md-5 col-sm-12">'
       +'<div class="radio radio-info radio-inline" >'
        +'<input type="radio"  value="1" name="built_website">'
        +'<label for="inlineRadio1"> Yes </label>'
       +'</div>'
       +'<div class="radio radio-inline">'
        +'<input type="radio"  value="0" name="built_website" checked>'
        +'<label for="inlineRadio2"> No </label>'
       +'</div>'
      +'</div>'
     +'</div>'
     +'<div class="hide" id="BuildWebsite" >'
      +'<div class="row margin_top_10">'
       +'<div class="col-md-4 col-md-offset-1 col-sm-12">'
        +'<p>Website URL:</p>'
       +'</div>'
           
       +'<div class="col-md-6 col-sm-12">'
        +'<input type="text" class="form-control pull-left w100" id="website_url" name="website_url">'
       +'</div>'
      +'</div>'
      
      +'<div class="row margin_top_10">'
       +'<div class="col-md-4 col-md-offset-1 col-sm-12">'
        +'<p>Type of Website:</p>'
       +'</div>'
           
       +'<div class="col-md-6 col-sm-12">'
        +'<select class="form-control w100" id="type_of_website" name="type_of_website">'
         +'<option value="Amazon Store">Amazon Store</option>'
         +'<option value="Affiliate">Affiliate</option>'
         +'<option value="Drop Ship">Drop Ship</option>'
         +'<option value="Lead Generation">Lead Generation</option>'
         +'<option value="Small Business">Small Business</option>'
         +'<option value="Landing Page">Landing Page</option>'
        +'</select>'
       +'</div>'
      +'</div>'
      
      +'<div class="row margin_top_10 category_area" style="display:none">'
       +'<div class="col-md-4 col-md-offset-1 col-sm-12">'
        +'<p>Category:</p>'
       +'</div>'
       
       +'<div class="col-md-6 col-sm-12">'
        +'<select class="form-control w100" id="website_category" name="website_category">'
         +'<option value="">Select category</option>'
        +'</select>'
       +'</div>'
      +'</div>'
      
      +'<div class="row margin_top_10">'
       +'<div class="col-md-4 col-md-offset-1 col-sm-12">'
        +'<p>Average Profit Margin Per 100 Users:</p>'
       +'</div>'
           
       +'<div class="col-md-6 col-sm-12">'
       +' <input type="text" class="form-control pull-left w100 price" id="average_profit" name="average_profit">'
       +'</div>'
      +'</div>'
     +'</div>'
     
     +'<div id="dynamic_content_2">'
      +'<div class="row margin_top_25 form-inline product_row">'
       +'<div class="col-sm-3 col-sm-offset-1">'
        +'<div class="form-group w100">'
         +'<input type="" class="form-control  w100" id="" name="product_name[]" placeholder="Product"  required>'
        +'</div>'
       +'</div>'
       
       +'<div class="col-sm-2">'
        +'<div class="form-group  w100">'
         +'<input type="" class="form-control w100 price" id="" name="product_price[]" placeholder="Price"  required>'
        +'</div>'
       +'</div>'
       
       +'<div class="col-sm-3">'
        +'<select class="form-control w100" name="product_type[]" required>'
         +'<option value="">Select</option>'
         +'<option value="Web Development">Web Development</option>'
         +'<option value="Business Development">Business Development</option>'
        +'</select>'
       +'</div>'
       
       +'<div class="col-sm-3">'
        +'<div class="btn-inline margin_left_25">'
         +'<button type="button" class="btn plusbtn btn-default pull-left">'
          +'<i class="fa fa-plus"></i>'
         +'</button>'
         
         +'<button type="button" class="btn btn-default minusbtn pull-left">'
          +'<i class="fa fa-minus"></i>'
         +'</button>'
        +'</div>' 
       +'</div>'
      +'</div>'
     +'</div>'
                    
                    
           +'<h4>Add Vendor</h4>'         
            +'<div class="col-sm-3">'
        +'<div class="btn-inline margin_left_25">'
         +'<button type="button" class="btn testbutton1 btn-default pull-left">'
          +'<i class="fa fa-plus"></i>'
         +'</button>'
         
         +'<button type="button" class="btn btn-default testbutton2 pull-left">'
          +'<i class="fa fa-minus"></i>'
         +'</button>'
        +'</div>'
       +'</div>'                 
    +'</form>'
   +'</div>'
  +'</div>'
       +' </div>';
   return content;
  }

我对 jquery 相当了解，所以对于那些更有经验的人来说，我可能遗漏了一些非常明显的东西，非常感谢您的帮助。

Answer 1

至少在您的 fiddle 中，您定义了两次 dynamic_html()。您的页面应该会引发错误（如果您想自己查看，请按 f12 打开控制台）。

还有这一行

+'<input type="text" class="form-control pull-left w100" name="company_name" required='' >'

必填字段需要用双引号引起来。

Answer 2

我能够通过正确命名 dynamic_html() 函数并按照 J. Bush 的建议添加双引号来解决此问题。

感谢大家的帮助！很高兴有这样一个很棒的社区作为资源。

单击按钮时使用动态 HTML 添加表单

Add Form with Dynamic HTML on Button Click

html

javascript

jquery

onclick

dynamic-html