Foros del Web » Programando para Internet » Javascript » Frameworks JS »

¿es posible?

Estas en el tema de ¿es posible? en el foro de Frameworks JS en Foros del Web. hola a todos, soy nuevo en cuanto a ajax se trata y se me ha presentado la siguiente duda: es posible mostrar en una misma ...
  #1 (permalink)  
Antiguo 03/03/2009, 14:57
 
Fecha de Ingreso: febrero-2009
Mensajes: 27
Antigüedad: 15 años, 10 meses
Puntos: 0
¿es posible?

hola a todos, soy nuevo en cuanto a ajax se trata y se me ha presentado la siguiente duda: es posible mostrar en una misma pagina (con el uso de ajax) dos formularios?

lo que se quiere es que desde el menu de la pagina index.php se haga el llamado de calcular.php (con ajax sin recargar la pagina en un <div1>), al estar ubicado en el calcular.php hago un calculo de un presupuesto y al darle click en el boton calcular me calcula el presupuesto y me muestra el resultado en el formulario mostrar.php.

el funcionamiento de los dos formularios ya esta hecho y funciona sin problema.

mi duda es si se puede hacer todo esto desde index.php usando ajax para llamar los dos formularios, ejemplo:

selecciono opcion menu --> carga el calcular.php en <div1> en index.php
hago los calculos y al darle click en calcular se muestra los resultados en mostrar.php en <div2> de index.php

todo esto para no recargar la pagina

les menciono que el calcular.php tiene conexion a bd (mysql) para el calculo del presupuesto.

no se si es algo complicado, espero por favor me ayuden con esta duda y gracias de antemano
  #2 (permalink)  
Antiguo 03/03/2009, 16:44
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años, 6 meses
Puntos: 2135
Respuesta: ¿es posible?

Claro es posible, revisa esto:

http://www.forosdelweb.com/f77/howto...e-ajax-510438/

Solamente ejecuta el Javascript de tu segundo formulario y no vas a tener problemas.

Saludos
  #3 (permalink)  
Antiguo 05/03/2009, 06:15
 
Fecha de Ingreso: febrero-2009
Mensajes: 27
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: ¿es posible?

hola GatorV y buenos dias, muchas gracias por la respuesta, voy a realizar las pruebas con la informacion que me diste y cuando lo tenga completamente funcional publico el codigo para el que lo quiera usar.

muchas gracias y saludos
  #4 (permalink)  
Antiguo 09/03/2009, 15:55
 
Fecha de Ingreso: febrero-2009
Mensajes: 27
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: ¿es posible?

hola de nuevo, voy a publicar lo que he hecho hasta ahora con respecto a procesar dos formularios en una misma pagia con ajax y php. al final del codigo voy a preguntar una duda con la que no doy solucion. espero por favor me ayuden y gracias de antemano.

codigo:

index.php:

<head>
<script type="text/javascript" src="ajax.js"></script>
<title>Untitled Document</title>
</head>

<body>
<ul>
<li><a title="opcion1" href="javascript:Enviar('primeraopcion.php', 'contenido')">opcion1</a></li>
<li><a title="opcion2" href="javascript:Enviar('segundaopcion.php', 'contenido')">opcion2</a></li>
<li><a title="opcion3" href="javascript:Enviar('calcular.php', 'contenido')">Calcular</a></li>
</ul>
<div id="contenido"></div>
</body>
</html>

Calcular.php:

<script type="text/javascript" src="ajax.js"></script>
<form name="form1" id="form1" method="post" enctype="multipart/form-data">
<table width="421" height="333" border="0" align="center">
<tr>
<td height="25" colspan="2">Introduzca el Tipo de producto:
<label>
<input type="text" name="tipo_producto" id="tipo_producto" value="<?php print $tipo_producto ?>">
</label></td>
</tr>
<tr>
<td height="25" colspan="2">Introduzca la Cantidad:
<label>
<input type="text" name="cantidad" id="cantidad" value="<?php print $cantidad ?>">
</label></td>
</tr>
<tr>
<td colspan="2">Seleccione el Color:
<label>
<select name="color" id="color">
<option selected value="0"></option>
<option value="1">Un color</option>
<option value="2">Dos colores</option>
<option value="3">Tres colores</option>
<option value="4">Full color</option>
</select>
<a title="Calcular" href="javascript:Cargarcontenido('mostrar.php', 'c=3', 'form1', 'contenido2')">Calcular</a>
</label></td>
</tr>
</table>
</form>
<br />
<div id="contenido2"></div>

Mostrar.php:

