PHP Form submit, no reload problems

[sford999]

I have the following code which is supposed to submit the form without reloading and display the results in the div "s-results", but what its doing is reloading and not showing the results, there is nothing in the errorlogs to show why and it's got me stumped, so any help would be appreciated.

<?php

error_reporting(E_ALL);
// Is the plugin activated
include_once($_SERVER['DOCUMENT_ROOT'].'/includes/master.inc.php');
include_once('functions.php');
?>
<script>
$(document).ready(function(){
	$('#dosubmit').click(function(){
		showValues();
	});
	
	$(function() {
		$('#search').bind('#dosubmit',function(){
			showValues(); 
			return false; 
		});
	});		
	function showValues() {
		//this will pass the form input
		$.post('search/includes/search-results.php', { query: search.query.value },
		
		//then print the result
		function(result){
			$('#s-results').html(result).show();
		});
	}		
});
</script>

<?php
echo '<form action="index.php" name="search" id="search" method="post" enctype="multipart/form-data">';
echo '<div class="loadContent ui-corner-all" style="width:100%;margin-top:20px;"><div class="loadContentInternal contentPageWrapper">';
echo '<h2>'.t('search_files', 'Search Files').'</h2>';
echo '<img src="plugins/search/assets/img/icons/24px.png" style="vertical-align:middle;" />  ';
echo '<input type="text" class="uiStyle" style="height:35px;font-size:22px;font-weight:normal;" name="query" id="query" size="45" /><input type="image" src="search/assets/img/search_element.png" style="vertical-align:top;margin-bottom:2px;" name="submit" id="dosubmit" />';
echo '</form>';
echo '<div id="s-results"></div>';
echo '</div>';
echo '</div>';
?>

search-results.php

<?php
if(empty($_POST)) 
{
  exit("Direct access is not allowed.");
}
include_once($_SERVER['DOCUMENT_ROOT'].'/includes/master.inc.php');
include_once('functions.php');

// Make sure the search query is safe before continuing
$query = makesafe($_REQUEST['query']);
$results = $db->getRows("SELECT * FROM file WHERE originalName LIKE '%".$query."%' AND statusId = '1' LIMIT 30");

echo '<div class="loadContent ui-corner-all" style="width:100%;margin-top:20px;"><div class="loadContentInternal contentPageWrapper">';

if(!$query)
{
	echo t('search_searched_nothing', 'You didn\'t enter anything to search for.');
}
elseif(!$results)
{
	echo '<h2>'.t('search_results', 'Search Results').' - '.stripslashes($query).'</h2>';
	echo t('search_no_files_found', 'Nothing Found');
}
else
{
	echo '<h2>'.t('search_results', 'Search Results').' - '.stripslashes($query).'</h2>';
	// table header
	echo '<table width="90%" align="left" padding="3px" border="0">';
	foreach($results as $result)
	{
		// Results
		echo '<tr>';
		echo '<td width="50%" align="left" style="border-collapse:collapse;border-bottom:1px solid #ccc;">'.$result['originalName'].'</td>';
		echo '<td width="25%" align="left" style="border-collapse:collapse;border-bottom:1px solid #ccc;">'.formatSize($result['fsize']).'</td>';
		echo '<td width="25%" align="left" style="border-collapse:collapse;border-bottom:1px solid #ccc;"><a href="'._CONFIG_SITE_PROTOCOL.'://'._CONFIG_SITE_HOST_URL.'/'.$result['shortUrl'].'" target="_blank">'.t('search_load_file', '[Download PDF]').'</a></td>';
		echo '</tr>';
	}
	echo '</table>';
	echo '<div class="clear"><!-- --></div>';
}
echo '</div></div>';
echo '<div class="clear"><!-- --></div>';
?>

[Muddy_Funster]

off the top of my head I would say it's because you have assigned a type of "submit" to the image you need to add an over ride to the default function for the click event - see here http://api.jquery.com/event.preventDefault/

[sford999]

Even when using a normal submit button it does exactly the same thing, reloads when its not supposed to and doesn't show any results

[jazzman1]

Just return false when you called showValues().

$('#dosubmit').click(function(){
		showValues(); return false;
	});

And check whether you get some values from search-results.php

function(result){
                alert(result);
		$('#s-results').html(result).show();
		});

That's all you have to do in this file.

[Muddy_Funster]

My point was that as the form is using the submit function (by you setting type=submit) and the form action is set to reload the page, I think you need to use javascript to override that default functionality of the element (the one that calls the form action) and have it only fire the JS onclick function.

[sford999]

Just return false when you called showValues().

$('#dosubmit').click(function(){
		showValues(); return false;
	});

And check whether you get some values from search-results.php

function(result){
                alert(result);
		$('#s-results').html(result).show();
		});

That's all you have to do in this file.

 

That worked perfectly, thanks