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