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

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>

Sabari · Accepted Answer · 2012-03-02 18:44:48Z

2

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

edited Mar 2, 2012 at 18:44

answered Mar 2, 2012 at 15:44

Sabari

6,3551 gold badge29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sabari Over a year ago

Can you try debugging the ajax call in firebug

Sabari Over a year ago

go to the net panel in firebug. Check if any errors are there in console

Sabari Over a year ago

can you try alerting the output. I doubt if the ajax call is returning empty output. Is their any url i can check with ??

Sabari Over a year ago

Hey can you do one thing. In your form can you change type="submit" to type="button" and try. Since type="submit" actually submits the form without listening to the javascript click function.

Sabari Over a year ago

Yeah. That was the problem. You should change type="submit" to type="button" in your form. Then only click event can be listened. Sorry din't notice it earlier

|

Smamatti · Accepted Answer · 2012-03-02 15:15:42Z

1

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

Use:

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

instead of:

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

answered Mar 2, 2012 at 15:15

Smamatti

3,9313 gold badges34 silver badges44 bronze badges

2 Comments

Smamatti Over a year ago

@EvilP No it's not. The $ references jQuery. Please read more careful.

mas-designs Over a year ago

oh sorry, didn't read that carefully, did focus on the val ^.^ sorry dude

outrunthewolf · Accepted Answer · 2012-03-02 15:16:02Z

1

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

console.log(php_output)

answered Mar 2, 2012 at 15:16

outrunthewolf

3834 silver badges13 bronze badges

Comments

Rizwan Mumtaz · Accepted Answer · 2012-03-02 15:27:49Z

0

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

http://jsfiddle.net/Fgtzd/

answered Mar 2, 2012 at 15:27

Rizwan Mumtaz

4,0052 gold badges32 silver badges31 bronze badges

1 Comment

Tim Johnstone Over a year ago

@Rizwan Mumtaz: Thank you for your response, the link in particular is a cool site never stumbled upon before!

Collectives™ on Stack Overflow

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

4 Answers 4

7 Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related