<?php
include '../shared/class_folder/calcular_presupuesto.php';
?>
<form name="form2" id="form2" method="post" enctype="multipart/form-data">
<table width="390" height="154" border="0" align="center">
<tr>
<td height="27">Sutotal:
<label>
<input type="text" name="subtotal" value="<?php printf("%.2f",$subtotal); ?>">
</label></td>
</tr>
<tr>
<td height="30">total:
<label>
<input type="text" name="total" value="<?php printf("%.2f",$total); ?>">
</label></td>
</tr>
</table>
</form>

calcular_presupuesto.php:

<?php
if($_REQUEST["c"]==3){

..realizo los calculos..

}
?>

ajax.js:

function ajaxFunction() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
return xmlHttp;
} catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
return xmlHttp;
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
} catch (e) {
alert("Tu navegador no soporta AJAX!");
return false;
}}}
}

function Enviar(_pagina,capa) {
var ajax;
ajax = ajaxFunction();

ajax.open("POST", _pagina, true);

ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.onreadystatechange = function()
{

if (ajax.readyState == 4)
{
if (ajax.status==200)
{
document.getElementById(capa).innerHTML = ajax.responseText;

}}}
ajax.send(null);
}

function Cargarcontenido(_pagina,seccion,formid,capa) {
var ajax;
var Formulario = document.getElementById(formid);
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="&";
}
ajax = ajaxFunction();

ajax.open("POST", _pagina, true);

ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.onreadystatechange = function()
{

if (ajax.readyState==1)
{
document.getElementById(capa).innerHTML = "";
}
if (ajax.readyState == 4)
{
if (ajax.status==200)
{
document.getElementById(capa).innerHTML = ajax.responseText;

}}}
ajax.send(cadenaFormulario+"&"+seccion);
}

todo esto funciona a la perfeccion, al hacer click en la opcion calcular del index.php me carga el calcular.php en <div contenido> introduzco mis datos y al darle click a la opcion calcular me carga en <div contenido2> el mostrar.php con los calculos correctos, todo esto sin recargar la pagina index.php (gracias a ajax).

mi problema surge cuando en el calcular.php deseo utilizar un checkbox para seleccionar el tipo de producto en lugar de escribirlo.
aparentemente la funtion Cargarcontenido() presente en ajax.js que es la que se encarga de obtener los datos del formulario (especificamente en el for) toma todos los checkbox como seleccionado (checked) asi no lo esten, y eso altera el resultado de mis calculos.

agradeceria cualquier ayuda por favor porq he indagado mucho y no encuentro informacion que me sirva.
gracias de antemano
  #5 (permalink)  
Antiguo 09/03/2009, 17:50
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años, 6 meses
Puntos: 2135
Respuesta: ¿es posible?

Hola usuario_13,

Lo que tienes que hacer es ver el tipo de campo y si es un checkbox checar la propiedad "checked" del control. Esta te regresa true / false, con eso puedes verificar e insertar la correcta.

Saludos
  #6 (permalink)  
Antiguo 10/03/2009, 07:30
 
Fecha de Ingreso: febrero-2009
Mensajes: 27
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: ¿es posible?

hola gatorv gracias por la respuesta, pero me quedo una duda... cuando dices que verifique que tipo de campo es y si es un checkbox confirmar la propiedad checked te refieres dentro del for del function cargarcontenido? o debo hacer otra function aparte solo para eso?

muchas gracias de antemano por la ayuda
  #7 (permalink)  
Antiguo 10/03/2009, 07:47
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años, 6 meses
Puntos: 2135
Respuesta: ¿es posible?

Pues ese for lo debes de modificar, algo así:
Código javascript:
Ver original
  1. for (var i=0; i <= Formulario.elements.length-1;i++) {
  2. if(Formulario.elements[i].type == 'checkbox') {
  3.        if( Formulario.elements[i].checked ) {
  4.                 cadenaFormulario += sepCampos+Formulario.elements[i].name+'='+encodeURI(Formulario.elements[i].value);
  5. sepCampos="&";
  6.        }
  7. } else {
  8.        cadenaFormulario += sepCampos+Formulario.elements[i].name+'='+encodeURI(Formulario.elements[i].value);
  9. sepCampos="&";
  10. }
  11. }

Saludos
  #8 (permalink)  
Antiguo 11/03/2009, 07:26
 
Fecha de Ingreso: febrero-2009
Mensajes: 27
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: ¿es posible?

hola y buenos dias, muchas gracias gatorv por tus respuestas, funciono a la perfeccion la modificacion del for tal como lo dijiste.

