Using Ajax and JQuery to call PHP Script

Question

I am currently trying to send form data to a PHPMyAdmin MySQL server. Without Ajax, everything works on a web server, but the problem is that the webpage is redirected. Here is the jquery script, which refers to the insert.php script. I am not sure what to input for data, because form.serialize() throws an error.

$.ajax({
        url: "insert.php",
        type: "post",
        data: form.serialize() ,
        success: function (response) {

        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }

What do I need to add? I am a beginner with Ajax. Here is the PHP script:

Let me know if you need more info. Thanks!

EDIT: Rest of Code




     

    




  
  
   
  
  
  
    

  Notes: 

  



   Log 
  
  

    Player
    Action
    Location
    Quarter
    Time
    Notes

Woodrow · Accepted Answer

The main issue is you are attempting to use form.serialize() for the data in the Ajax request. form doesn't point to anything and is undefined. You need to point/assign the form declaration to a DOM element using an identifier (id). So add id="game" to your open form tag. Then you can do the following using Jquery.

jQuery:

var form = $('#game');

Then you can do:

form.serializeArray() for the data part of your Ajax request, to ensure you send the data over as $_POST variables.

If you're using jQuery and want to do an Ajax request from same page, please try out the snippet below, with the following code that will allow you to click the submit button without re-routing to a page for processing. You can still use a submit button instead of just a button if you want.

$(document).ready(function() {

  $('form').on('submit', function(e) {
    e.preventDefault();
    save();
  });

});

A few other issues/tips that were identified looking at your code:

Remove target="_blank" from your opening form tag, this isn't needed
Your first select id is incorrect and will result in a JS runtime error. The id needs to be player so your JS code can reference it properly.
You are using ' and " interchangeably within your HTML tags. Please stick to using one or the other. In HTML the use of single quotes (') and double quotes (") are interchangeable, there is no difference. But consistency is recommended, therefore we must pick a syntax convention and use it regularly.

function save() {

  var a = document.getElementById("player");
  value = a.options[a.selectedIndex].value;
  console.log(value);
  var b = document.getElementById("what");
  value1 = b.options[b.selectedIndex].value;
  console.log(value1);
  var c = document.getElementById("where");
  value2 = c.options[c.selectedIndex].value;
  console.log(value2);
  var d = document.getElementById("quarter");
  value3 = d.options[d.selectedIndex].value;
  console.log(value3)
  var e = document.getElementById("time");
  value4 = e.options[e.selectedIndex].value;
  console.log(value4)
  var f = document.getElementById("notes");
  value5 = f.value;
  console.log(value5)
  var table = document.getElementById("log");
  var row = table.insertRow(1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);
  var cell5 = row.insertCell(4);
  var cell6 = row.insertCell(5);

  cell1.innerHTML = value;
  cell2.innerHTML = value1;
  cell3.innerHTML = value2;
  cell4.innerHTML = value3;
  cell5.innerHTML = value4;
  cell6.innerHTML = value5;

  $.ajax({
    url: 'insert.php',
    type: 'POST',
    data: $('#game').serializeArray(),
    success: function(response) {

    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.log(textStatus, errorThrown);
    }
  });

  if (value2 == 'leftwing') {
    document.getElementById('pool').src = 'onetwofive.png'
  } else if (value2 == 'set') {
    document.getElementById('pool').src = 'set.png'
  } else if (value2 == 'point') {
    document.getElementById('pool').src = 'point.png'
  } else if (value2 == 'rightwing') {
    document.getElementById('pool').src = 'fourfivefive.png'
  } else if (value2 == 'lefttwo') {
    document.getElementById('pool').src = 'onetwotwo.png'
  } else if (value2 == 'righttwo') {
    document.getElementById('pool').src = 'fourfivetwo.png'
  } else {
    document.getElementById('pool').src = 'wapo.png'
  }

}

$(document).ready(function() {

  $('form').on('submit', function(e) {
    e.preventDefault();
    save();
  });

});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}





  



  
  
    
      
      
      
      
      
      Notes: 
      
    
  
   Log 
  
    
      Player
      Action
      Location
      Quarter
      Time
      Notes

Using Ajax and JQuery to call PHP Script

Answers (1)

Related Questions