Posting form using AJAX

Question

can anyone please help me with sending the below form using Ajax. All I want is to send it to the trolley1.php page for processing, no call backs or anything like that. Basically replicate the form but sending it with Ajax so the page does not go to the trolley1.php page. I have tried so many methods but have not been able to do this. Bill Gates or Steve Wozniak if you guys are reading this, please help

This gives me a console $.Ajax is not a function in the console

<script>
$(document).ready(function(){
$('form').submit(function(event){
event.preventDefault();

var form_data = $(this).serialize();   
$.ajax({ 
    url: "trolley1.php",
    type: "POST",
    dataType:"json", 
    data: form_data
}).done(function(data){ 
    alert("Item added to Cart!"); 
    }
});
});
</script>

<?php
echo "
<div class='col-sm-3 mt-5'>
<form class='ajax' method='post' action='trolley1.php?action=add&id=$id'>
  <div class='products'>
      <a>$img</a>
      <input type='hidden' name='id' value='$id'/>
      <input type='hidden' name='name' value='$product'/>
      <input type='hidden' name='price' value='$price'/>
      <input type='text' name='quantity' class='form-control' value='1'/>
      <input type='submit' name='submit' style='margin-top:5px;' class='btn btn-info'
             value='Add to Cart'/>      
  </div>
</form>

The 2 outcomes I get are, $.Ajax is not a function in the console and the other is the script goes through and executes and goes to the trolley1.php page. Can anyone help — fen_coding, Jun 23 '18 at 19:43
please also share your javascript code with us - or at least what you have already tried - atm this is only a form sent via post — Evil_skunk, Jun 23 '18 at 20:22
I have added 1 version of about a dozen or so that I have tried. I have checked W3 school, youtube and alot of Google searches but just can't seem to get it right — fen_coding, Jun 23 '18 at 21:12

score 0 · Accepted Answer · answered Jun 24 '18 at 14:35

0

You have one syntax error in your JS Code - see correct code

$(document).ready(function(){
    $('form').submit(function(event){
        event.preventDefault();

        var form_data = $(this).serialize();   
        $.ajax({ 
            url: "trolley1.php",
            type: "POST",
            dataType:"json", 
            data: form_data
        }).done(function(data){ 
            alert("Item added to Cart!"); 
        });
    });
});

And you are using jQuery as additional javascript libary. jQuery uses $ to access the methods (e.g. $.ajax) Thats the reason why you get undefined as error.

So you need to load the libary first at the beginning of your page (inside <head>). E.g. directly from their CDN

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>

Then it should work for you

answered Jun 24 '18 at 14:35

Evil_skunk

3,040
4
30
42

Hey Evil_skunk, my god, I cannot believe the amount of time I have spent on the coding side of things and thought the bootstrap javascript had everything included. I swear I was going to give up on this project. You are too good, can't believe such a simple thing was overlooked. Evil by name but not by nature.Thank you and may all the good come to you – fen_coding Jun 24 '18 at 16:59
no problem - we are on stackoverflow to help each other :) - but please accept my answer if it solved your problem – Evil_skunk Jun 24 '18 at 17:32
I'm new here so not sure how to accept. I have already given a green tick and 1 up vote on the left side of the answer. Please let me know how to accept if there is another way – fen_coding Jun 24 '18 at 17:47

Posting form using AJAX

1 Answers1