AJAX/JS: capturando múltiples campos de entrada sin actualizar o hacer clic en el botón y php haciendo eco del valor

Actualmente estoy usando Ajax/JS para enviar un formulario sin actualizar la página o hacer clic en un botón. He puesto un temporizador con keyup para activar la función. Lo he probado con un campo de entrada y funciona bien, pero ahora que se han agregado otros campos de entrada, PHP no muestra ningún resultado. Lo he comprobado con la herramienta de errores de Firefox y los resultados se están almacenando. No estoy seguro de si se trata de un problema de JS o PHP.

¿Cómo puedo hacer eco correctamente del valor del campo de entrada después de que el usuario haya dejado de escribir? EJEMPLO

JS/AJAX

<script>
$(document).ready(function() {
  var timer = null; 
  var dataString;   
     function submitForm(){
    $.ajax({ type: "POST",
    url: "index.php",
    data: dataString,
    success: function(result){
    $('#special').html('<p>' +  $('#resultval', result).html() + '</p>');}
                                  });
               return false;
             }
          $('#contact_form').on('keyup', function() {
    clearTimeout(timer);
    timer = setTimeout(submitForm, 2000);
    var name = $("#contact_name, #email, #phone, #address, #website").val();
    dataString = 'name='+ name;
             });
             }); 
</script>

Fragmento HTML/PHP

<form action="" method="post" enctype="multipart/form-data" id="contact_form" name="form4">
 <div class="row"> 
  <div class="label">Contact Name *</div> <!-- end .label -->
    <div class="input">
      <input type="text" id="contact_name" class="detail" name="contact_name" value="<?php echo isset($_POST['contact_name'])? $_POST['contact_name'] : ''; ?>" /> 
      <div id="special"><span id="resultval"><? echo $_POST['contact_name'];  ?></span></div>
    </div><!-- end .input-->
 </div><!-- end .row -->

 <div class="row"> 
  <div class="label">Email Address *</div> <!-- end .label -->
   <div class="input">
    <input type="text" id="email" class="detail" name="email" value="<?php echo isset($_POST['email'])? $_POST['email'] : ''; ?>" /> 
    <div id="special"><span id="resultval"><? echo $_POST['email'];  ?></span></div>
   </div><!-- end .input-->
 </div><!-- end .row -->

preguntado el 20 de julio de 12 a las 00:07

1 Respuestas

En lugar de tratar de hacer una tarea masiva, necesitarás construir tus datos. Por ejemplo, actualmente tiene:

    var name = $("#contact_name, #email, #phone, #address, #website").val();

Ese jquery debería coincidir con el primer identificador que coincida, muy probablemente el elemento con id contact_name, y ese será el único valor nombre tiene, donde espera obtener varios campos de formulario de datos.

De hecho, no debería necesitar construir dataString en absoluto, ya que sus datos se enviarán por correo a través del formulario.

Reescribiendo el JS:

$(document).ready(function() {
    var timer = null; 
    var dataString;   
    function submitForm(){
        $.ajax({ type: "POST",
            url: "index.php",
            dataType: 'json',
            success: function(result){
            $('#special').html('<p>' +  $('#resultval', result).html() + '</p>');}
                              });
        return false;
    }
    $('#contact_form').on('keyup', function() {
        clearTimeout(timer);
        timer = setTimeout(submitForm, 2000);
    });
}); 

En su index.php, puede acceder a los valores del formulario en la matriz $_POST, por ejemplo, $_POST['contact_name'].

Respondido 20 Jul 12, 00:07

+1 gracias Una pregunta: modifiqué la función JS pero ahora no estoy publicando nada. ¿Cómo se puede repetir el valor del campo de entrada después de que se hayan insertado los datos escritos? Puedes comprobar el SITIO con la modificación. - Codificación Maravillas90

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.