动态添加到元素时不包括表单标记

Im using AJAX to added forms to an element but my problem is the tag itself it not included.

Expected result:

<div class="step-level" id="step-three"><form action="" method="post" class="director_form"> <!-- some element here --> </form></div>

Return result:

<div class="step-level" id="step-three"> <!-- some element here --> </div>

Here's my code:

JS:

$.ajax({
url: MyAjax.ajaxUrl,
type: 'POST',
data: { 'action':'get_step_three', 'hasABN':'true', 'entityType':'' },
beforeSend: function() {

},
success: function(result_data){
    $('#step-three').html( result_data );
},
error: function( e ) {
    console.log( e );
}
});

PHP:

<?php 
if (isset($_POST)) {
    $form = '';
    ob_start();
    ?>
        <form action="dasdasd" class="director_form" method="post" id="form[0]">
            <label for="" class="control-label">Full Name:</label>
            <select name="name_title[]" class="name_title">
                <option value="Mr">Mr</option>
                <option value="Mrs">Mrs</option>
                <option value="Ms">Ms</option>
                <option value="Miss">Miss</option>
                <option value="Dr">Dr</option>
                <option value="Other">Other</option>
            </select>
            <input type="text" name="given_name[]" class="given_name" />
            <input type="text" name="last_name[]" class="last_name" />

            <!-- some more elements here -->

        </form>
    <?php
        $form = ob_get_contents(); 
        ob_end_clean();
    echo $form;
}

Let me know if have any ideas. Thanks!

You're replacing all of the html with the returned data with this function:

$('#step-three').html( result_data );

If you want the returned data to replace the html within the form itself, you need the form to be the selector. Ie:

$('#step-three form').html( result_data );

or, better yet,

$('#step-three').find('form').html( result_data );

or

$('.director_form').html( result_data );