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.

` var xAction= $("#xAction").val();` where did you have define this? — prakash tank
– prakash tank, Commented Dec 28, 2016 at 17:57
yes i tried using that also but it did not work i have edited my form and included xAction but still did not work — Abhishek Burkule
– Abhishek Burkule, Commented Dec 28, 2016 at 18:00
You HAVE to switch submit to button, otherwise it submits to a nonexistent action and the page reloads and you lose your data. Call your ajax on button click. — mhatch
– mhatch, Commented Dec 28, 2016 at 20:26

Davinder Kumar · Accepted Answer · 2016-12-28 18:49:36Z

2

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

answered Dec 28, 2016 at 18:49

Davinder Kumar

6724 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Abhishek Burkule Over a year ago

what about form im confuse over their

Abhishek Burkule Over a year ago

i did not understand which form has called by this ajax as no form id is called in the ajax code or class

Davinder Kumar Over a year ago

I used this var formData= $(this).closest('form').serialize(); By this, that form will be selected to fetch data from, in which submit button is pressed, mean $(this) will be element which is pressed (current element) and closest() will find nearest parent from( because submit button is child of form) and most nearest form will fetched.

Davinder Kumar Over a year ago

You should use particular id or class you are creating form in loop so what about if script create 25 forms. Would you code for every form? and how would you know that how much forms will be created.? so use a dynamic solution like i shared.

Abhishek Burkule Over a year ago

Yes yes i got that but where does id's of the form play their role in the ajax

|

Collectives™ on Stack Overflow

Submiting Form using Jquery and Ajax without action attribute

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related