Abri action em uma div

[Peterson.sch 0]

Bom pessoal sou novo aqui..

Estou com um probleminha. fiz um codigo JS pra abrir um link em uma div, ate aí tudo bem

porem o resultado desse form

action="cadastroUsuario.php?envia"

, gostaria q ele abri-se na mesma

div e não em outra pagina como esta acontecendo..

[Rodrigo Salles 1]

Bom, você pode fazer isso através de ajax, utilizando jquery.

 

Submete o formulário:

<script type='text/javascript'>
$(function(){
   $('#button-submit').click(function(){
      var exemplo = $('#post-exemplo').val();
      $.post('recebe_form.php', {exemplo:exemplo}, function(data){
         $('#div-resultado').html(data);
      });
   });
});
</script>

Isso fará com que o formulário seja submetido para a página recebe_form.php, onde será executada a rotina pertinente. E o resultado, ou seja, a resposta da página recebe_form.php será colocada dentro da div com id = 'div-resultado'.

 

Exemplo do form:

<form id='form-exemplo'>
  Nome: <input type='text' name='exemplo' id='post-exemplo'/>
  <input type='button' id='button-submit' value='Enviar'/>
</form>

<div id='div-resultado'></div>

É isso aí.

[Bruno Augusto 417]

Faltou apenas um return false antes de fechar a function.

 

Caso contrário, dependendo da velocidade de acesso, antes mesmo do AJAX "ir e vir", a página do action será carregada devido ao comportamento padrão do navegador.

[Evandro Oliveira 331]

 

/**
 * Javascript ajaxForm function.
 * 	Transforms HTML Forms into AJAX data senders.
 * 
 * @author Evandro Oliveira <evandrofranco@gmail.com>
 * 
 * @param formId The ID attribute for target <form> element.
 * 
 * @param callback The instruction block to be run when XHR done.
 * 
 * @param callbackParams Additional parameters to callback. Must
 * 	be an Object. At complete request, an 'xhr' property will be
 * 	appended to callbackParams, so you can access 'responseText'
 * 	and other XHR object properties inside of callback.
 * 
 * @return FALSE. Blocks native send <form> action.
 * 
 * @example Alerts the AJAX response:
 * 	ajaxForm('form1', function(params){ alert(params.xhr.responseText); });
 * 
 * @example Insert into id='container' element, the AJAX response:
 * 	ajaxForm('form2', function(param){
 * 		document.getElementById(param.container).innerHTML = param.xhr.responseText;
 * 	}, { container: 'container' });
 */
function ajaxForm(formId, callback, callbackParams){
	document.forms[formId].onsubmit = function(){
		var appendData = function(to, data){
			to[to.length] = data.name + '=' + data.value;
		}
		var toSend = new Array();
		var inputs = this.getElementsByTagName('input');
		for(var i = 0; i < inputs.length; i++) appendData(toSend, inputs.item(i));
		var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.status == 200) {
				if(typeof(callbackParams) !== 'Object') callbackParams = new Object();
				callbackParams.xhr = xhr;
				callback(callbackParams);
			}
		}
		var encoding = this.encoding == '' ? 'application/x-www-form-urlencoded; charset=utf-8' : this.encoding;
		var action = this.action == '' ? window.location.href : this.action;
		var method = this.method == '' ? 'GET' : this.method;
		xhr.open(method, action, true);
		xhr.setRequestHeader('content-type',encoding);
		xhr.send(toSend.join('&'));
		return false;
	}
}

 

 

Acabei de criar ^_^

 

Aí você usa assim:

 

<form action="pagina2.php" method="post" id="form1">
   <fieldset>
       <legend>Exemplo</legend>
       <p><label for="form1_campo1">Digite qualquer coisa: </label><input type="text" id="form1_campo1" name="campo1"></p>
   </fieldset>
   <button type="submit">Enviar!</button>
</form>

 

window.onload = function(){
    ajaxForm('form1', function(resp){ alert('Você digitou: ' + xhr.responseText); });
}

pagina2.php

<?php if(!empty($_POST['campo1'])) echo $_POST['campo1'];

 

Compatível com IE6 ;)