Ajax multiple form submits with loading data, in a div using PHP, does not work

Question

I'm trying to use multiple forms on a page built with Ajax.

I have working code for multiple forms on a page executed with Ajax. My issue is I'm now trying to use a DIV to display the forms and have it refresh after adding a comment. This does not 'trigger' the ajax function, it will go to the page instead of executing it on the current one.

Looked for different solutions, wondering if this is possible and how to do it.

index.php

<!DOCTYPE html>
<html>
 <head>
  <title>Comment System using PHP and Ajax</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

 </head>
 <body>
  <br />
  <h2 align="center"><a href="#">Comment System using PHP and Ajax</a></h2>
  <br />
  <div class="container">


 <hr><hr>




<h3>Main Page Form Submit 1</h3>
<form class='AddToCartAjaxFormORIG' action='fx_test_add.php' method='POST'>

    <input type='hidden' id='ButtonNumber' name='ButtonNumber' value='1'>

    parent_comment_id: <input type='text' id='parent_comment_id' name='parent_comment_id' maxlength='10' size='10'><br>
    comment: <input type='text' id='comment' name='comment' maxlength='255' size='20'>

    <button type='submit' class='btn btn-success btn-xs img-responsive' name='1AddToCartButton' id='1AddToCartButton' value='1ButtonValue'>Add Comment 1</button>

    <p id='1-AccordionSuccessMessage'></p>
    <p id='1-AccordionErrorMessage'></p>

</form>


<hr>

<h3>Main Page Form Submit 2</h3>
<form class='AddToCartAjaxFormORIG' action='fx_test_add.php' method='POST'>

    <input type='hidden' id='ButtonNumber' name='ButtonNumber' value='2'>

    parent_comment_id: <input type='text' id='parent_comment_id' name='parent_comment_id' maxlength='10' size='10'><br>
    comment: <input type='text' id='comment' name='comment' maxlength='255' size='20'>

    <button type='submit' class='btn btn-success btn-xs img-responsive' name='2AddToCartButton' id='2AddToCartButton' value='2ButtonValue'>Add Comment 2</button>

    <p id='2-AccordionSuccessMessage'></p>
    <p id='2-AccordionErrorMessage'></p>

</form>


<br />


   <div id="display_fx_comment"></div>




  </div>
 </body>
</html>


<script type="text/javascript">
<!-- Latest Accordion add to cart ajax script -->
$(document).ready(function() {

    $('.AddToCartAjaxFormORIG').on('submit', function (event) {
        event.preventDefault();

        var ButtonNumber = $("input[name='ButtonNumber']", this).val();
        var parent_comment_id = $("input[name='parent_comment_id']", this).val();
        var comment = $("input[name='comment']", this).val();

        var AccordionSuccessMessageCombined = ButtonNumber + "-AccordionSuccessMessage";
        var AccordionErrorMessageCombined = ButtonNumber + "-AccordionErrorMessage";

        $("#AccordionSuccessMessageCombined").hide();
        $("#AccordionErrorMessageCombined").hide();

        console.log('ButtonNumber: ' + ButtonNumber);
        console.log('parent_comment_id: ' + parent_comment_id);
        console.log('comment: ' + comment);

        console.log('AccordionSuccessMessageCombined: ' + AccordionSuccessMessageCombined);
        console.log('AccordionErrorMessageCombined: ' + AccordionErrorMessageCombined);

        $.ajax({
            type: "POST",
            url: "fx_test_add.php",
            data: {
                ButtonNumber:ButtonNumber,
                parent_comment_id:parent_comment_id,
                comment: comment,

                },
            dataType: "JSON",

             success: function(data) {

                if(data == "Comment Test Passed")
                {
                    alert( "Passed, Comment updated");
                    $("#"+AccordionSuccessMessageCombined+"").html("<p class='alert alert-success'>Passed test</p>");
                    $("#"+AccordionSuccessMessageCombined+"").show();
                    $("#"+AccordionSuccessMessageCombined+"").delay(3000).fadeOut();

                    load_comment();

                }
                else if(data == "Missing comment")
                {
                    alert("Missing comment");
                    $("#"+AccordionErrorMessageCombined+"").html("<p class='alert alert-danger'>Missing comment.</p>");
                    $("#"+AccordionErrorMessageCombined+"").show();
                    $("#"+AccordionErrorMessageCombined+"").delay(2000).fadeOut();
                }

                else if(data == "parent_comment_id is missing")
                {
                    alert("parent_comment_id is missing");
                    $("#"+AccordionErrorMessageCombined+"").html("<p class='alert alert-danger'>parent_comment_id is missing.</p>");
                    $("#"+AccordionErrorMessageCombined+"").show();
                    $("#"+AccordionErrorMessageCombined+"").delay(2000).fadeOut();

                }

                else if(data == "SQL Failed")  //This isnt setup yet
                {
                    //alert( "SQL Failed Accordian: " + data );
                    alert( "Error adding data to cart");
                    $("#"+AccordionErrorMessageCombined+"").html("<p class='alert alert-danger'>Cart add failed due to database problems. "+parent_comment_id+"</p>");
                    $("#"+AccordionErrorMessageCombined+"").show();
                    $("#"+AccordionErrorMessageCombined+"").delay(2000).fadeOut();
                }

            },

            error: function(err) {

                alert( "FAIL \n" +
                    "parent_comment_id: "+ parent_comment_id +
                    "\ncomment: "+ comment +
                    "\nButtonNumber: "+ ButtonNumber +
                    "\nAccordionSuccessMessageCombined: "+ AccordionSuccessMessageCombined +
                    "\nAccordionErrorMessageCombined: "+ AccordionErrorMessageCombined
                    );


                $("#"+AccordionErrorMessageCombined+"").html("<p class='alert alert-danger'>Error with updating.</p>");
                $("#"+AccordionErrorMessageCombined+"").show();
                $("#"+AccordionErrorMessageCombined+"").delay(4000).fadeOut();
            }


        });


    });


 load_comment();

 function load_comment()
 {
  $.ajax({
   url:"fx_fetch_comments.php",
   method:"POST",
   success:function(data)
   {
    $('#display_fx_comment').html(data);
   }
  })
 }





});
</script>

