JQuery AJAX пост создать вторую форму на форму отправить

Question

У меня есть такая форма:

<form id='form'>
  Begin time<input id="begintime" type="text" name="begintime"><br>
  End time<input id="endtime" type="text" name="endtime"><br>
  <input name="submit" type="submit" value="Submit">
</form>

на моем сайте это выглядит так:

Дело в том, чтоЯ не хочу, чтобы веб-страница обновлялась.поэтому я сделал этот пост:

      $(function () {

    $('#form').on('submit', function (e) {

      e.preventDefault();

      var begin = $("#begintime").val();
      var end = $("#endtime").val();

      $.ajax({
        type: 'post',
        url: '',
        data: {begin: begin, end: end},
        success: function (result) {
            $( result ).appendTo('p');
        }
      });

    });

    });

Но каждый раз, когда вы нажимаете на кнопку отправки, это происходит:

также я используюэто, чтобы получить данные:

        <p>
<?php 
$begin = $_POST['begin'];
$end = $_POST['end'];
?>
</p>

Я пробовал это:

   $('p').empty();

Я положил в код ajax, это результат тот же.Что я делаю неправильно?пожалуйста помоги.и спасибо.

Answer 1

Вы должны просто изменить HTML, а не добавлять его так

...
success: function (result) {
    $('p').html(result);
}
...

Answer 2

Попробуйте приведенный ниже код.Он очистит все внутри тега p и добавит форму в i

success: function (result) {
    $('p').html(result);
}