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


Form tags not included when dynamically added to an element

我使用AJAX添加表单到元素,但我的问题是标签本身不包括。

预期结果:

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

返回结果:

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

下面是我的代码:

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;
}
如果有什么想法请告诉我。谢谢!

用返回的数据替换所有的html:

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

如果您希望返回的数据替换表单本身中的html,则需要表单作为选择器。即:

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

或者,更好的是

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

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