Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Codigo JavaScript que funciona en Hmtl y no en PHP - Primera Parte....

Estas en el tema de Codigo JavaScript que funciona en Hmtl y no en PHP - Primera Parte.... en el foro de Javascript en Foros del Web. Hola a todos: Me llamo Javy y tengo un problema con el que llevo varios días... (ya casi no tengo ni pelo...) El problema es ...
  #1 (permalink)  
Antiguo 21/07/2014, 16:50
 
Fecha de Ingreso: septiembre-2002
Mensajes: 153
Antigüedad: 21 años, 7 meses
Puntos: 1
Codigo JavaScript que funciona en Hmtl y no en PHP - Primera Parte....

Hola a todos:

Me llamo Javy y tengo un problema con el que llevo varios días... (ya casi no tengo ni pelo...)

El problema es el siguiente:

- Necesito hacer un formulario con dos "Textarea", un "Select" y un "Input" para subir imagenes.

La idea es que si alguno de los campos no se van rellenando, vaya avisando y no mande el formulario...

Resulta que el código que he creado "insertando" partes que he encontrado por este foro e Internet, funciona en una página en HTML.

Si este mismo código lo inserto en una página PHP... pues básicamente se lo pasa por donde amargan los pepinos... (espero no ofender a nadie, pero a estas horas ya estoy acabado...)

Necesito si me pueden revisar el código y decirme donde he petido la pata y hasta donde...

PÁGINA HTML

Código:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
        
        <script src="js/jquery.min.js"></script><!-- jquery.min.js PARA QUE SE VEA EL BOTON -->
        
        <!-- CKEDITOR -->

		<script src="ckeditor/ckeditor.js"></script>
        <script src="ckeditor.js"></script>
        <script type="text/javascript">
            CKEDITOR.config.width = "100%";
        </script>
                
        <!--  -->
        
        <!-- MOSTRAR OBJETO OCULTO -->

		<script type="text/javascript">
        function cargando(){
        document.getElementById('carga').style.visibility="visible";
        }
        </script>
                
        <!--  -->
</head>

