AJAX Кнопка удаления

Question

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

<form action="{{action('MarkDownController@process')}}" method="post" name="markdownform" id="markdownform">
    <input name="_token" type="hidden" value="{{ csrf_token() }}"/>
    <input type="button" id="ctaPrimary" value="Parse"/>
</form>

<script>
      $(function () {

        $('#ctaPrimary').click(function(e) {

          e.preventDefault();

          $.ajaxSetup({headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }});

          $.ajax({
            type: 'post',
            url: 'process',
            crossDomain:'true',
            data: $('#markdownform').serialize(),
            success: function (data) {
                $("#markdownform").html(data);
            }
          });

        });

      });
    </script>

Таким образом, я смог решить мою проблему в целом, изменив

data: $('#markdownform').serialize(),
            success: function (data) {
                $("#markdownform-html").html(data);
                $("#markdownform-text").text(data);
            }

И просто добавив:

<div id="markdownform-html"></div>
<div id="markdownform-text"></div>

Полагаю, мой последний вопрос: $("#markdownform-text").text(data); Я бы хотел, чтобы данные отображались на новой строке, если между элементами есть промежуток, а не тот, который показан ниже, всего в одном длинном блоке:

<h1>Header one</h1> <p>Hello</p> <p>more text <br />What's going on?</p> <h2>Another Header</h2> <p>something hear, eh?</p>

Answer 1

Вы заменяете контент, который находится в тегах <form>, вам нужно поместить его в отдельный <div>, чтобы убедиться, что он не изменит HTML внутри него.

<form action="{{action('MarkDownController@process')}}" method="post" name="markdownform" id="markdownform">
    <input name="_token" type="hidden" value="{{ csrf_token() }}"/>
    <input type="button" id="ctaPrimary" value="Parse"/>
</form>
<div id="markDownContent"></div>

<script>
    $(function () {
        $('#ctaPrimary').click(function(e) {
            e.preventDefault();

            $.ajaxSetup({
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
            });

            $.ajax({
                type: 'post',
                url: 'process',
                crossDomain:'true',
                data: $('#markdownform').serialize(),
                success: function (data) {
                    $("#markDownContent").html(data);
                }
            });
        });
    });
</script>