Enviar datos onclick javascript php

[chinoafroo]

Bueno estoy empezando con html php javascript y todo eso es mi primer pagina y es un altas, bajas, modificaciones y consulta.

el problema que tengo es que encontre un codigo en la web que me sirve para cargar otra pagina dentro de un div

Código:

<script>
					function myFunction2(){
					var nombre = getElementById('nombre').value;
					var apellido = getElementById('apellido').value;
					var edad = getElementById('edad').value;
					var sexo = getElementById('sexo').value;
					var folio = getElementById('folio').value;
					var clave_anterior = getElementById('clave_anterior').value;
					var clave_actual = getElementById('clave_actual').value;
					var originario = getElementById('originario').value;
					var fecha_apertura = getElementById('fecha_apertura').value;
					var ocupacion = getElementById('ocupacion').value;
					var municipio = getElementById('municipio').value;
					var estado = getElementById('estado').value;
					var postal = getElementById('postal').value;
					var referencia = getElementById('referencia').value;
					var servicio = getElementById('servicio').value;
					var medico = getElementById('medico').value;

					document.getElementById("myDiv").innerHTML="";
					document.getElementById("myDiv").style.border="0px";
					loadDoc("nombre="+nombre+"&apellido="+apellido+"&edad="+edad+"&sexo="+sexo+"&folio="+folio+"&clave_anterior="+clave_anterior+"&clave_actual="+clave_actual+"&originario="+originario+
						"&fecha_apertura="+fecha_apertura+"&ocupacion="+ocupacion+"&municipio="+municipio+"&estado="+estado+"&postal="+postal+"&referencia="+referencia+"&servicio="+servicio+
						"&medico="+medico,"registro.php",function(){
					  if (xmlhttp.readyState==4 && xmlhttp.status==200){
						document.getElementById("pers").innerHTML=xmlhttp.responseText;
						}else{ document.getElementById("pers").innerHTML='<img src="images/load.gif" width="50" height="50" />'; }

					  });
					}
					</script>
					
					}

Y me funciona bien carga las paginas de maravilla, el problema viene cuando intento mandar un formulario

Código HTML:

<div id="myDiv">
<form class="form-horizontal" method="POST"><br><br>
<br>								
<div class="row">		
<div class="col-xs-4">
<label for="nombre">Nombre(s)</label>						
<input type="text" name="nombre" id="nombre" class="form-control" placeholder="Nombre(s)" onfocusout="this.value=this.value.toUpperCase()"/> </div>
<div class="col-xs-4">
<label for="apellido">Apellido(s)</label>
<input type="text" name="apellido" id="apellido" class="form-control" placeholder="Apellido(s)" onfocusout="this.value=this.value.toUpperCase()"/>        
</div>

<div class="col-xs-2">
<label for="edad">Edad &nbsp</label>						
<input type="number"  name="edad" id="edad" class="form-control" placeholder="Edad" onfocusout="this.value=this.value.toUpperCase()"/>  
</div> 

y lo envio asi (No se si este bien)

Código HTML:

<center><input type="submit" onclick="myFunction2()"class="boton3"/></center> 

Quiero saber como mando todos los valores de los input a la funcion, y que lo siga cargando en el mismo div

[Jovany_Hipster]

Puedes usar Ajax mejor para eso, javascript no te funcionara
<script>
$(document).ready(function() {
$('#enviar').click(function(e){
var texto1 = $('input#texto1').val();
var texto2 = $('input#texto2').val();
var texto3 = $('input#texto3').val();
var formData = 'texto1=' + texto1 + '&texto2=' + texto2 + '&texto3=' + texto3;

document.getElementById("texto1").value = "";
document.getElementById("texto2").value = "";
document.getElementById("texto3").value = "";

var contenido_div = $("#cargar_pagina").val();
var contenido = contenido_div + texto1+ " " + texto2 + " " + texto3;

$.ajax({
type: "POST",
url:"archivo_subir_datos.php",
data: formData,
success: function(texto_enviado){
$("#cargar_pagina").html(contenido)
alert("Tu texto se envio con exito");
},
});
return false;
}
})
});
</script>

<form action="">
<input type="text" id="texto1">
<input type="text" id="texto2">
<input type="text" id="texto3">
<input type="submit" id="enviar" value="enviar">
</form>

<div id="cargar_pagina">

</div>
__________________________________________________ ______________
archio_subir_datos.php

<?php
require("connections/mysql.php");

$texto1=$_POST['texto1'];
$texto2=$_POST['texto2'];
$texto3=$_POST['texto3'];

$sql = mysqli_query($conexion_BD, "INSERT INTO textos(campo1, campo2, campo3) VALUES('$texto1', '$texto2', '$texto3') ");
?>


Espero y te sirva amigo...

[VALFONSOG]

Coincido con Jovany_Hipster deverias usar ajax solo que te propongo este metodo es un poco mas facil.

Código Javascript:

function datos(div, fomulario){
    var Formulario = document.getElementById(fomulario);
    var longitudFormulario = Formulario.elements.length;
    var cadenaFormulario = ""
    var sepCampos
    sepCampos = ""
        for (var i=0; i <= Formulario.elements.length-1;i++) {
            cadenaFormulario += sepCampos+Formulario.elements[i].name+'='+encodeURI(Formulario.elements[i].value);
            sepCampos="&";
                }
alert(cadenaFormulario);
                var ajax=nuevoAJA();
                alert(div);         
            ajax.open("GET","funciones/funciones_tienda.php?tarea="+div+
            '&='+cadenaFormulario,true);
            alert(ajax);    
            ajax.onreadystatechange=function(){ 
                
                if (ajax.readyState==4){
                            
                        document.getElementById(div).innerHTML=ajax.responseText;
                    }
                    
     
    
            }
            ajax.send(null);
        //window.onerror = new Function("return true");
 
 }
 

en el metodo onclick le mandas de parametros el id del div donde quieres la respuesta y el id de tu formulario en lo demas funciona igual que el de Jovany_Hipster y puedes usar lo con cualquier div solo en tu php pon un case. espero que te sirva.