Div no permite insertar datos con php y mysql

nelson12345 · #1 (**permalink**) 23/11/2015, 20:16

Buen dia amigos. Tengo un problema y una duda con el diseño de <div> en html. Descargue una plantilla html donde el menu se encuentra al lado izquierdo dentro de un <div>, este menu tiene enlaces que apuntaran a otro <div> que se encuentra a la derecha en donde se cargará la información, de esta forma simulando frames.

Tengo un formulario en el div derecho para insertar datos con php y MySQL, cuando trato de insertar los datos con la pagina conformada por "Divs" no me inserta nada, pero cuando abro la ventana independiente del <div> qie contiene el formulario si me lo inserta. Allguien me puede decir como hacer que los datos se inserten dentro del <div>

index.php

Código HTML:

Ver original<html>
<title></title>
<head>
 
<script type='text/javascript'>
    function cargarContenido(pagina)
    {
        // cargamos el icono en el div donde ira el contenido
        $("#columnader").html("<img src='ajax-loader.gif' class='loader' border='0' />");
        // cargamos la pagina en el div capa
        $("#columnader").load(pagina);
    }
</script>
 
</head>
<body>
<div id="columnaizq">
<li><a onClick="cargarContenido('ciudad.php')" href="#">Ciudad</a></li>
</div>
        <div id="columnader">
        </div>
</body>
</<html>

ciudad.php

Código HTML:

Ver original<html>
<title></title>
<head>
</head>
<body>
<div id="columnader">
<FORM NAME="tipo_doc" METHOD="post">
Agregar: <input type="text" name="dtalle_ciu" MAXLENGTH=45></input>
<input type="submit" name="enviar" value="Guardar" class="button white"></input></FORM>
</div>
</body>
</<html>

El script que esta en la cabecera de la pagina index.php hace que al dar clic en el menu del <div id="columnaizq"> aparezca la informacion en el <div id="columnader">, pero no me inserta cuando ejecuto el boton 'enviar' en la pagina index.php. Cuando ejecuto el boton 'enviar' en la pagina ciudad.php si me inserta el dato en mi DB

xfxstudios · #2 (**permalink**) 23/11/2015, 22:27

ok te pregunto algo, tu pagina principal es php o html???? digo porque si estas cargando contenido php dentro de una pagina con extension html, no creo que te funcione

nelson12345 · #3 (**permalink**) 24/11/2015, 05:11

Hola xfxstudios Gracias por responder. Las dos son .php

xfxstudios · #4 (**permalink**) 24/11/2015, 05:19

toma en consideracion el hecho de que estas repitiendo todas las etiquetas en un mismo documento, <html>, <head>, <body>...., eso te puede causar conflictos, lo otro es: ¿El formulario se envia dentro de la misma pagina ciudad.php? o ¿Es enviado a otro php?

nelson12345 · #5 (**permalink**) 24/11/2015, 05:49

Si, se envia dentro de la misma pagina ciudad.php

xfxstudios · #6 (**permalink**) 24/11/2015, 06:11

alli creo que radica tu probloema, prueba crear un php con el codigo de envio del formulario, y adapta el form para que envie la info a este nuevo archivo y prueba nuevamente, o trata de ejecutar la instruccion de envio por medio de ajax para evitar recargar la pagina, pero primero intenta lo que te recomende al principio

nelson12345 · #7 (**permalink**) 24/11/2015, 06:30

Hola si me funcionó como tu dijiste. Ahora cuando envio el formulario desde ciudad.php a enviar.php me inserta los datos y para que la pagina no se me quede en blanco hago un document.location=('index.php'); para devolverme a la pagina inicial, pero cuando hago esto, el contenido del <div id="columnader"> (osea el formulario de ciudad.php en este caso) se desaparece. ¿hay alguna forma de hacer que no se pierda el contenido que se esta trabajando? probé haciendo un document.location=('ciudad.php'); pero me lleva es a la pagina ciudad.php

ciudad.php

Código HTML:

