не срабатывает append

193

10 июня 2017, 13:06

Почему не срабатывает append? input удаляется, но ничего не появляется.
Буду очень признателен.

$(function() { 
  $('#button').on('click', function() { 
    var message = $('<span>Ваша заявка принята!</span>'); 
    $('#panel').append(message); 
    $('#button').remove(); 
 
  }); 
});

<form id="form" metod="post"> 
  <div class="text-center"> 
    <h4>ОСТАВЬТЕ ЗАЯВКУ</h4> 
    <form id="panel"> 
      <input type="text" name="name" placeholder="Имя"><br> 
      <input type="text" name="tel" placeholder="Телефон"><br> 
      <input type="text" name="email" placeholder="E-mail"><br> 
      <input type="submit" name="submit" id="button" value="ОТПРАВИТЬ"> 
    </form> 
  </div> 
</form> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Answer 1

В спецификации указано, что среди содержимого формы не может быть других форм.

Так как в твоем случае одна форма вложена в другую, разметка невалидна и браузеры могут обрабатывать ее по своему желанию, например Chrome и EDGE просто удалят внутреннюю форму.

Из-за этого, в момент выполнения скрипта элемента с id="panel" нет и соответственно, сообщение добавляется в никуда.

Для решения нужно либо заменить форму на тот же див, если нужна именно такая вложенность, либо убрать внутреннюю форму и вставлять в оставшийся контейнер, например:

$(function() { 
  $('#button').on('click', function() { 
    var message = $('<span>Ваша заявка принята!</span>'); 
    $('#panel').append(message); 
    $('#button').remove(); 
 
  }); 
});

<form id="form" metod="post"> 
  <div class="text-center"> 
    <h4>ОСТАВЬТЕ ЗАЯВКУ</h4> 
    <div id="panel"> 
      <input type="text" name="name" placeholder="Имя"><br> 
      <input type="text" name="tel" placeholder="Телефон"><br> 
      <input type="text" name="email" placeholder="E-mail"><br> 
      <input type="submit" name="submit" id="button" value="ОТПРАВИТЬ"> 
    </div> 
  </div> 
</form> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

$(function() { 
  $('#button').on('click', function() { 
    var message = $('<span>Ваша заявка принята!</span>'); 
    $('#form .text-center').append(message); 
    $('#button').remove(); 
 
  }); 
});

<form id="form" metod="post"> 
  <div class="text-center"> 
    <h4>ОСТАВЬТЕ ЗАЯВКУ</h4> 
    <input type="text" name="name" placeholder="Имя"><br> 
    <input type="text" name="tel" placeholder="Телефон"><br> 
    <input type="text" name="email" placeholder="E-mail"><br> 
    <input type="submit" name="submit" id="button" value="ОТПРАВИТЬ"> 
  </div> 
</form> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>