Ajax Analfabeto intenta calculadora

[sentnel]

Hola!

Tengo una calculadora en php que calcula (valga la redundancia) la tarifa a cobrar por el transporte de articulos dependiendo del peso de los mismos. Lo tenia funcionando en una pagina aparte de php, pero se me ocurrio crear una especie de "barra de herramientas" (toolbar) y cargar en un iframe distintas tiendas, como Amazon.com, etc., en donde al ver un articulo que desees comprar puedas en la barra superior ingresar el peso y el valor y saber cuanto te costaria el flete.

El problema es que cada vez que doy "submit" o calcular me carga la pagina completa.

Se que se hace con ajax pero soy un total analfabeto en esto y aunque le he dedicado las ultimas 36 horas al menos, aun no entiendo mucho.

Puede alguien decirme como podria transformar este codigo a que me retorne el resultado sin cargar la pagina completa?

Gracias mil!

Código:

<form action="toolbar.php" method="post" enctype="multipart/form-data" name="prueba">

<div id="pesoContainer">
<input name="peso" type="text"  value="Peso"> 


<select name="pesoUnidad" >
    <option value="1">Onzas</option>
    <option value="2" selected="selected">Libras</option>
    <option value="3">Kilos</option>
   </select>
   
   </div>

<div id="medidaContainer">
<input name="largo" type="text" value="Largo">

<input name="ancho" type="text" value="Ancho">

<input name="alto" type="text" value="Alto">

<select name="medidaUnidad">
    <option value="1" selected="selected">Pulgadas</option>
    <option value="2">Pies</option>
   </select>
<input name="ver" type="submit" class="button" onclick="toolbar.php" value="Calcular Tarifa" />
</div>



</form>

[maycolalvarez]

es tan fácil como buscar en google un tutorial básico de AJAX y adaptarlo a tus necesidades, lo único extra para facilitarlo aún más seria una función que serialice rápidamente los datos del formulario, pero realmente no es necesario si se cuentan con tan pocos input's.

incluso con frameworks como jQuery es sumamente sencillo utilizar AJAX, además de disponer de una función serialize que te lo hace todo!

[saumal20]

Iniciado por sentnel

Hola!

Tengo una calculadora en php que calcula (valga la redundancia) la tarifa a cobrar por el transporte de articulos dependiendo del peso de los mismos. Lo tenia funcionando en una pagina aparte de php, pero se me ocurrio crear una especie de "barra de herramientas" (toolbar) y cargar en un iframe distintas tiendas, como Amazon.com, etc., en donde al ver un articulo que desees comprar puedas en la barra superior ingresar el peso y el valor y saber cuanto te costaria el flete.

El problema es que cada vez que doy "submit" o calcular me carga la pagina completa.

Se que se hace con ajax pero soy un total analfabeto en esto y aunque le he dedicado las ultimas 36 horas al menos, aun no entiendo mucho.

Puede alguien decirme como podria transformar este codigo a que me retorne el resultado sin cargar la pagina completa?

Gracias mil!

Código:

<form action="toolbar.php" method="post" enctype="multipart/form-data" name="prueba">

<div id="pesoContainer">
<input name="peso" type="text"  value="Peso"> 


<select name="pesoUnidad" >
    <option value="1">Onzas</option>
    <option value="2" selected="selected">Libras</option>
    <option value="3">Kilos</option>
   </select>
   
   </div>

<div id="medidaContainer">
<input name="largo" type="text" value="Largo">

<input name="ancho" type="text" value="Ancho">

<input name="alto" type="text" value="Alto">

<select name="medidaUnidad">
    <option value="1" selected="selected">Pulgadas</option>
    <option value="2">Pies</option>
   </select>
<input name="ver" type="submit" class="button" onclick="toolbar.php" value="Calcular Tarifa" />
</div>



</form>

pues en eso codigo no veo nada de javascript , bueno algo basico de ajax, en algunos casos se basa en el uso de los div, fijate en las funciones ke div se llama, x ejm "medidaContainer", tambien se usan los document.elementbyId ya sea un campo text, hidden, lo ke sea, y eso lo combinan con funciones, ajax no es dificil, io pensaba ke asi lo era, pero no, lei en internet y lo manye en un solo dia laboral , lee en internetr hay un monto de cosas, buscate ejemplo faciles, x ejm pestaña en ajax, llamada de un html en ajax, insertar datos con ajax, leer datos con ajax, etc, cristalab tiene unos buenos tutoriales basico ke van al punto.regresando a tu caso, pon el codigo javascript ke carga la llamada asincronica(funcion). saludos

[cesarpunk]

Una pregunta: el serialize ya envía los datos hidden y recorre los input radio y option?

[maycolalvarez]

Iniciado por cesarpunk

Una pregunta: el serialize ya envía los datos hidden y recorre los input radio y option?

no envía, simplemente te devuelve todos los datos de formulario que se necesiten enviar, básicamente el mismo proceso que realiza el navegador cuando pretende enviar un form, pero como en el caso de utilizar AJAX no se usa ese mecanismo jQuery lo complemente con la función serialize.

ten en cuenta que jQuery.serialize() comprende todos los input del formulario, incluso los ocultos tal como lo haría un navegador normal, exceptuando lógicamente aquellos que estén deshabilitados (disabled="disabled") tal cual un navegador normal, así que es un equivalente a serializar los datos de form, pero sin enviarlo, para enviarlo via AJAX se necesitan de las funciones proporcionas por jQuery al respecto como jQuery.ajax()