para lograr ese efecto de no recargar la pagina necesitas AJAX.
un código que uso bastante para ese efecto que quieres es este:
Código PHP:
function GET_ajax(http,div_name,frm_name) {
var GET_xmlhttp = false;
var frm = false;
try { GET_xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) { try { GET_xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e) { try { GET_xmlhttp = new XMLHttpRequest(); }
catch (e) { GET_xmlhttp = false; }}}
if (!GET_xmlhttp) return null;
frm = document.getElementById(frm_name);
var url = "frm_name=" + frm_name;
for (i = 0; i < frm.elements.length; i++) {
frm.elements[i].disabled = true;
if (frm.elements[i].type == "checkbox") {
if (frm.elements[i].checked)
frm.elements[i].value = 1;
else
frm.elements[i].value = 0;
}
if (frm.elements[i].type == "radio") {
if (frm.elements[i].checked){
url = url + "&" + frm.elements[i].name + "=" + escape(frm.elements[i].value);
}
}else{
url = url + "&" + frm.elements[i].name + "=" + escape(frm.elements[i].value);
}
}
GET_xmlhttp.open("GET", http + ".php?" + url, true);
GET_xmlhttp.onreadystatechange = function() {
if (GET_xmlhttp.readyState == 4) {
for (i = 0; i < frm.elements.length; i++) {
if (frm.elements[i].type == "checkbox")
frm.elements[i].checked = false;
if (frm.elements[i].type == "password")
frm.elements[i].value = "";
frm.elements[i].disabled = false;
}
if (GET_xmlhttp.responseText.indexOf("<script type=\"text/javascript\">") > -1) {
var x = GET_xmlhttp.responseText.indexOf("<script type=\"text/javascript\">") + "<script type=\"text/javascript\">".length;
var y = GET_xmlhttp.responseText.indexOf("</script>") - x;
eval(GET_xmlhttp.responseText.substr(x, y));
}else{
document.getElementById(div_name).innerHTML = GET_xmlhttp.responseText + ' ';
}
}
}
GET_xmlhttp.send(null);
return false;
}
que viene siendo la parte básica de AJAX, ponlo entre tus funciones javascript, ahora te explico como se usa XD
primero que nada debes crear un area delimitada por tags con una id, por ejemplo un <div> o un <span>
<div id="mi_contenido"></div>
este div contendrá el contenido de tu primer código pero por un include(), para el ejemplo lo llamaré script.php, tu div quedaría así:
<div id="mi_contenido"><?php include('script.php'); ?></div>
trata de entender lo que estamos haciendo por que aquí se pondrá complicado, las primeras lineas de la funcion GET_ajax generan una página HTML, pero no se muestra, en vez de eso se guarda en una variable, luego inserta el contenido de esa variable en donde tu quieras, en nuestro caso será dentro del div, ESTO es la escencia elemental de AJAX, generar páginas ocultas y luego mostrarlas una vez que se han cargado y el usuario no sabe nada XD
entonces ahora puedes modificar el botón de tu formulario algo así:
<input type='button' value='Aceptar' onclick="GET_ajax(
'script.php',
'mi_contenido',
'formulario')">
te explico cada parametro de la función:
GET_ajax(
página html invisible a generar,
donde quieres poner el contenido generado,
el formulario desde donde envías los datos)
y eso es AJAX, espero que más de uno vea este tema, la mayoría cree que AJAX es muy complicado y se facilitan la vida usando cosas como jquery, pero no es tán complicado en realidad, solo hay que entenderlo :)