Добавить форму с динамическим HTML при нажатии кнопки

Question

У меня есть приложение для веб-сайта http://firstusadata.com/cash_flow_test/ которому я хотел бы добавить некоторые функциональные возможности, но пока безуспешно.

Идея состоит в том, чтобы иметь возможность добавлять форму информации о поставщике одним нажатием кнопки, а затем иметь возможность добавлять продукты в эту форму информации конкретного поставщика другим нажатием кнопки. На изображении ниже показана кнопка информации о поставщике, а также кнопка добавления продукта.

Области поставщика и кнопки продукта

В настоящее время, если я удаляю динамическую html-функцию для формы информации о поставщике (div id="dynamic_content_1"), как показано ниже, кнопка добавления продукта будет работать, и она добавит новую линию продуктов под предыдущей. Я считаю, что моя ошибка находится где-то в этой области, но я не уверен.

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

По крайней мере, в вашей скрипке у вас есть dynamic_html(), определенный дважды. Ваша страница должна вызвать ошибку (f12, чтобы открыть консоль, если вы хотите увидеть это самостоятельно).

Также эта линия

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

должен иметь двойные кавычки для обязательного поля.

Answer 2

Я смог решить эту проблему, правильно назвав функции dynamic_html() и добавив двойные кавычки, как предложил Дж. Буш.

Спасибо всем за помощь всем! Рад, что в качестве ресурса доступно замечательное сообщество, подобное этому.