如何使用AJAX以另一种形式添加表单？但请记住，第一种形式也是通过AJAX添加的 [英] How to add form with in another form using AJAX? But remember first form is also added with AJAX

问题描述

我在 Php 页面中使用 AJAX 添加表单，现在我在该表单中添加另一个表单使用 AJAX 但它不起作用。

I add a form using AJAX in a Php page now I add anther form within that form which is created using AJAX but it is not working.

这是父页面。

   <div class="col-xs-12 mg-top-30 text-left" id="studentstatus">
        <div class="col-sm-1 hidden-xs"></div>
        <div class="col-sm-2">
                    <label for="" class="control-label">Are you a?</label>
        </div>
        <div class="col-sm-5">
                    <label class="radio-inline">
                    <input type="radio" name="studentstatus" value="fresh">Freshman</label>
                    <label class="radio-inline mg-top-5">
                    <input type="radio" name="studentstatus" value="compart">Reappeared</label>
       </div>
   </div>                    
   <div id="adddata"></div>`

JQuery 使用 AJAX 添加以下内容第一种形式：

JQuery to working with AJAX is the following for adding First form:

$(function () {

    $('#studentstatus input:radio').change(
        function () {
            var index = this.value;
            $.get(
                "add_freshman_form_in_maprevios.php", {
                    studentstatus: index
                },
                function (data) {
                    $("#adddata").html(data);
                }
            );
        }
    );
});

add_freshman_form_in_maprevios.php页面 HTML 代码是：

add_freshman_form_in_maprevios.php page HTML code is:

   $output='<div class="col-xs-12 mg-top-10  text-left">
                            <div class="col-sm-1 hidden-xs"></div>
                            <div class="col-sm-2">
                                <label for="" class="control-label">Roll No.</label>
                            </div>
                            <div class="col-sm-2">
                                <input type="number" class="btn-block input-sm" placeholder="Previous roll no.">
                            </div>

                        </div>
                        <div class="col-xs-12 mg-top-10  text-left">
                            <div class="col-sm-1 hidden-xs"></div>
                            <div class="col-sm-3">
                                <label for="" class="control-label">Write down the names of failed papers:</label>
                            </div>
                        </div>
                        <div class="col-xs-12 mg-top-10 text-left">
                            <div class="col-sm-1 hidden-xs"></div>
                            <div class="col-sm-2">
                                <input type="text" class="btn-block input-sm" placeholder="Failed Paper name...">
                            </div>
                        </div>
                        <div class="col-xs-12 text-left">
                            <div class="col-sm-1 hidden-xs"></div>
                            <button class="mg-left-15 color addanother"> <i class="fa fa-plus-circle " > <label for="">Add another</label></i></button>
                            <div id="compartpaper"></div>
                        </div>'; 
    echo $output; 

它工作得很好，但是当我想要使用这种形式的另一个文本框时， AJAX 比它不工作。我为此写入了 JQuery 代码到主页面。

It is working very well but when I want another textbox in this form using AJAX than it is not working. I write JQuery code for this purpose into the main page.

$('.addanother').click(function (e) {
    e.preventDefault();

    $.get(
        "add_compart_form_in_previous_paper.php", {
             username: $("#username").val()
        },
        function (data) {
            $("#compartpaper").append(data);

        }
    );
});

我想在此页面添加的表单是：

The Form which I want to add in this page is mean :

 <?php
     $output='<div class="col-sm-2">
                    <input type="text" class="btn-block input-sm" placeholder="Failed Paper name...">
              </div>';
    echo $output; 
  ?>

推荐答案

您指的是一个不存在的元素当页面加载时，这就是为什么不输入点击事件。

You're referring to an element that does not exist when the page is loaded , it is why not enter on the click event. Try this instead.

$("#adddata").on("click", ".addanother", function(){
   //your code
});

这篇关于如何使用AJAX以另一种形式添加表单？但请记住，第一种形式也是通过AJAX添加的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！