Question

我有一个页面，我正在显示一些信息。您可以选择一个选项，然后页面将通过使用ajax响应加载表单来显示表单：

pip install Flask-Script

这很好用。但这种观点是一种形式。我想再用Ajax提交包含的表单。但我似乎无法做到这一点。我认为这是因为如果我为表单设置了一个按钮处理程序，它就不起作用，因为在加载主页面和JQuery脚本时表单不存在。

所以要清楚，我正在使用JQuery和Ajax加载将这个div加载到我的主页面上。然后我想简单地用Ajax提交这个表单。

     $("body").on("change", "#patient_id", function(event){

      var prescription_id = $(this).val();
      event.preventDefault(); // disable normal link function so that it doesn't refresh the page


      var curr_data = {
                    action: 'refferedcall',
                    prescription_id: prescription_id,           
                    dataType: 'json'
                    };

                    $.post(hmgt.ajax, curr_data, function(response) {

                        $('.prescription_content').html(response);      
                        return true;
                    }); 
    });

TIA

然后我通过下面的按钮点击事件使用ajax再次提交表单：

<div class="prescription_content">
<div class="title">Submit News</div>
   <form role="form" id="ref_form" name="ref_form_p">
        <div class="form-group">
            <label for="pat_ref_hosp">Hospital to Refer:</label>
            <input type="text" class="form-control" id="pat_ref_hosp" name="pat_ref_hosp" value="<?php if(!empty($result->reffer_hospital)){ echo $result->reffer_hospital; }?>">
          </div>

          <input type="hidden" class="form-control" id="pres_note" name="pres_note" value="<?php echo $result->priscription_id ;?>">

          <button type="button" id="<?php echo $result->priscription_id ;?>" class="btn btn-success reffering_status">Refer Now</button>
        </form>
</div>

这是日志显示

 $("body").on("click", ".reffering_status", function(event){

      event.preventDefault(); // disable normal link function so that it doesn't refresh the page

      var prescription_id = $("#pres_note").val();

      var pat_ref_hosp = $("#pat_ref_hosp").val();

      var curr_data = {
                    action: 'reffering_status',         
                    dataType: 'json',
                    prescription_id: prescription_id,
                    pat_ref_hosp : pat_ref_hosp,
                    };
                    console.log(curr_data);
       )};

pat_ref_hosp为空 我不知道如何在jsfiddle中显示ajax https://jsfiddle.net/3ggq3Ldm/

Answer 1

是的，你这样做的方式是行不通的，因为你加载的DIV的内容在初始时没有加载到DOM中

 $("body").on("click", ".reffering_status", function(event){});

打电话。

如果我理解正确，这就是你想要实现的行为：

$("#patient_id").on("change", function(event) {
    var prescription_id = $(this).val();
    event.preventDefault(); // disable normal link function so that it doesn't refresh the page

    var curr_data = {
        action: 'refferedcall',
        prescription_id: prescription_id,           
        dataType: 'json'
    };

    $.post(hmgt.ajax, curr_data, function(response) {
        $(".prescription_content").html(response);      

        $(".reffering_status").on("click", function(event){
            event.preventDefault(); // disable normal link function so that it doesn't refresh the page

            var prescription_id = $("#pres_note").val();

            var pat_ref_hosp = $("#pat_ref_hosp").val();

            var curr_data = {
                action: 'reffering_status',         
                dataType: 'json',
                prescription_id: prescription_id,
                pat_ref_hosp : pat_ref_hosp
            };

            console.log(curr_data);
        )};

        return true;
    }); 
});

在使用新信息更新DOM之后，您只需运行附加点击侦听器的代码。

如果此代码符合您的意图，请告诉我。

使用ajax加载表单然后再次使用ajax提交

1 个答案: