title: I'm creating a form in a modal with javascript and it doesn't work with ajax
body: <p>I have problem with a form and i haven't solved for 2 days. Please help :).</p>
  
  <p>This is trigger button</p>
  
  <pre><code>&lt;button type="button" id="buttonid" data-toggle="modal" data-target="#myModal"&gt;Test&lt;/button&gt;
  </code></pre>
  
  <hr>
  
  <p>I used like this because I'm trying to get different rooms details for all forms and I must use one form id.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  document.getElementById("buttonid").addEventListener("click", function(){
  $("#result").html("&lt;div id='myModal' class='modal fade' role='dialog'&gt; &lt;div 
  class='modal-dialog'&gt;&lt;div class='modal-content'&gt;&lt;div class='modal-header'&gt; 
  &lt;button type='button' class='close' data-dismiss='modal'&gt;&amp;times;&lt;/button&gt; &lt;h4 
  class='modal-title'&gt;Reservation Form&lt;/h4&gt;&lt;/div&gt;&lt;div class='modal-body'&gt;&lt;form 
  action='javascript:;' method='POST' id='reservationFormId'&gt;&lt;div&gt;&lt;label 
  for='email'&gt;Email Address:&lt;/label&gt;&lt;input type='email' class='required' 
  name='email' placeholder='Email Address'&gt;&lt;/div&gt;&lt;div &gt;&lt;label 
  for='phone'&gt;Phone:&lt;/label&gt;&lt;input type='text' class=' required' name='phone' 
  placeholder='Phone Number'&gt;&lt;/div&gt;&lt;div class='row'&gt;&lt;div&gt;&lt;input type='submit' 
  id='roomButton' name='roomButton' value='Send'&gt;&lt;/input&gt;&lt;/div&gt;&lt;/div&gt;  &lt;div 
  id='roomResult'&gt;&lt;/div&gt;&lt;/form&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;");
  
  });                                                     
  &lt;/script&gt;
  
  &lt;div id="result"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>ajax--</p>
  
  <pre><code>  var ajaxURL = "myUrl address"; 
  
    $("#roomButton").click(function(){ 
      var i = 0;
      $(".required").each(function(){
          if ($(this).val() == "") {
              $(this).css("border", "1px solid red");
              i++;
          }else{
              $(this).css("border", "1px solid #22560c");
          }
      });
  
      if (i == 0) {
                  $("#roomResult").html('');
                  // $("#send_message").hide();
                  $.ajax({
                      type: "POST",
                      url: ajaxURL + 'mail?asd=test',
                      data: $("#reservationFormId").serialize(),
                      success: function(sonuc) {
                          $("#roomResult").html(sonuc);
                          $("#roomButton").show();
                      }
                  });
      }
  });
  </code></pre>
  
  <p>Form doesn't work with ajax with this usage without error. But if I write directly this form (without javascript) it's working. Jquery file included in header by the way.</p>