possible? making form sent to div tag

August 27, 201015 yr

Hello. I have a search engine form that is not ajax and it refreshes the page on search. I was wondering if it is possible to type a onclick code where it will contain my php script for the search engine by when you search, it'll send show the result in a div tag?

If this is possible, can someone help me get started. I'm a very beginner at ajax.

Thank you

August 27, 201015 yr

Using jQuery;

Your HTML:

<form action="your_search_script.php" method="post" class="ajax" id="search">
<input type="text" name="search_input" value="Search..." />
<input type="submit" value="Search" />
</form>

<div id="search_results"></div>

jQuery:

$(document).ready(function(){

 $("form.ajax").submit(function(){
    var ajax_div = $(this).attr("id")+"_results";
    var data = $(this).serialize();
    var url = $(this).attr("action");
    var type = $(this).attr("method").toUpperCase();
    $.ajax({
       url: url,
       data: data,
       type: type,
       success: function(data){
           $("#"+ajax_div).html(data);
       }
    });
    return false;
 });

});

Make sure to include jQuery library in page <head>:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

August 29, 201015 yr

Author

hmm it seems like it doesnt work?

This is my form html

<form action="" class="ajax" name="form" style="float:right;width:650px;height:60px;margin-right:30px;" onSubmit="return searchLocations();" >
<table style="float:right;"><tr>
<td>
 <label for="testinput"><b>Search</b> <span class="italics">(i.e. chicken breast, Ratatouille, deli):</span></label><br />
 </td>

 <td>
 <label for="testinput"><b>Location</b></label><br />
 </td></tr>
 <tr>
 <td>
 <input name="search_term" type="text" style="height:23px; margin-right:20px;font-size: 16px" value="<?PHP echo $search_term; ?>" size="36" autocomplete="off"/></td>
 <td>
 <input name="addressInput" id="addressInput" type="text" style="height:23px;margin-right:10px;font-size: 16px" value="<?PHP echo $location_term; ?>" size="36" autocomplete="off"/></td><td>

     <select id="radiusSelect">

     <option value="25" selected>25 Miles</option>
     <option value="100">100 Miles</option>

     <option value="200">200 Miles</option>

   </select></td><td>

<input type="submit" name="search_button" style= "padding: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 12px;" value="Search" onclick="searchLocations();" />

 </td></tr></table><br />
</p>
</form>

and then I used the script u wrote up, but not sure what to put in the url, data, type?

$(document).ready(function(){

 $("form.ajax").submit(function(){
    var ajax_div = $(this).attr("id")+"_results";
    var data = $(this).serialize();
    var url = $(this).attr("action");
    var type = $(this).attr("method").toUpperCase();
    $.ajax({
       url: url,
       data: data,
       type: type,
       success: function(data){
           $("#"+ajax_div).html(data);
       }
    });
    return false;
 });

});

and then I made a div id tag around my results

Thanks!

August 29, 201015 yr

at a complete guess, your Form line should have an ID of 'search'. No promises but guess based on limited JS and logic lol

August 29, 201015 yr

Author

oh let me try that too. but I think I have to pass some kind of info in the url, data from the ajax code, but not sure what to put in that? Sorry I just edited my post.

Thanks!

August 29, 201015 yr

Well the reason it doesn't work is that your HTML has no relation to what I've provided. Ignoring the table tags, look at your form compared to mine. Sort that out, and you never know what might happen.

To get you started;

- Give the form a proper action attribute i.e. action="my/results/script.php"

- Make a div using <div id="search_results"></div> and give the form an id of "search"

August 29, 201015 yr

Author

okay. I set those.

One question, I have my search script in different places. I do have a results script in a php file, and the search query in another php file with the form. So the query through my database and form is in the same php and my result script is in another. Is it the correct way to set my action="results.php"?

<form action="results.php" class="ajax" method="post" name="form" id="search" style="float:right;width:650px;height:60px;margin-right:30px;" onSubmit="return searchLocations();" >

Now, i'm not sure what to put in the ajax data, and URL

