Question

I am wanting to use the AJAX function via jQuery to return some data onto my homepage. Currently, I am using an ‘action=’ on my form to an external PHP file just to check that the data is being sent and it is. I’m now wanting to use AJAX to return this data into a div on my homepage. I have this code but at the moment it’s not returning any data:

$("#ticketSearch").click(function(e) {
  e.preventDefault();
    var eNameData = ("#postcodeSearch").val();
      alert('#ticketSearch clicked'); //this alert doesn't even work!

    var dataToSend = 'postcodeSearch=' + eNameData;

    $.ajax({                
        url: "index.php", 
        type: "POST",
        data: dataToSend,     
        cache: false,
        success: function(php_output)
            {
            $("#ticketResults").html(php_output).show();
            }
    }); 
});

The code for the form:

<form name="pcSearchForm" id="pcSearchForm" class="pcSearchForm"  method="post" action="postCodeSearch.php"> // the action method needs to be taken out

        <input type="text" name="postcodeSearch" id="postcodeSearch" class="postcodeSearch" placeholder="Postcode..." /> 

        <input type="submit" name="ticketSearch" id="ticketSearch" class="ticketSearch" value="Search" /> 

</form>

Any help is much appreciated, I think I am on the right lines but something just isn’t right!
Thank you.

EDIT: New code:

$(document).ready(function() {
  $("#ticketSearch").click(function(e) {
alert("click");
e.preventDefault();
var eNameData = $("#postcodeSearch").val();
 alert('eNameData');
 });

var dataToSend = 'postcodeSearch=' + eNameData;

    $.ajax({                
        url: "index.php", 
        type: "POST",
        data: dataToSend,     
        cache: false,
        success: function(php_output)
            {
            $("#ticketResults").html(php_output);
            alert("#ticketResults");
            }
    }); 
}); 

The form:

        <input type="text" name="postcodeSearch" id="postcodeSearch" class="postcodeSearch" placeholder="Postcode..." /> 

        <input type="button" name="ticketSearch" id="ticketSearch" class="ticketSearch" value="Search" />


    </form>

Answer 1

You are doing it wrong dude 🙂 ..

Change

var eNameData = ("#postcodeSearch").val();

to

var eNameData = $("#postcodeSearch").val();

I wonder why you use alert('#ticketSearch clicked'); .

What’s its use. If you need to alert the data postcodeSearch,

then just do

 alert(eNameData'); 

Hope this helps you 🙂

EDIT:

Your code seems to be wrong, Your click event is closed before the ajax call is done. Also i think you are calling the wrong file. Your form submit action page is postCodeSearch.php but in ajax you are calling index.php

Your code should be changed to :

FORM :

<form name="pcSearchForm" id="pcSearchForm" class="pcSearchForm"  method="post" action="postCodeSearch.php"> // the action method needs to be taken out

        <input type="text" name="postcodeSearch" id="postcodeSearch" class="postcodeSearch" placeholder="Postcode..." /> 

        <input type="button" name="ticketSearch" id="ticketSearch" class="ticketSearch" value="Search" /> 

</form>

JS:

$(document).ready(function() {
    $("#ticketSearch").click(function(e) {
       var eNameData = $("#postcodeSearch").val();
       var dataToSend = 'postcodeSearch=' + eNameData;

       $.ajax({                
           url: "postCodeSearch.php", 
           type: "POST",
           data: dataToSend,     
           cache: false,
           success: function(php_output) {
               $("#ticketResults").html(php_output);
           }
       }); 
    }); 
}); 

Hope this helps you. 🙂