Submiting Form using Jquery and Ajax without action attribute

Question

This is my form in while loop

<?php 
                    $sql=mysqli_query($dbconfig,"SELECT * FROM faq ORDER BY faqID DESC");
                    while($faqList=mysqli_fetch_assoc($sql)){
                    ?>
            <form id="myForm" action="#" method="post" enctype="multipart/form-data">
            <input type="hidden" id="xAction" name="xAction" value="answerQ">
            <input type="hidden" id="faqID" name="faqID" value="<?php echo $faqList['faqID']; ?>">
            <textarea class="form-control" id="answer" name="answer" placeholder="Answer to this question" ></textarea>
            <input id="submit" type="submit" value="Answer" class="btn btn-success btn-sm btn-rect"></form>
            <?php } ?>

This is my Ajax Code

 <script>
    $("#submit").click(function() {
                var faqID= $("#faqID").val();
                var answer= $("#answer").val();
                var xAction= $("#xAction").val();
                $.ajax({
                    type: "POST",
                    url: "insertData.php",
                    data: 'faqID=' + faqID+ '&answer=' + answer+' & xAction=' + xAction,
                    success: function(result) {
                       alert(result);
                    }
                });


            });
    </script>

and this is my inserData.php file

if($_REQUEST['xAction'] == 'answerQ'){
    $faqID = ($_REQUEST['faqID']);
    $answer = ($_REQUEST['answer']);
    $sql = "UPDATE faq SET answer='".$answer."' WHERE faqID = '".$faqID."'";
    $res = mysql_query($sql) or die(mysql_error());
    if($res){
        header('location:faqList.php?faqID='.$faqID.''); exit;
        }
}

SO i want to use ajax for inserting data into database but its not working at all but when i use action attribute in form then it work but then i could do that even without ajax if i had to so i want to carry out data inserting using ajax only.

Answer 1

Too many errors in script.

First of all, a document can't have multiple id attribute with same name if you are creating form in while loop then id should be unique or you can use class.

In the js you should fetch data from particular form which is being submitted.

<script>
$("input[type='submit']").click(function(e) {
            e.preventDefault();        //prevent form to submit
            var formData= $(this).closest('form').serialize();        //fetch form data
            $.ajax({
                type: "POST",
                url: "insertData.php",
                data: formData,
                success: function(result) {
                   alert(result);
                }
            });


        });
</script>

in php script, you can't use header for redirect user when you are submitting data with ajax, you can use

 success: function(result) {
               alert(result);
               window.location = "page.php";
            }

Hope it will help you!!