Html form input sent, then stuck in php page

Question

My situation is as follow, i have a form input in a Jquery Mobile page, and i am submitting the form with no form button. I need the returned result from the php(it is in JSON) back in the html. But at the moment when i submit the search with pressing the enter button, it links to the php page, with the returned results and just stuck there, and not back in the html page. Thanks for your time!

Code:

$("#searchform").submit(function( event ) {
    $.ajax({
        type: "GET",
        url: "http://test.com/App/searchtest.php",
        dataType:'json',
        success: function(data){ 
            console.log(data);
            $("#content").append(data);
        }
    })
});

<form id="searchform" name="searchform" method="post"
        action="http://www.test.com/App/searchtest.php" data-ajax="false">  
    <input type="search" id="searchinput" name="searchterm"
        value="" data-mini="true" placeholder="Where?"/>
</form>

<?php
ini_set('display_errors', 1); error_reporting(E_ALL);

include 'connect.php';

$search = ($_POST['searchterm']);
$keywords = explode (" ", $search);
$columns = array("country","name");
$andParts = array();

foreach ($keywords AS $keyword){
    $orParts = array();
    foreach($columns AS $column){
        $orParts[] = $column . " LIKE '%" . ($keyword) . "%'";
    }
    $andParts[]= "(" . implode($orParts, " OR ") . ")";
}

$and = implode ($andParts, " AND ");

$sql = "SELECT * FROM Listing WHERE $and ";

$result = mysqli_query($con,$sql);

$output = array();

// fetch your results
while( $row = mysqli_fetch_assoc($result)) {
    // add result row to your output's next index
    $output[] = $row;
}

// echo the json encoded object
echo json_encode( $output ); 

?>

Ben, please provide the php for us to look at. Also, check your browser console network tab to see the response from the server. It will most likely tell you what is going on — user3871
– user3871, Commented Oct 28, 2014 at 18:40
What do you see in the console (if any). Also include some php code — Sam Battat
– Sam Battat, Commented Oct 28, 2014 at 18:42
Ok, but the php is returning the JSON with no problem. But i updated it in the edit. — Ben
– Ben, Commented Oct 28, 2014 at 18:43
@Ben Look at your network tab in your debugger (usually hit f12), it will show the error — user3871
– user3871, Commented Oct 28, 2014 at 18:46
Nothing in console, because it is stuck in the php page that echoed back the result. nothing in the network tab as well, just says No requests captured. — Ben
– Ben, Commented Oct 28, 2014 at 18:47

rm-vanda · Accepted Answer · 2014-10-28 19:56:37Z

0

The modern way to do what oskr suggests is to use .preventDefault() -

$("#searchform").submit(function( event ) {
    event.preventDefault();

    $.ajax({
        type: "GET",
        url: "http://test.com/App/searchtest.php",
        dataType:'json',
        success: function(data){ 
            console.log(data);
            $("#content").append(data);
        }
    })
});

answered Oct 28, 2014 at 19:56

rm-vanda

3,1763 gold badges25 silver badges35 bronze badges

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

Comments

oskr · Accepted Answer · 2014-10-28 19:53:47Z

-1

Ben the problem with your code is that you are sending the ajax request and submitting the form at the same time, which implies linking to the php page, reloading the page and thus cancelling the ajax success handler.
To avoid this you should return false which prevents the form submission, at the end of your submit event handler or calling event.preventDefault.
I hope this helps:

$("#searchform").submit(function( event ) {
    $.ajax({
        type: "GET",
        url: "http://test.com/App/searchtest.php",
        dataType:'json',
        success: function(data){ 
            console.log(data);
            $("#content").append(data);
        }
    })
    return false;
});

answered Oct 28, 2014 at 19:53

oskr

1891 silver badge5 bronze badges

1 Comment

oskr Over a year ago

@rm-vanda: And thats why i say "or calling event.preventDefault". I just provided the two ways you can prevent the default behavior of the submit

Collectives™ on Stack Overflow

Html form input sent, then stuck in php page

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related