Return PHP array to JavaScript file with AJAX

937

To preface this question, I have a basic understanding of PHP and AJAX. I was asked to design a simple form that would ask the user to select one of two car manufacturers, which would return all models of the selected make from the multidimensional array created in the data.php file. So far this is what I was able to come up with:

index.php

<body>
<form id="form">
<label for="make">
Make
<select name="make" id="make">
<option value="" selected value="Ford">Ford</option>
<option value="BMW">BMW</option>
</select>
</label>
<input name="submit" value="Submit" type="submit" id="submit">
</form>
<h2>Models:</h2>
<div id="results"></div>
</body>

data.php

<?php
$data = array(
array('make' => 'Ford', 'model' => 'Fiesta'),
array(''make' => 'Ford', 'model' => 'Focus'),
array('make' => 'Ford', 'model' => 'Mustang'),
array('make' => 'BMW', 'model' => '320'),
array('make' => 'BMW', 'model' => 'X3'),
array('make' => 'BMW', 'model' => 'X5'),
);
?>

ajax.php

<?php
require_once( 'data.php' );
$myJSON = json_encode($data);
echo $myJSON;
?>

function.js

$(document).ready(function() {
"use strict"
console.log("Document loaded...");

$('#submit').click(function( event ) {
    event.preventDefault();
    console.log("Submit button was clicked");
    run_ajax();
});

var run_ajax = function() {
    var results = $( '#results' );
    var formData = $( '#make' );
    $.ajax({
        type: 'get',
        url: 'ajax.php',
        data: formData,
        dataType: 'json',
        beforeSend: function() {
          console.log("Before Send");
        },
        success: function( response ) {
          console.log("Success");
        },
    });
    var xmlhttp = new XMLHttpRequest();
    var carModel;
    xmlhttp.onreadystatechange = function() {
        myObj = JSON.parse(this.responseText);
        for (x in myObj) {
          console.log("testing");
          carModel += myObj[x].model + "<br>";
        document.getElementById("results").innerHTML = carModel;
      };
    };
};
});

I am able to get the Success message to display in the console but I cannot get anything to display in the 'results' div in index.php. Does anyone know where I am going wrong? I have searched related topics but couldn't find anything regarding pulling data from a local file. Thanks in advance for any and all help!

866

Answer

Solution:

Got it working now, thanks for the help everyone!

function run_ajax(make) {
    var results = $( '#results' );
    var msg = "";
    $.ajax({
        type: 'get',
        url: 'ajax.php',
        data: make,
        dataType: 'json',
        beforeSend: function() {
          console.log("Before Send");
        },
        success: function( response ) {
          console.log("Success!");
          for(var x in response) {
            if(response[x].make == make) {
              msg += response[x].model + "<br>";
            }
          }
          if(msg == "") {
            msg = "No matches found!";
          }
          document.getElementById("results").innerHTML = msg;
        },
    });
};

People are also looking for solutions to the problem: php - Laravel date validation in model

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.