AJAX按钮消失

Question

I have a web app in laravel and I have a simple textarea with a form that allows users to enter some basic markdown text and I need it to output the data in both HTML tags and then normal formatting, my main problem, is my button disappears after submitting the first time and I can only seem to have it print out the HTML formatting or the text values but not both at the same time. I'm a little new to AJAX so any help would be awesome. Here is my AJAX code and part of my form.

<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>

So I was able to fix my problem overall, by changing

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

And just adding:

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

I guess my final question is, with $("#markdownform-text").text(data); I would like the data to show on a new line if there is a space between the elements not how it is showing below, in just one long block:

<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

You are replacing the content that is in the <form> tags, you need to put it into a separate <div> to ensure it does no change the HTML within it.

<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>