voy a publicar el codigo para el que tenga un inconveninete igual o parecido lo use.

muchas gracias de nuevo por la ayuda.

index.php:

<head>
<script type="text/javascript" src="ajax.js"></script>
<title>Untitled Document</title>
</head>

<body>
<ul>
<li><a title="opcion1" href="javascript:Enviar('primeraopcion.php', 'contenido')">opcion1</a></li>
<li><a title="opcion2" href="javascript:Enviar('segundaopcion.php', 'contenido')">opcion2</a></li>
<li><a title="opcion3" href="javascript:Enviar('calcular.php', 'contenido')">Calcular</a></li>
</ul>
<div id="contenido"></div>
</body>

Calcular.php:

<script type="text/javascript" src="ajax.js"></script>
<form name="form1" id="form1" method="post" enctype="multipart/form-data">
<table width="421" height="333" border="0" align="center">
<tr>
<td width="200" height="248"><label>
<input type="checkbox" name="bolsa" id="bolsa" value="1">Bolsa<p>
<input type="checkbox" name="carpeta" id="carpeta" value="1">Carpeta<p>
<input type="checkbox" name="afiche" id="afiche" value="1">afiche<p>
<input type="checkbox" name="pendom" id="pendom" value="1">pendom<p>
<input type="checkbox" name="llavero" id="llavero" value="1">llavero<p>
</label></td>
</tr>
<tr>
<td height="25" colspan="2">Introduzca la Cantidad:
<label>
<input type="text" name="cantidad" id="cantidad" value="<?php print $cantidad ?>">
</label></td>
</tr>
<tr>
<td colspan="2">Seleccione el Color:
<label>
<select name="color" id="color">
<option selected value="0"></option>
<option value="1">Un color</option>
<option value="2">Dos colores</option>
<option value="3">Tres colores</option>
<option value="4">Full color</option>
</select>
<a title="Calcular" href="javascript:Cargarcontenido('mostrar.php', 'c=3', 'form1', 'contenido2')">Calcular</a>
</label></td>
</tr>
</table>
</form>
<br />
<div id="contenido2"></div>

Mostrar.php:

<?php
include '../shared/class_folder/calcular_presupuesto.php';
?>
<form name="form2" id="form2" method="post" enctype="multipart/form-data">
<table width="390" height="154" border="0" align="center">
<tr>
<td height="27">Sutotal:
<label>
<input type="text" name="subtotal" value="<?php printf("%.2f",$subtotal); ?>">
</label></td>
</tr>
<tr>
<td height="30">total:
<label>
<input type="text" name="total" value="<?php printf("%.2f",$total); ?>">
</label></td>
</tr>
</table>
</form>

calcular_presupuesto.php:

<?php
if($_REQUEST["c"]==3){

..realizo los calculos..

}
?>

ajax.js:

function ajaxFunction() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
return xmlHttp;
} catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
return xmlHttp;
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
} catch (e) {
alert("Tu navegador no soporta AJAX!");
return false;
}}}
}

function Enviar(_pagina,capa) {
var ajax;
ajax = ajaxFunction();

ajax.open("POST", _pagina, true);

ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.onreadystatechange = function()
{

if (ajax.readyState == 4)
{
if (ajax.status==200)
{
document.getElementById(capa).innerHTML = ajax.responseText;

}}}
ajax.send(null);
}

function Cargarcontenido(_pagina,seccion,formid,capa) {
var ajax;
var Formulario = document.getElementById(formid);
var longitudFormulario = Formulario.elements.length;
var cadenaFormulario = "";
var sepCampos;
sepCampos = "";
for (var i=0; i <= Formulario.elements.length-1;i++) {
if(Formulario.elements[i].type == 'checkbox') {
if( Formulario.elements[i].checked ) {
cadenaFormulario += sepCampos+Formulario.elements[i].name+'='+encodeURI(Formulario.elements[i].value);
sepCampos="&";
}
} else {
cadenaFormulario += sepCampos+Formulario.elements[i].name+'='+encodeURI(Formulario.elements[i].value);
sepCampos="&";
}
}
ajax = ajaxFunction();

ajax.open("POST", _pagina, true);

ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.onreadystatechange = function()
{

if (ajax.readyState==1)
{
document.getElementById(capa).innerHTML = "";
}
if (ajax.readyState == 4)
{
if (ajax.status==200)
{
document.getElementById(capa).innerHTML = ajax.responseText;

}}}
ajax.send(cadenaFormulario+"&"+seccion);
}
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 18:13.