PHP Echo turning HTML into Text

Question

I have a script to echo the user's selection:

<script>
        function onSuccess(data, status)
        {
            data = $.trim(data);
            $("#car-check").text(data);
        }

        function onError(data, status)
        {
            // handle an error
        }        

        $(document).ready(function() {
            $("#submit").click(function(){

                var formData = $("#car-locationform").serialize();

                $.ajax({
                    type: "POST",
                    url: "pages/callajax.php",
                    cache: false,
                    data: formData,
                    success: onSuccess,
                    error: onError
                });

                return false;
            });
        });
    </script>

The selection area:

<ul class="print-menu">
            <li>
                <label for="select-choice-0" class="select">Parking Method:</label>
                <select name="parkingoption" id="parkingoptions" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
                    <option value="">Select One</option>
                    <option value="Self Parking">Self Parking</option>
                    <option value="auto">Valet Parking</option>
                </select>
                </li>
                <li>
                    <div class="self carlocation">
                        <h1>Enter Car Location:</h1>
                        <label for="select-choice-0" class="select">Floor:</label>
                        <select name="locationfloor" id="locationfloor" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
                            <option value="">Floor Select</option>
                            <option value="1">F1</option>
                            <option value="2">F2</option>
                            <option value="3">F3</option>
                            <option value="4">F4</option>
                        </select>
                    </div>
                </li>
                <li>
                    <div class="self car-position">
                        <label for="select-choice-0" class="select">Row:</label>
                        <select name="select-choice-15" id="positionrow" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
                            <option value="">Row Select</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                        </select>
                    </div>
                </li>               
                <li>
                    <div class="self car-section">
                        <label for="select-choice-0" class="select">Section:</label>
                        <select name="select-choice-15" id="positionrow" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
                            <option value="">Section Select</option>
                            <option value="A">A</option>
                            <option value="B">B</option>
                            <option value="C">C</option>
                            <option value="D">D</option>
                            <option value="E">E</option>
                            <option value="F">F</option>
                            <option value="G">G</option>
                        </select>
                    </div>
                </li>
                <li>
                    <div class="self car-section">
                        <label for="select-choice-0" class="select">Spot:</label>
                        <select name="select-choice-15" id="position-row" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
                            <option value="">Spot Select</option>
                            <option value="1-A">1-A</option>
                            <option value="2-B">2-B</option>
                            <option value="3-C">3-C</option>
                            <option value="4-D">4-D</option>
                            <option value="5-E">5-E</option>
                            <option value="6-F">6-F</option>
                            <option value="7-G">7-G</option>
                        </select>
                    </div>
                </li>
                <div class="self car-submit">
                    <button id="submit" type="submit" name="submit" value="submit" data-theme="b">Submit</button>
                </div>
            </ul>
            <div id="car-check"></div>

Ajax Page:

<?php
    $parktype = $_POST["parkingoption"];
    $carfloor = $_POST["locationfloor"]; 
    echo "<h1>Park Type: $parktype </h1>" ;
    echo "<br/>";
    echo "<span> Park Type: $parktype </span>";
?>

what ever the user selects will end up in #car-check. But for some reason the HTML inside of the echo just comes out as text. I only started with $parktype for the time being just to test.

Any help will greatly be appreciated, thanks!

UPDATE --

Thanks everyone I feel completely stupid not noticing that.

Answer 1

Use dataType:'html' :

          $.ajax({
                type: "POST",
                dataType:'html',
                url: "pages/callajax.php",
                cache: false,
                data: formData,
                success: onSuccess,
                error: onError
            });

And change:

$("#car-check").text(data);

To:

$("#car-check").html(data);

Answer 2

Change $("#car-check").text(data); to $("#car-check").html(data);