Ver original<FORM NAME="tipo_doc" METHOD="post" action="enviar.php">
    <br>Agregar: <input type="text" name="dtalle_ciu" MAXLENGTH="45"></input><br><br><br>
    <br><input type="submit" name="enviar" value="Guardar" class="button white"></input>
   </FORM>

enviar.php

Código PHP:

Ver original<?php include ("conex.php"); ?>
 
        <?php
        if($_POST["enviar"]!="")    
        {
            $sql = "insert into ciudad (dtalle_ciu) values ('".$_POST["dtalle_ciu"]."')";
                if( mysql_query( $sql, $link ) )            
                {
            echo "<script language='javascript'>alert('Registro Guardado correctamente');document.location=('index.php');</script>";
        }
        }           
       ?>

xfxstudios · #8 (**permalink**) 24/11/2015, 06:32

si amigo, puedes realizar el envio con ajax y asi no se recarga la pagina, en todo caso crear un div debajo del formulario para recibir la respuesta de mensaje enviado y algun codigo js que limpie los input, pero esto tambien se puede desde el mismo ajax

xfxstudios · #9 (**permalink**) 24/11/2015, 06:40

para enviar con ajax seria algo asi:

Código Javascript:

Ver originalfunction objetoAjax(){
        var xmlhttp = false;
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
 
            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) {
                xmlhttp = false; }
        }
 
        if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
          xmlhttp = new XMLHttpRequest();
        }
        return xmlhttp;
    }
    
function enviar(){
 
        //Recogemos los valores introducimos en los campos de texto
        nombre = document.form.nombre.value;
        ciudad = document.form.ciudad.value;
    
         //Aquí será donde se mostrará el resultado
        resultado = document.getElementById('resultado');
 
        //instanciamos el objetoAjax
        ajax = objetoAjax();
 
        //Abrimos una conexión AJAX pasando como parámetros el método de envío, y el archivo que realizará las operaciones deseadas
        ajax.open("POST", "enviar.php", true);
 
        //cuando el objeto XMLHttpRequest cambia de estado, la función se inicia
        ajax.onreadystatechange = function() {
 
             //Cuando se completa la petición, mostrará los resultados 
            if (ajax.readyState == 4){
 
                //El método responseText() contiene el texto de nuestro 'consultar.php'. Por ejemplo, cualquier texto que mostremos por un 'echo'
                resultado.innerHTML = (ajax.responseText) 
            }
        } 
 
        //Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario. 
        ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
 
        //enviamos las variables a 'enviar.php' 
        ajax.send("&nombre="+nombre+"&ciudad="+ciudad) 
 
}

Código HTML:

Ver original<form name="form" action="" onSubmit="enviar(); return false">
<input type="text" name="nombre"/><br>
<input type="text" name="ciudad"/><br>
 
<input type="submit" value="Enviar"/>
</form>
<div id="resultado"></div>

el codigo ajax debe estar en pa pagina donde este el formulario, en tu caso deberas colocarlo en la pagina principal donde esta el DIV que carga el form.

En el DIV de resultado se va a cargar la informacion que imprimas desde tu php, ejemplo:

Código PHP:

Ver original//si el mensaje fue enviado
if($mail){
echo "Mensaje Enviado con éxito";
} else{
echo "Mensaje no enviado";
}

lo que esta en los echo es lo que va a cargar el ajax en el div de resultado, saludos.!

nelson12345 · #10 (**permalink**) 24/11/2015, 11:02

Hola, hice lo que me pediste pero cuando envío los datos desde ciudad.php hasta enviar.php se queda la pagina en blanco y no inserta los datos

index.php

Código HTML:

Ver original<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
    <script language="JavaScript">
    
function objetoAjax(){
        var xmlhttp = false;
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
 
            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) {
                xmlhttp = false; }
        }
 
        if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
          xmlhttp = new XMLHttpRequest();
        }
        return xmlhttp;
    }
    
