hola a todos, 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 que le he dado la vuelta y nada. espero por favor me ayuden y gracias de antemano.
codigo:
index.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="ajax.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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 la Tipo:
<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:
// JavaScript Document
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, 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 los 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
