хочу добавить скрытое поле ввода динамически в HTML

Question

У меня есть 2 кнопки и в зависимости от того, какой из них щелкнул. Я хочу передать эти данные в форму, которая находится на той же странице , поэтому я пытаюсь добавить скрытое поле ввода с этим значением, но он не работает

Я хочу использовать это, чтобы опубликовать форму на PHP, поэтому любые альтернативные решения также приветствуются.

Я попробовал этот код, но не идти

(function() { 

    $(".downloadBrochure").click(function() { 
     if (this.id == "basicBrochure") { 
      $("<input type='text' class='hidden' name='package' id='packagetype' value='Basic'>").appendTo("#brochure"); 
      // $('#packagetype').html("Basic"); 
     } 
     else { 

      // $('#packagetype').html("Plus"); 
     } 
     $(".modal-content").show(); 
    }); 

})(); 

Мой HTML форма

<div class="modal-content"> 
      <div class="modal-body"> 
       {!! Form::open(array('url' => '/saveRequestInfo', 'method' => 'POST', 'class' => 'form-horizontal', 'id' => 'brochure')) !!} 
       {{ csrf_field() }} 
       <div class="form-group"> 
        <div class="col-xs-8 col-xs-offset-2"> 
         <input type="text" placeholder="Name" name="txt_name" id="txt_name" class="form-control" 
           required> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-xs-8 col-xs-offset-2"> 
         <input type="text" placeholder="Phone" name="txt_phone" id="txt_phone" class="form-control" 
           required> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-xs-8 col-xs-offset-2"> 
         <input type="text" placeholder="Email" name="txt_email" id="txt_email" class="form-control" 
           required> 
        </div> 
       </div> 

       <input type="text" class="hidden" name="url" id="url" 
         value="<?= $_SERVER['QUERY_STRING'] ? $_SERVER['QUERY_STRING'] : ""; ?>"> 

       <div class="form-group"> 
        <div class="col-xs-8 col-xs-offset-2 text-center"> 
         <button class="btn btn-primary callback" name="btn_call"> 
          Download Brochure 
         </button> 
        </div> 
       </div> 
       {!! Form::close() !!} 
      </div> 
     </div> 

Пожалуйста помогите

Answer 1

Вы не должны использовать IIFE (Сразу Вызывается функция Expression) потому что он запускает его до того, как DOM будет готов, вместо этого вы измените его на document.ready блок:

jQuery(function ($) { // <-----use the doc ready block this way 

    $(".downloadBrochure").click(function() { 
     if (this.id == "basicBrochure") { 
      $("<input type='hidden' name='package' id='packagetype' value='Basic'>").appendTo("#brochure"); 
      // $('#packagetype').html("Basic"); 
     } 
     else { 

      // $('#packagetype').html("Plus"); 
     } 
     $(".modal-content").show(); 
    }); 

}); // <-------remove it here 

И как в комментарий предложений является то, что если вам требуется, чтобы иметь скрытый элемент ввода, то вы должны использовать type="hidden", который может дать вам входной элемент и не виден пользователю.