fx_test_add.php

<?php

$parent_comment_id = $_POST["parent_comment_id"];
$comment = $_POST["comment"];


if(!$comment || $comment == '')
{
    $error="Missing comment";
    echo json_encode($error);
}

elseif(!$parent_comment_id || $parent_comment_id < '1')
{
    $error="parent_comment_id is missing";
    echo json_encode($error);
}
else
{
    //insert information to DB

    $res="Comment Test Passed";
    echo json_encode($res);

}

?>

fx_fetch_comments.php

<hr>

<h3>Fetch Comment Form Submit 3</h3>
<form class='AddToCartAjaxFormORIG' action='fx_test_add.php' method='POST'>

    <input type='hidden' id='ButtonNumber' name='ButtonNumber' value='3'>

    parent_comment_id: <input type='text' id='parent_comment_id' name='parent_comment_id' maxlength='10' size='10'><br>
    comment: <input type='text' id='comment' name='comment' maxlength='255' size='20'>

    <button type='submit' class='btn btn-success btn-xs img-responsive' name='3AddToCartButton' id='3AddToCartButton' value='3ButtonValue'>Add Comment 3</button>

    <p id='3-AccordionSuccessMessage'></p>
    <p id='3-AccordionErrorMessage'></p>

</form>

<hr>

<h3>Fetch Comment Form Submit 4</h3>
<form class='AddToCartAjaxFormORIG' action='fx_test_add.php' method='POST'>

    <input type='hidden' id='ButtonNumber' name='ButtonNumber' value='4'>

    parent_comment_id: <input type='text' id='parent_comment_id' name='parent_comment_id' maxlength='10' size='10'><br>
    comment: <input type='text' id='comment' name='comment' maxlength='255' size='20'>

    <button type='submit' class='btn btn-success btn-xs img-responsive' name='4AddToCartButton' id='4AddToCartButton' value='4ButtonValue'>Add Comment 4</button>

    <p id='4-AccordionSuccessMessage'></p>
    <p id='4-AccordionErrorMessage'></p>

</form>

<br><br><br><br>

Main Page Form Submit 1 & 2 both work.

Fetch Comment Form Submit 3 & 4 will go to the page instead of staying put.

Since forms 3 and 4 are created dynamically, they have no event listeners attached. You have to set them up manually or use event delegation. There are tons of questions about this, for instance [this one](https://stackoverflow.com/questions/8752321) — msg, Jul 12 '19 at 19:14
ok, thanks for the help, hopefully this will point me in the right direction to see if I can get it to work. I wasn't sure how to properly describe the issue. Still trying to wrap my head around all the ajax/jquery stuff. — user9731, Jul 12 '19 at 23:11

Ajax multiple form submits with loading data, in a div using PHP, does not work

0 Answers0