Volver al Foro de Diseño de páginas Web

Necesito ayuda: mostrar un mensaje emergente después de formulario HTML

  • Scott123
  • Newbie
  • Newbie
  • No Avatar
  • Registrado: Nov 25, 2008
  • Mensajes: 10
  • Status: Offline

Nota Diciembre 30th, 2008, 1:29 am

Hola
Tengo un formulario html que utilizan php para enviar un formulario de entrada a la tabla de MySQL. El problema es después de la entrada de datos se "inserta" en la tabla. El va a la página html en blanco. Si el usuario haga clic en el botón Atrás, que se remonta a la página de formulario html con todas las entradas siguen mostrando.
Mi objetivo es:
si la petición tiene éxito, debería ocurrir dos cosas: 1. el formulario de la página HTML original se debe mostrar (de refresco, o de no no importa ya que la forma es simple y corto), con todos los datos de campo en blanco. 2. popup una "exitosa presentación" mensaje.

Hice googled de respuesta, pero tiene algo acerca de AJAX. No tengo conocimiento de Ajax, y buscar los códigos de la muestra complicar.
Agradecería cualquier sugerencia. Gracias.
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Diciembre 30th, 2008, 1:29 am

  • graphixboy
  • Control + Z
  • Mastermind
  • Avatar de Usuario
  • Registrado: Jul 11, 2005
  • Mensajes: 1828
  • Loc: In the Great White North
  • Status: Offline

Nota Diciembre 30th, 2008, 11:42 am

Ajax es la respuesta más o menos existe ya que puede presentar el formulario de la página sin reposting...

Heres un ejemplo bastante simple
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • michaelc
  • Born
  • Born
  • No Avatar
  • Registrado: Dic 24, 2006
  • Mensajes: 4
  • Status: Offline

Nota Diciembre 30th, 2008, 2:15 pm

Ajax que usted puede hacer, yo uso EXTjs y rocas.
otra respuesta es muy sencilla de incluir el formulario HTML en su PHP puede insertar el código JavaScript de la Mosca.
  • Scott123
  • Newbie
  • Newbie
  • No Avatar
  • Registrado: Nov 25, 2008
  • Mensajes: 10
  • Status: Offline

Nota Enero 4th, 2009, 4:24 am