$(document).ready(function(){

 $("form.ajax").submit(function(){
    var ajax_div = $(this).attr("id")+"_results";
    var data = $(this).serialize();
    var url = $(this).attr("action");
    var type = $(this).attr("method").toUpperCase();
    $.ajax({
       url: url,
       data: data,
       type: "post",
       success: function(data){
           $("#"+ajax_div).html(data);
       }
    });
    return false;
 });

});

Thanks for your help!

August 29, 201015 yr

You shouldn't need to set them, they're taken from the form attributes automatically.

Post your full page code and the results.php script - I'll take a quick look.

August 29, 201015 yr

Author

Thanks for helping!

This is my search_query.php

<?PHP
global $search_term;
global $location_term;
global $results;
function getmicrotime()
{
   list($usec, $sec) = explode(" ", microtime());
   return ((float)$usec + (float)$sec);
}
$connection_string = "connectionstring.php";
require_once($connection_string);
mysql_select_db("chef") or die ( 'Unable to select database.' );
$RESULTS_LIMIT=5;
if(isset($_GET['search_term']) && isset($_GET['addressInput']) && isset($_GET['search_button']))
{
     $search_term = $_GET['search_term'];
  $location_term = $_GET['addressInput'];

   if(isset($_GET['first_pos']))
   {
	$first_pos = $_GET['first_pos'];
}
else
{
       $first_pos = 0;
   }

   $start_search = getmicrotime();
   $sql_query = mysql_query("SELECT * FROM searchengine WHERE MATCH(product) AGAINST('$search_term') AND MATCH(location) AGAINST('$location_term')");

   if($results = mysql_num_rows($sql_query) != 0)
           {
               $sql =  "SELECT * FROM searchengine WHERE MATCH(product) AGAINST('$search_term') AND MATCH(location) AGAINST('$location_term') LIMIT $first_pos, $RESULTS_LIMIT";
                 $sql_result_query = mysql_query($sql);   
           }
   else
           {
                 $sql = "SELECT * FROM searchengine WHERE (product LIKE '%".mysql_real_escape_string($search_term)."%' AND location LIKE '%".mysql_real_escape_string($location_term)."%') ";
                 $sql_query = mysql_query($sql);
                 $results = mysql_num_rows($sql_query);
                 $sql_result_query = mysql_query("SELECT * FROM searchengine WHERE (product LIKE '%".$search_term."%' AND location LIKE '%".$location_term."%') LIMIT $first_pos, $RESULTS_LIMIT ");
           }
   $stop_search = getmicrotime();
   $time_search = ($stop_search - $start_search);
}
?>

form.php

<?php require_once("search_query.php");?>

<form action="results.php" class="ajax" method="post" name="form" id="search" style="float:right;width:650px;height:60px;margin-right:30px;" onSubmit="return searchLocations();" >
<table style="float:right;"><tr>
<td>
 <label for="testinput"><b>Search</b> <span class="italics">(i.e. chicken breast, Ratatouille, deli):</span></label><br />
 </td>

 <td>
 <label for="testinput"><b>Location</b> <span class="italics">(i.e. Zip code, Address):</span></label><br />
 </td></tr>
 <tr>
 <td>
 <input name="search_term" id="search_term" type="text" style="height:23px; margin-right:20px;font-size: 16px" value="<?PHP echo $search_term; ?>" size="36" autocomplete="off"/></td>
 <td>
 <input name="addressInput" id="addressInput" type="text" style="height:23px;margin-right:10px;font-size: 16px" value="<?PHP echo $location_term; ?>" size="36" autocomplete="off"/></td><td>

     <select id="radiusSelect">

     <option value="25" selected>25 Miles</option>
     <option value="100">100 Miles</option>

     <option value="200">200 Miles</option>

   </select></td><td>

<input type="submit" name="search_button" style= "padding: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 12px;" value="Search" onclick="searchLocations();" />

 </td></tr></table><br />
</p>
</form>

results.php

<?PHP

if($results != 0)
{
?>  
<table style="width:950px;"><tr><td style="float:left">Results for <?PHP echo "<i><b><font color=#000000>".$search_term."</font></b></i> "; ?></td>


<td style="float:right">Results <b>
<?PHP echo ($first_pos+1)." - ";
     if(($RESULTS_LIMIT + $first_pos) < $results) echo ($RESULTS_LIMIT + $first_pos);
     else echo $results ; ?>
   </b>
     out of <b><?PHP echo $results; ?></b>
     for(<b><?PHP echo sprintf("%01.2f", $time_search); ?></b>)
     seconds </td>
</tr>
</table>

<?php require("filter.php");?>

<table style="float:left;position:relative">

 <?PHP   
   while($row = mysql_fetch_array($sql_result_query))
   {
   ?>
     <tr align="left">
       <td colspan="2" style="padding-right:30px;"><?PHP echo $row['product']; ?></td>
       <td colspan="2"><?PHP echo $row['location']; ?></td>
     </tr>
 <?PHP
   }
   ?>
</table>

<?PHP
}
elseif(isset($sql_query))
{
?>
<table border="0" cellspacing="2" cellpadding="0">
   <tr>
       <td align="center">No results for   <?PHP echo "<i><b><font color=#000000>".$search_term."</font></b></i> "; ?></td>
   </tr>
</table>
<?PHP
}
?>

index.php

<script type="text/javascript">
$(document).ready(function(){

 $("form.ajax").submit(function(){
    var ajax_div = $(this).attr("id")+"_results";
    var data = $(this).serialize();
    var url = $(this).attr("action");
    var type = $(this).attr("method").toUpperCase();
    $.ajax({
       url: url,
       data: data,
       type: type,
       success: function(data){
           $("#"+ajax_div).html(data);
       }
    });
    return false;
 });

});
</script>



<?php require("includes/form.php");?>


<div id="search_results">
<?php require("includes/results.php");?>
<?php require("includes/pagination.php");?>
</div>

pagination.php

<?PHP
global $first_pos;
global $sites;

if($first_pos > 0)
{
 $back=$first_pos-$RESULTS_LIMIT;
 if($back < 0)
 {
   $back = 0;
 }
 echo "<a href='index2.php?search_term=".stripslashes($search_term)."&addressInput=$location_term&search_button=Search&first_pos=$back' ></a>";
}
if($results>$RESULTS_LIMIT)
{
 $sites=intval($results/$RESULTS_LIMIT);
 if($results%$RESULTS_LIMIT)
 {
   $sites++;
 }
}
for ($i=1;$i<=$sites;$i++)
{
 $fwd=($i-1)*$RESULTS_LIMIT;
 if($fwd == $first_pos)
 {
     echo "<a href='index2.php?search_term=".stripslashes($search_term)."&addressInput=$location_term&search_button=Search&first_pos=$fwd '><b>$i</b></a> | ";
 }
 else
 {
     echo "<a href='index2.php?search_term=".stripslashes($search_term)."&addressInput=$location_term&search_button=Search&first_pos=$fwd '>$i</a> | ";   
 }
}
if(isset($first_pos) && $first_pos < $results-$RESULTS_LIMIT)
{
 $fwd=$first_pos+$RESULTS_LIMIT;
 echo "<a href='index2.php?search_term=".stripslashes($search_term)."&addressInput=$location_term&search_button=Search&first_pos=$fwd ' > >></a>";
 $fwd=$results-$RESULTS_LIMIT;
}
?>
   </td>
 </tr>
</table>

August 29, 201015 yr

To use my method, you need a single PHP script (can use includes) which handles posted data and displays an output.

At the moment, your page, not a standalone script, is handling this.

To put the above into English:

AJAX Request -> Post Data -> Process Script -> Echo Script Result ONLY -> Place onto current page.

At the moment, yours is trying:

AJAX Request -> Post Data -> Load a whole web page -> Place onto current page

If you're still not sure - my apologies, I've tried my best :unknw:

August 29, 201015 yr

Author

Ohh I see. hmmm is there a way to work around this? Or in order to use ajax, we need to have a single script containing the search result?

Thanks for your help. I get what you're saying.

August 29, 201015 yr

Author

I tried putting the results, pagination, and search_query together in one php by using includes. but it still does not show results?

August 29, 201015 yr

What is happening when you submit the form?

August 29, 201015 yr

Author

theres no result or anything. no error message either.

this is my new results.php

<?php include("search_query.php");?>

<?PHP

if($results != 0)
{
?>  
<table style="width:950px;"><tr><td style="float:left">Results for <?PHP echo "<i><b><font color=#000000>".$search_term."</font></b></i> "; ?></td>


<td style="float:right">Results <b>
<?PHP echo ($first_pos+1)." - ";
     if(($RESULTS_LIMIT + $first_pos) < $results) echo ($RESULTS_LIMIT + $first_pos);
     else echo $results ; ?>
   </b>
     out of <b><?PHP echo $results; ?></b>
     for(<b><?PHP echo sprintf("%01.2f", $time_search); ?></b>)
     seconds </td>
</tr>
</table>

<?php require("filter.php");?>

<table style="float:left;position:relative">

 <?PHP   
   while($row = mysql_fetch_array($sql_result_query))
   {
   ?>
     <tr align="left">
       <td colspan="2" style="padding-right:30px;"><?PHP echo $row['product']; ?></td>
       <td colspan="2"><?PHP echo $row['location']; ?></td>
     </tr>
 <?PHP
   }
   ?>
</table>

<?PHP
}
elseif(isset($sql_query))
{
?>
<table border="0" cellspacing="2" cellpadding="0">
   <tr>
       <td align="center">No results for   <?PHP echo "<i><b><font color=#000000>".$search_term."</font></b></i> "; ?></td>
   </tr>
</table>
<?PHP
}
?>

<?php require("includes/pagination.php");?>

then in my index.php i just included my form.php with the action="results.php"

August 29, 201015 yr

And you've included jQuery?

August 29, 201015 yr

Author

there are all my scripts i have included

<script type="text/javascript" src="../javascripts/jquery.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdef" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../javascripts/jquery_pagination.js"></script>
<script type="text/javascript" src="../javascripts/paging.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

one of them is the jquery one right? lol

August 29, 201015 yr

Try in Firefox and open up the Firefox error console. Take a look at what it's saying.

Edit: And remove this line from your above code, you're including jQuery twice:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

August 29, 201015 yr

Author

There's no error regarding any of the ajax script or the results.php script.

August 29, 201015 yr

Firefox error console displays Javascript errors too.

August 29, 201015 yr

Author

I checked the firebug and there's no errors for the javascript? I enabled the console and checked to see javascript errors and warnings. but nothing popped up when I tried my search.

This is weird?

August 29, 201015 yr

You sure you've got a <div id="search_results"></div> on your page?

Try removing the form 'onsubmit' attribute?

August 29, 201015 yr

Author

Yeah I have the div id and I tried removing the onsubmit, but its still the same.

Appreciate your time and help

August 29, 201015 yr

So quite literally nothing happens when you submit?

August 29, 201015 yr

Author

nope. Well I do have a google map api, but that works when I click submit. Just the search doesn't do anything.

The search did work without the ajax code, but when I use the ajax script, it doesn't do anything.

August 29, 201015 yr

Sorry I couldn't be of more help, I hope you manage to get it working as you wished!

August 29, 201015 yr

Author

no problem. thanks a lot for your time. hopefully i can figure this out

August 30, 201015 yr

Try in Firefox and open up the Firefox error console. Take a look at what it's saying.

Edit: And remove this line from your above code, you're including jQuery twice:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

maybe 3 times, do I see a jquery.js being loaded as well?

September 1, 201015 yr

Author

ohh yeah. hehe i deleted those two

possible? making form sent to div tag

Featured Replies

Create an account or sign in to comment

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)