function enviar(){
 
        //Recogemos los valores introducimos en los campos de texto
        nombre = document.form.nombre.value;
        dtalle_ciu = document.form.dtalle_ciu.value;
    
         //Aquí será donde se mostrará el resultado
        resultado = document.getElementById('resultado');
 
        //instanciamos el objetoAjax
        ajax = objetoAjax();
 
        //Abrimos una conexión AJAX pasando como parámetros el método de envío, y el archivo que realizará las operaciones deseadas
        ajax.open("POST", "enviar.php", true);
 
        //cuando el objeto XMLHttpRequest cambia de estado, la función se inicia
        ajax.onreadystatechange = function() {
 
             //Cuando se completa la petición, mostrará los resultados 
            if (ajax.readyState == 4){
 
                //El método responseText() contiene el texto de nuestro 'consultar.php'. Por ejemplo, cualquier texto que mostremos por un 'echo'
                resultado.innerHTML = (ajax.responseText) 
            }
        } 
 
        //Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario. 
        ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
 
        //enviamos las variables a 'enviar.php' 
        ajax.send("&nombre="+nombre+"&dtalle_ciu="+dtalle_ciu) 
 
}    
    
    </script>    
    
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Bienvenido a Credi Progreso</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
          <form name="form" action="enviar.php" onSubmit="enviar(); return false">
    <br>Nombre: <input type="text" name="nombre" MAXLENGTH="45"></input><br>
        Ciudad: <input type="text" name="dtalle_ciu" MAXLENGTH="45"></input><br>            
            <br><br>
    <br><input type="submit" name="enviar" value="Guardar" class="button white"></input>
        </form>
   
<div id="resultado">
</div>    
</body>
</html>

enviar.php

Código PHP:

Ver original<?php include ("conex.php"); ?>
 
<div id="resultado">
        <?php
        if($_POST["enviar"]!="")    
        {
        $checkuser = mysql_query("SELECT dtalle_ciu FROM ciudad WHERE dtalle_ciu='$_POST[dtalle_ciu]'");
        $dtalle_ciu_exist = mysql_num_rows($checkuser);
        if ($dtalle_ciu_exist>0) {
echo "El dato ya existe. Por favor digite otro');";
        }else{
        if($_POST["dtalle_ciu"]!="")
        {       
            $sql = "insert into ciudad (dtalle_ciu,nombre) values ('".$_POST["dtalle_ciu"]."','".$_POST["nombre"]."')";
                if( mysql_query( $sql, $link ) )            
                {
            echo "Registro Guardado correctamente";
        }
        }           
            else{ echo "Falta un campo por digitar";
                  }
              }
        
        }                       
       ?>
 
</div>

xfxstudios · #11 (**permalink**) 24/11/2015, 14:26

primero modifica esto asi sin elementos html como los DIVs:

Código HTML:

Ver originalinclude ("conex.php");
 
        if($_POST["enviar"]!="")    
        {
        $checkuser = mysql_query("SELECT dtalle_ciu FROM ciudad WHERE dtalle_ciu='$_POST[dtalle_ciu]'");
        $dtalle_ciu_exist = mysql_num_rows($checkuser);
        if ($dtalle_ciu_exist>0) {
echo "El dato ya existe. Por favor digite otro');";
        }else{
        if($_POST["dtalle_ciu"]!="")
        {       
            $sql = "insert into ciudad (dtalle_ciu,nombre) values ('".$_POST["dtalle_ciu"]."','".$_POST["nombre"]."')";
                if( mysql_query( $sql, $link ) )            
                {
            echo "Registro Guardado correctamente";
        }
        }           
            else{ echo "Falta un campo por digitar";
                  }
              }
        
        }

segundo el form elimina el action asi, ya que elenvio lo va a hacer ajax asi:

Código HTML:

Ver originalaction="" onSubmit="enviar(); return false"

alli ya deberia de funcionarte

nelson12345 · #12 (**permalink**) 24/11/2015, 20:22

Gracias por tu ayuda, ya le cogí el hilo