How to extract data from XML using PHP and AJAX based on user input?

Question

I have a form where users enter 6 numbers and those numbers are compared to numbers contained in an xml document. I've used SimpleXML in PHP to compare the entered numbers to the numbers stored in the xml document, then echo the corresponding date from the xml. This works correctly.

I'm now trying to use AJAX to present a loading screen before the result is displayed. Once the form is submitted, the loading screen appears but the result is not shown.

How do I get the result to show?

This is the form:

<form id="numbers_form" method="post" action="index.php" ajax="true">
        <div class="col-lg-2 col-md-2 numbers">
            <input class="num_input" type="number" name="num1" id="num1" required >
        </div>
        <div class="col-lg-2 col-md-2 numbers">
            <input class="num_input" type="number" name="num2" id="num2" required >
        </div>  
        <div class="col-lg-2 col-md-2 numbers">
            <input class="num_input" type="number" name="num3" id="num3" required >
        </div>
        <div class="col-lg-2 col-md-2 numbers">
            <input class="num_input" type="number" name="num4" id="num4" required >
        </div>
        <div class="col-lg-2 col-md-2 numbers">
            <input class="num_input" type="number" name="num5" id="num5" required >
        </div>
        <div class="col-lg-2 col-md-2 numbers">
            <input class="num_input" type="number" name="num6" id="num6" required >
        </div>
        <div class="input-button">
            <input class="submit" type="submit" value="Show me the money" name="submit">
        </div>
        <div class="img">
            <img id="loader" src="images/loader.gif" alt="loading image">
        </div>
</form>

This is my php:

$num1 = $_POST['num1'];
$num2 = $_POST['num2'];
$num3 = $_POST['num3'];
$num4 = $_POST['num4'];
$num5 = $_POST['num5'];
$num6 = $_POST['num6'];

$xml = simplexml_load_file('lottery.xml') or die("Error: Cannot create object");
if(isset($_POST['num1'])&& isset($_POST['num2'])&& isset($_POST['num3']))
{
foreach($xml->children() as $record) 
    { // for every record node
        if($record->num1 == $num1 && $record->num2 == $num2 && $record->num3 == $num3 && $record->num4 == $num4 && $record->num5 == $num5 && $record->num6 == $num6)
     {
           echo 
           "<div class='success'>
           <h1>".$record->date."</h1>
           </div>";
     }
   }    
}

This is the AJAX:

$(function() {  

    $(".submit").click(function() {  

    var num1 = $("#num1").val();  
    var num2 = $("#num2").val(); 
    var num3 = $("#num3").val();  
    var num4 = $("#num4").val(); 
    var num5 = $("#num5").val();  
    var num6 = $("#num6").val();  
    var dataString  = 'num1='+ num1 + '&num2=' + num2 + '&num3=' + num3 + '&num4=' + num4 + '&num5=' + num5 + '&num6=' + num6;  
    if(num1=='' || num2=='')  
    {   
    $('.error').fadeOut(200).show();  
    }  
    else  
    {  

    $.ajax({  
    type: "POST",  
    url: "index.php",  
    data: dataString,  

    data:jQuery('#numbers_form').serializeArray(),
        beforeSend: function(){
        $('#loader').css('display','block');
        },
            success: function(res){
            $('#loader').css('display','none');
            }
    });  
    }  
    return false;  
    });  
    });

Answer 1

Remove the line return false; which is below the ajax call