CODEWITHSUNDEEP
javascriptphpjqueryajax
william
william

Reputation: 117

PHP data in AJAX success?

I'm trying to run a very basic PHP code via AJAX and get the data back from PHP page into AJAX success.

however, I don't get anything in the AJAX success from the PHP page and its bugging me badly.

this is the AJAX code:

$(document).ready(function(){
$(function(){
    $('#form-post').on('submit', function(e){

        // prevent native form submission here
        e.preventDefault();

        // now do whatever you want here
        $.ajax({
            type: $(this).attr('method'), // <-- get method of form
            url: $(this).attr('action'), // <-- get action of form
            data: $(this).serialize(), // <-- serialize all fields into a string that is ready to be posted to your PHP file
            beforeSend: function(){
                //$('#result').html('<img src="loading.gif" />');
            },
            success: function(data){
                $('#messageme').html(data);
            }
        });
    });
});
});

and this is the Form:

    <form id="form-post"  action="post-code.php" method="post" >
<input type="hidden" value="Post" name="submit" />
<input type="text" class="inp-form" name="postcode" id="postcode" placeholder="Enter Post Code " /><br  /><br  /><input type="text" id="messageme"  /><br  /><br  />
<input id="findAd" type="button" value=" Search For Address"  />
</form>

and a very simple php:

<?php

$street = "some";
    echo $street;
?>

could someone please advise on this?

Upvotes: 0

Views: 984

Answers (1)

Priyank
Priyank

Reputation: 3868

Please try this: just change type="button" to type="submit".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
<form id="form-post"  action="post-code.php" method="post" >
<input type="hidden" value="Post" name="submit" />
<input type="text" class="inp-form" name="postcode" id="postcode" placeholder="Enter Post Code " /><br  /><br  />
<input type="text" id="messageme"  /><br  /><br  />
<input id="findAd" type="submit" value=" Search For Address"  />
</form>
<script>$(document).ready(function(){

$(function(){
$('#form-post').on('submit', function(e){

    // prevent native form submission here
    e.preventDefault();

    // now do whatever you want here
    $.ajax({
        type: $(this).attr('method'), // <-- get method of form
        url: $(this).attr('action'), // <-- get action of form
        data: $(this).serialize(), // <-- serialize all fields into a string that is ready to be posted to your PHP file
        beforeSend: function(){
            //$('#result').html('<img src="loading.gif" />');
        },
        success: function(data){
             alert(data);
            $('#messageme').html(data);
        }
        });
        });
        });
        });
    </script>


    </body>
   </html>

Upvotes: 4

Related Questions