<body>


                
                <script type="text/javascript">
					function validar(formulario){
						
						var fotomontajesimgtitulo = getvalue();
						
						if(fotomontajesimgtitulo == ""){//SI NO SE ESCRIBE TITULO
							document.getElementById('errortitulo').style.visibility="visible";
							return false;
						}
						
						var fotomontajesimgtexto = getvalue2();
						
						if(fotomontajesimgtexto == ""){//SI NO SE ESCRIBE TEXTO
							document.getElementById('errortexto').style.visibility="visible";
							document.getElementById('errortitulo').style.visibility="hidden";
							return false;
						}
						
						if( document.forms[0].fotomontajesseriesid.selectedIndex == 0 ) {// SI NO SE SELECCIONA UNA SERIE
						alert('MIERDAS');
							document.getElementById('errorserie').style.visibility="visible";
							document.getElementById('errortitulo').style.visibility="hidden";
							document.getElementById('errortexto').style.visibility="hidden";
							return false;
						}
						
						var imagen = document.forms[0]['imagen'].value;
						
						if(!imagen){//SI NO SE HA SELECCIONADO NINGUN ARCHIVO
							document.getElementById('errorimg').style.visibility="visible";
							document.getElementById('errortitulo').style.visibility="hidden";
							document.getElementById('errortexto').style.visibility="hidden";
							document.getElementById('errorserie').style.visibility="hidden";
							return false;
						}
						
					//TIPOS DE ARCHIVOS PERMITIDOS
					extensiones = new Array(".png", ".gif", ".jpeg", "pjpeg", ".jpg", ".tif");
					//RECUPERA LA EXTENSION DEL ARCHIVO
					extension = (imagen.substring(imagen.lastIndexOf("."))).toLowerCase();
					//COMPRUEBA SI LA EXTENSION ESTA PERMITIDA
					permitida = false;
						for (var i = 0; i < extensiones.length; i++) {
							if (extensiones[i] == extension) {
								permitida = true;
								break;
							}
						}
						
						if (!permitida) {// SI LA EXTENSION NO ESTA PERMITIDA
							document.getElementById('errorextension').style.visibility="visible";
							document.getElementById('errortitulo').style.visibility="hidden";
							document.getElementById('errortexto').style.visibility="hidden";
							document.getElementById('errorserie').style.visibility="hidden";
							document.getElementById('errorimg').style.visibility="hidden";
							return false;
						}
						
						else{
							formulario.submit();
						alert('MIERDAS MANDADAS');
							document.getElementById('errortitulo').style.visibility="hidden";
							document.getElementById('errortexto').style.visibility="hidden";
							document.getElementById('errorserie').style.visibility="hidden";
							document.getElementById('errorimg').style.visibility="hidden";
							document.getElementById('errorextension').style.visibility="hidden";
							document.getElementById('carga').style.visibility="visible";
							return true;
						}
					}
				</script>

				<form enctype="multipart/form-data" method="post" action="">

						<textarea name="fotomontajesimgtitulo" cols="100" rows="10" id="fotomontajesimgtitulo"></textarea>
                        <script type="text/javascript">
                            CKEDITOR.replace('fotomontajesimgtitulo');
								
								getvalue = function()
								{
								var editor = CKEDITOR.instances.fotomontajesimgtitulo;
								var value = editor.getData();
								return value;
								}
						</script>
                        <p> </p>
                        <!--COMIENZO & FINAL DIV TEXTO-ARTICLE3 -->
						<div name="error" id="errortitulo" class="texto-article3" style="background:#B91F22; visibility:hidden;">
                        <p style="color:#FFF; font-weight:bold;">¡Escriba Titulo!</p></div>

						<textarea name="fotomontajesimgtexto" cols="100" rows="10" id="fotomontajesimgtexto"></textarea>
                        <script type="text/javascript">
                            CKEDITOR.replace('fotomontajesimgtexto');
								
								getvalue2 = function()
								{
								var editor = CKEDITOR.instances.fotomontajesimgtexto;
								var value = editor.getData();
								return value;
								}
						</script>
                        <p> </p>
                        <!--COMIENZO & FINAL DIV TEXTO-ARTICLE3 -->
						<div name="error" id="errortexto" class="texto-article3" style="background:#B91F22; visibility:hidden;">
                        <p style="color:#FFF; font-weight:bold;">¡Escriba Texto!</p></div>
                        
                        
                        <select name="fotomontajesseriesid">
                        <option value="Elegir">Elegir
                        <option value="Comercial">Contacto comercial
                        <option value="Clientes">Atención al cliente
                        <option value="Proveedores">Contacto de proveedores
                        </select>
                        
                        <p> </p>
                        <!--COMIENZO & FINAL DIV TEXTO-ARTICLE3 -->
						<div name="error" id="errorserie" class="texto-article3" style="background:#B91F22; visibility:hidden;">
                        <p style="color:#FFF; font-weight:bold;">¡Seleccione una Serie!</p></div>
                        
                        <!--COMIENZO DIV TEXTO-ARTICLE2 -->
                    <div class="texto-article2">
                        <p style="text-align:center;">Nueva Imagen:</p><p> </p>
                        <input name="imagen" type="file" size="70" class="article2-input" /><p> </p>
                        <!--COMIENZO & FINAL DIV TEXTO-ARTICLE3 -->
						<div name="error" id="errorimg" class="texto-article3" style="background:#B91F22; visibility:hidden;">
                        <p style="color:#FFF; font-weight:bold;">¡Seleccione una Imagen!</p></div>
                        <!--COMIENZO & FINAL DIV TEXTO-ARTICLE3 -->
						<div name="errorextension" id="errorextension" class="texto-article3" style="background:#B91F22; visibility:hidden;">
                        <p style="color:#FFF; font-weight:bold;">¡Extensión de Imagen no Permitida!</p></div>
                    </div>
                        
                        <input type="button" value="ENVIAR" class="boton-submit2" onclick="validar(this.form)" />


</form>
</body>
</html>
Falta la página en PHP... va en el siguiente mensaje
  #2 (permalink)  
Antiguo 21/07/2014, 17:10
 
Fecha de Ingreso: septiembre-2002
Mensajes: 153
Antigüedad: 21 años, 7 meses
Puntos: 1
Respuesta: Codigo JavaScript que funciona en Hmtl y no en PHP - Segunda Parte....

PÁGINA PHP

Código:
<body>           
          	<article class="article2">
            	<?php
					require_once("incluye/config.php");			
					$cnx = conectar ();                                        if(isset($_POST['fotomontajesimgtitulo'])){								
					$nuevoNombre = $_FILES['imagen']['name'];		
					move_uploaded_file($_FILES['imagen']['tmp_name'], "../archivos/img/trabajos/fotomontajesimg/$nuevoNombre");
					$ruta="../archivos/img/trabajos/fotomontajesimg/".$nuevoNombre;
					chmod($ruta,0777);
					$data = GetImageSize("../archivos/img/trabajos/fotomontajesimg/$nuevoNombre");
					$sql = "INSERT INTO fotomontajesimg SET ";
					$sql .= "fotomontajesseriesid ='".$_POST['fotomontajesseriesid']."',";
					$sql .= "fotomontajesimgtitulo ='".$_POST['fotomontajesimgtitulo']."',";
					$sql .= "fotomontajesimgtexto ='".$_POST['fotomontajesimgtexto']."',";
					$sql .= "fotomontajesimgfoto = '../archivos/img/trabajos/fotomontajesimg/$nuevoNombre'";
					$res = mysql_query($sql) or die(mysql_error());
					echo "<div class='texto-article3'><p>NUEVA IMAGEN AÑADIDA.</p></div>\n";							
					$cnx = conectar();
					$sql = "SELECT MAX(fotomontajesimgid) FROM fotomontajesimg";
					$res = mysql_query($sql) or die (mysql_error());
					if( mysql_num_rows($res) >0){
					list($fotomontajesimgid) = mysql_fetch_array($res); }
					echo "<p><a class='boton-article2' href='fotomontajesimg_redfoto.php?fotomontajesimgid=$fotomontajesimgid' target='_self' onclick='cargando()'>ACEPTAR</a></p>
							<p>*</p><p><img src='img/cargando.gif' id='carga' name='carga' style='visibility:hidden;' width='70' height='70' /></p>
							<div class='clear'></div>\n";	
					echo "</article>\n";				
					echo "</div>\n";					
					echo "</div>\n";					
							</html>\n";			
					mysql_close($idcnx);
					exit;	
					}						
					require_once("incluye/config.php");
					$cnx = conectar ();
					$fotomontajesseries = mysql_query("SELECT fotomontajesseriesid, fotomontajesseriestexto FROM fotomontajesseries ORDER BY fotomontajesseriestexto");
				?>                
                <script type="text/javascript">
					function validar(formulario){						
						var fotomontajesimgtitulo = getvalue();
						if(fotomontajesimgtitulo == ""){
document.getElementById('errortitulo').style.visibility="visible";
							return false;
						}
						var fotomontajesimgtexto = getvalue2();
						if(fotomontajesimgtexto == ""){
document.getElementById('errortexto').style.visibility="visible";		document.getElementById('errortitulo').style.visibility="hidden";
							return false;
						}
						if( document.forms[0].fotomontajesseriesid.selectedIndex == 0 ) {
document.getElementById('errorserie').style.visibility="visible";
document.getElementById('errortitulo').style.visibility="hidden";
document.getElementById('errortexto').style.visibility="hidden";
							return false;
						}
						var imagen = document.forms[0]['imagen'].value;
						if(!imagen){	document.getElementById('errorimg').style.visibility="visible";
document.getElementById('errortitulo').style.visibility="hidden";
document.getElementById('errortexto').style.visibility="hidden";
document.getElementById('errorserie').style.visibility="hidden";
							return false;
						}	
					extensiones = new Array(".png", ".gif", ".jpeg", "pjpeg", ".jpg", ".tif");
					extension = (imagen.substring(imagen.lastIndexOf("."))).toLowerCase();
					permitida = false;
						for (var i = 0; i < extensiones.length; i++) {
							if (extensiones[i] == extension) {
								permitida = true;
								break;
							}
						}
						if (!permitida) {	document.getElementById('errorextension').style.visibility="visible";
document.getElementById('errortitulo').style.visibility="hidden";
document.getElementById('errortexto').style.visibility="hidden";
document.getElementById('errorserie').style.visibility="hidden";
document.getElementById('errorimg').style.visibility="hidden";
							return false;
						}
						else{
							formulario.submit();		document.getElementById('errortitulo').style.visibility="hidden";		document.getElementById('errortexto').style.visibility="hidden";			document.getElementById('errorserie').style.visibility="hidden";			document.getElementById('errorimg').style.visibility="hidden";			document.getElementById('errorextension').style.visibility="hidden";			document.getElementById('carga').style.visibility="visible";
							return true;
						}
					}
				</script>
                    <form enctype="multipart/form-data" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
                    <div class="texto-article2">
                        <input name="fotomontajesimgid" type="hidden" id="fotomontajesimgid" value="<?php echo $fila['fotomontajesimgid']; ?>" />
                        <p style="text-align:center;">Nuevo Título:</p><p>*</p>
                        <p><textarea name="fotomontajesimgtitulo" cols="100" rows="30" id="fotomontajesimgtitulo"><?php echo $fila['fotomontajesimgtitulo']; ?></textarea></p>
                        <script type="text/javascript">
                            CKEDITOR.replace("fotomontajesimgtitulo", { height:50 });
						getvalue = function()
								{
								var editor = CKEDITOR.instances.fotomontajesimgtitulo;
								var value = editor.getData();
								return value;
								}			
                        </script>
<div name="error" id="errortitulo" class="texto-article3" style="background:#B91F22; visibility:hidden;">
                        <p style="color:#FFF; font-weight:bold;">¡Escriba Título!</p></div>
 </div>
<div class="texto-article2">
                        <p style="text-align:center;">Nuevo Texto:</p><p>*</p>
                        <textarea name="fotomontajesimgtexto" cols="100" rows="30" id="fotomontajesimgtexto"><?php echo $fila['fotomontajesimgtexto']; ?></textarea>
                        <script type="text/javascript">
                            CKEDITOR.replace('fotomontajesimgtexto');
								getvalue2 = function()
								{
								var editor = CKEDITOR.instances.fotomontajesimgtexto;
								var value = editor.getData();
								return value;
								}			
                        </script>                                              
						<div name="error" id="errortexto" class="texto-article3" style="background:#B91F22; visibility:hidden;">
                        <p style="color:#FFF; font-weight:bold;">¡Escriba Texto!</p></div>
</div>                            
                    <div class="texto-article3">
                        <select name="fotomontajesseriesid" id="fotomontajesseriesid" class="article2-input2">
                        <option value="">
							<?php 
                            $numero_fotomontajesseries = mysql_num_rows($fotomontajesseries); 
                            ?>Hay <?php echo "$numero_fotomontajesseries";  ?> Series</option>
                            <?php			
                                while ($fotomontajesseri = mysql_fetch_array($fotomontajesseries)) {
                                $fotomontajesseriesid = $fotomontajesseri["fotomontajesseriesid"];
                                $cname = $fotomontajesseri["fotomontajesseriestexto"];
                                echo("<option value='$fotomontajesseriesid'>$cname</option>\n");
                                }
                            ?>
                        </select>
<div name="error" id="errorserie" class="texto-article3" style="background:#B91F22; visibility:hidden;">
                        <p style="color:#FFF; font-weight:bold;">¡Seleccione una Serie!</p></div>
</div>      
<div class="texto-article2">
                        <p style="text-align:center;">Nueva Imagen:</p><p>*</p>
                        <input name="imagen" type="file" size="70" class="article2-input" />                      
<div name="error" id="errorimg" class="texto-article3" style="background:#B91F22; visibility:hidden;">
<p style="color:#FFF; font-weight:bold;">¡Seleccione una Imagen!</p></div>
<div name="errorextension" id="errorextension" class="texto-article3" style="background:#B91F22; visibility:hidden;">
<p style="color:#FFF; font-weight:bold;">¡Extensión de Imagen no Permitida!</p></div>
<div class="nav-article2">
 <ul>
<li><input type="submit" value="ENVIAR" class="boton-submit2" onclick="validar(this.form)" /></li>
                                <li><a class="boton-article2" href="fotomontajesimg.php" target="_self">CANCELAR</a></li>
                                <li style="border:none;"><img src="img/cargando.gif" id="carga" name="carga" style="visibility:hidden;" width="70" height="70" /></li>
                            </ul>
 </div>
                        <div class="clear"></div>
                    
                </div>
                </form>
            </article>
        </div>
		<div class="clear"></div> 
    </div>
</body>
</html>
* He tenido que quitar parte del código HTML y juntarlo todo para poder escribir este mensaje...

Gracias a todos y un gran saludo:

Javy
  #3 (permalink)  
Antiguo 21/07/2014, 17:28
Colaborador
 
Fecha de Ingreso: mayo-2008
Ubicación: $MX['VZ']['Xalapa']
Mensajes: 3.005
Antigüedad: 16 años
Puntos: 528
Respuesta: Codigo JavaScript que funciona en Hmtl y no en PHP - Primera Parte....

Primero, debes saber que javascript no "funciona en php" pues se ejecuta en el cliente, no en el servidor.

Dicho esto, revisa si el html generado por php es igual al html que sí te funciona, si no, algo haz hecho mal del lado de php.

Te sugiero que aclares mejor tu problema, ya que no especificas qué es lo que no funciona,(supongo que lo que no funciona es la validación, pero es sólo suposición) ¿hay algún mensaje de error?

También te recomiendo que uses algún depurador de javascript, por ejemplo firebug para firefox, que te puede decir si hay un error en tu javascript y en qué linea.
  #4 (permalink)  
Antiguo 21/07/2014, 19:17
 
Fecha de Ingreso: septiembre-2002
Mensajes: 153
Antigüedad: 21 años, 7 meses
Puntos: 1
Respuesta: Codigo JavaScript que funciona en Hmtl y no en PHP - Primera Parte....

Hola ocp001a:

Gracias por responder.

Lo primero, decirte que por desgracia no estoy muy ducho en JavaScript y no sabía que no funcionaba en php (¿?)

Lo segundo, que efectivamente, lo que no hace es la validación

Lo tercero, que ya lo solucioné siguiendo tu consejo:

revise el codigo rebotado desde el servidor y lo comparé con el código de la página HTML que sí funcionaba y ví que había un error (mío, por supuesto):

En la página HTML tenía puesto esto:

Código:
<input type="button" value="ENVIAR" class="boton-submit2" onclick="validar(this.form)" />
y en la página PHP, esto:

Código:
<input type="submit" value="ENVIAR" class="boton-submit2" onclick="validar(this.form)" />
Manda narices... dos días perdidos por un "input type..."

Ahora funciona a la perfección: no hay manera de mandar el formulario si no están todos los campos completos... aunque todavía no entiendo tu afirmación de que no funciona en php...

Por supuesto, gracias porque sin tu consejo no habría "visto" el fallo del "input"... estaba encabronado con todo el código de JavaScript y me olvide de lo más obvio: un copia-pega completo...

Gracias de nuevo y un gran saludo para todos:

Javy
  #5 (permalink)  
Antiguo 21/07/2014, 20:31
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 15 años, 8 meses
Puntos: 2237
Respuesta: Codigo JavaScript que funciona en Hmtl y no en PHP - Primera Parte....

Cita:
Iniciado por javi
...aunque todavía no entiendo tu afirmación de que no funciona en php...
Lo que haces en PHP es generar códigos (HTML, Javascript y/o CSS), pero el que se encarga de interpretarlos es el navegador, por tanto, si algo no funciona como debiera, no es culpa de PHP, sino que hay algún error en cómo armaste esos códigos.
__________________
- León, Guanajuato
- GV-Foto

Etiquetas: formulario, funcion, html, input, js, php, primera, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:43.