CODEWITHSUNDEEP
phpjqueryajaxforms
Tim Johnstone
Tim Johnstone

Reputation: 363

jQuery + AJAX to retrieve data sent by an input submit type

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>

Upvotes: 1

Views: 5958

Answers (4)

Sabari
Sabari

Reputation: 6335

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. :)

Upvotes: 2

Rizwan Mumtaz
Rizwan Mumtaz

Reputation: 3955

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

http://jsfiddle.net/Fgtzd/

Upvotes: 0

outrunthewolf
outrunthewolf

Reputation: 383

open firebug / chrome dev tools and in your success function put

console.log(php_output)

Upvotes: 1

Smamatti
Smamatti

Reputation: 3931

Error: "#postcodeSearch".val is not a function

Use:

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

instead of:

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

Upvotes: 1

Related Questions