He pasado muchas horas experimentando con este ejemplo de código Ajax ( http://nettuts.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/ )

el problema es que tienen un menú desplegable, seleccione la casilla en mi formulario html. Sin embargo, el Ajax de ejemplo sólo tiene casillas de entrada de texto. No sé cómo incorporar una caja de selección en su código.
Nadie puede ayudar por favor?

Gracias.
  • graphixboy
  • Control + Z
  • Mastermind
  • Avatar de Usuario
  • Registrado: Jul 11, 2005
  • Mensajes: 1828
  • Loc: In the Great White North
  • Status: Offline

Nota Enero 4th, 2009, 10:42 am

¿Puede publicar su código? Básicamente su seleccione una ID de necesidades y se obtiene el valor de una manera similar a los campos de entrada.

jQuery API documentos para val ()
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • Scott123
  • Newbie
  • Newbie
  • No Avatar
  • Registrado: Nov 25, 2008
  • Mensajes: 10
  • Status: Offline

Nota Enero 4th, 2009, 12:03 pm

Este es mi formulario html:

Código: [ Select ]
<html><head></head><body>
<title> Feedback Form </title>
<script src="js/jquery-1.2.3.pack.js"></script>
<script src="js/runonload.js"></script>
<script src="js/testform.js"></script>
 
<form id="contact_form" name="contact" action="" method="POST">
<fieldset>
      <label for="category" id="category_label" style='float: left; width: 18%'>Category: </label>
      <select name="category" id="category" class="text_input">
      <option value="complaint">Complaint</option>
      <option value="followup">Follow-up</option>
      <option value="question">Question</option>
      </select>
      </br>
      <label class="error" for="category" id="category_error"><font size="1"; color="red">This field is required.</font></label>
      </br>  
 
      <label for="description" id="description_label" style='float: left; width: 18%'>Description: </label>
      <input type="text" name="description" id="description" size="76" value="" class="text-input" />
      </br>
      <label class="error" for="description" id="description_error"><font size="1"; color="red">This field is required.</font></label>
      </br>        
     
      <label for="email" id="email_label" style='float: left; width: 26%'>://</label>
      <input style="width: 425px" type="text" name="email" id="email" value="" class="text-input" />
      </br>
      <label class="error" for="link" id="email_error"><font size="1"; color="red">This field is required.</font></label>
      </br>
 
      <input type="submit" value="Submit" class="button" id="submit_btn" value="Submit" style='margin-left: 18%; margin-top: 20px'>
 
</fieldset>
</form>
 
</body></html>
  1. <html><head></head><body>
  2. <title> Feedback Form </title>
  3. <script src="js/jquery-1.2.3.pack.js"></script>
  4. <script src="js/runonload.js"></script>
  5. <script src="js/testform.js"></script>
  6.  
  7. <form id="contact_form" name="contact" action="" method="POST">
  8. <fieldset>
  9.       <label for="category" id="category_label" style='float: left; width: 18%'>Category: </label>
  10.       <select name="category" id="category" class="text_input">
  11.       <option value="complaint">Complaint</option>
  12.       <option value="followup">Follow-up</option>
  13.       <option value="question">Question</option>
  14.       </select>
  15.       </br>
  16.       <label class="error" for="category" id="category_error"><font size="1"; color="red">This field is required.</font></label>
  17.       </br>  
  18.  
  19.       <label for="description" id="description_label" style='float: left; width: 18%'>Description: </label>
  20.       <input type="text" name="description" id="description" size="76" value="" class="text-input" />
  21.       </br>
  22.       <label class="error" for="description" id="description_error"><font size="1"; color="red">This field is required.</font></label>
  23.       </br>        
  24.      
  25.       <label for="email" id="email_label" style='float: left; width: 26%'>://</label>
  26.       <input style="width: 425px" type="text" name="email" id="email" value="" class="text-input" />
  27.       </br>
  28.       <label class="error" for="link" id="email_error"><font size="1"; color="red">This field is required.</font></label>
  29.       </br>
  30.  
  31.       <input type="submit" value="Submit" class="button" id="submit_btn" value="Submit" style='margin-left: 18%; margin-top: 20px'>
  32.  
  33. </fieldset>
  34. </form>
  35.  
  36. </body></html>


esta es mi testform.js código (modificado de tutorial.js)

Código: [ Select ]
$(function() {
  $('.error').hide();
  $('input.text-input').css({backgroundColor:"#FFFFFF"});
  $('input.text-input').focus(function(){
    $(this).css({backgroundColor:"#FFDDAA"});
  });
  $('input.text-input').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });
 
  $(".button").click(function() {
        // validate and process form
        // first hide any error messages
    $('.error').hide();
       
      var category = $("input#category").val();
        if (category == "") {
      $("label#category_error").show();
      $("input#category").focus();
      return false;
      }
 
      var description = $("input#description").val();
        if (description == "") {
      $("label#description_error").show();
      $("input#description").focus();
      return false;
      }
 
    var email = $("input#email").val();
        if (email == "") {
      $("label#email_error").show();
      $("input#email").focus();
      return false;
      }
       
    var dataString = 'category='+ category + '&description=' + description + '&email=' + email;
       
        $.ajax({
      type: "POST",
      url: "process.php",
      data: dataString,
      success: function() {
        $('#contact_form').html("<div id='message'></div>");
        $('#message').html("<h2>Your feedback is submitted!</h2>")
        .append("<p>Thank you.</p>")
        .hide()
        .fadeIn(1500, function() {
          $('#message').append("<img id='checkmark' src='images/check.png' />");
        });
      }
     });
    return false;
    });
});
runOnLoad(function(){
  $("input#category").select().focus();
});
  1. $(function() {
  2.   $('.error').hide();
  3.   $('input.text-input').css({backgroundColor:"#FFFFFF"});
  4.   $('input.text-input').focus(function(){
  5.     $(this).css({backgroundColor:"#FFDDAA"});
  6.   });
  7.   $('input.text-input').blur(function(){
  8.     $(this).css({backgroundColor:"#FFFFFF"});
  9.   });
  10.  
  11.   $(".button").click(function() {
  12.         // validate and process form
  13.         // first hide any error messages
  14.     $('.error').hide();
  15.        
  16.       var category = $("input#category").val();
  17.         if (category == "") {
  18.       $("label#category_error").show();
  19.       $("input#category").focus();
  20.       return false;
  21.       }
  22.  
  23.       var description = $("input#description").val();
  24.         if (description == "") {
  25.       $("label#description_error").show();
  26.       $("input#description").focus();
  27.       return false;
  28.       }
  29.  
  30.     var email = $("input#email").val();
  31.         if (email == "") {
  32.       $("label#email_error").show();
  33.       $("input#email").focus();
  34.       return false;
  35.       }
  36.        
  37.     var dataString = 'category='+ category + '&description=' + description + '&email=' + email;
  38.        
  39.         $.ajax({
  40.       type: "POST",
  41.       url: "process.php",
  42.       data: dataString,
  43.       success: function() {
  44.         $('#contact_form').html("<div id='message'></div>");
  45.         $('#message').html("<h2>Your feedback is submitted!</h2>")
  46.         .append("<p>Thank you.</p>")
  47.         .hide()
  48.         .fadeIn(1500, function() {
  49.           $('#message').append("<img id='checkmark' src='images/check.png' />");
  50.         });
  51.       }
  52.      });
  53.     return false;
  54.     });
  55. });
  56. runOnLoad(function(){
  57.   $("input#category").select().focus();
  58. });


-------------------------------------------------- --------

sin cambios en la jquery-1.2.3.pack.js y runonload.js

El problema es la caja de selección "categoría". No parece ser capaz de grabar cualquier tipo de valor. Siempre es "indefinido". Los otros dos campos de introducción de texto de trabajo.

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 6 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 90 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC