load form using ajax then again submit using ajax

Question

I have a page where I'm displaying some information. You can select a option and the page will then display a form by loading the form using ajax response:

     $("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;
                    }); 
    });

This works fine. But this view is a form. I want to then submit the included form with Ajax as well. But I can't seem to do it. I think it is because if I set up a button handler for the form it doesn't work as the form isn't present when the main page and JQuery script is loaded.

So to be clear, I'm loading this div onto my main page using JQuery and Ajax load. I then want to simply submit this form with Ajax also.

<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> 

TIA

Then I submitted form again using ajax through below button click event:

 $("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);
       )};

Here is log displaying

Object {action: "reffering_status", dataType: "json", prescription_id: "1", pat_ref_hosp: ""} 

pat_ref_hosp is empty I don't know how to display ajax in jsfiddle https://jsfiddle.net/3ggq3Ldm/

Answer 1

Yes the way you are doing it will not work because the contents of the DIV you are loading-in is not loaded into the DOM when your initial

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

call is made.

---

If I am understanding you correctly, this is the behaviour you want to achieve:

$("#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;
    }); 
});

You simply need to run the code that attaches your click listener AFTER the DOM has already been updated with the new information.

Please let me know if this code does what you were intending it to.