[SOLUCIONADO] Enviar formulario con evento onblur

[satjaen]

Hola, por favor necesito saber como puedo mandar el form6 del código que pongo con el evento onblur.

Código Javascript:

<script type="text/javascript">
$(document).ready(function() {
    
    $('#form6').submit(function(event) {
        
            if (document.form6.edAveria.value.length==''){ 
alert("¡Complete los campos!")
       document.form6.edAveria.focus() 
       return 0; 
}
    if (document.form6.TipoIntervencion.value.length==''){ 
alert("¡Complete los campos!")
       document.form6.TipoIntervencion.focus() 
       return 0; 
}
if (document.form6.CodigoFinalizacion.value.length==''){ 
alert("¡Complete los campos!")
       document.form6.CodigoFinalizacion.focus() 
       return 0; 
}
                if (document.form6.edfecha.value.length==''){ 
alert("¡Complete los campos!")
       document.form6.edfecha.focus() 
       return 0; 
}
 
    if (document.form6.edfechaFin.value.length==''){ 
alert("¡Complete los campos!")
       document.form6.edfechaFin.focus() 
       return 0; 
}
 
if (document.form6.dtFecharecepcion.value.length==''){ 
alert("¡Complete los campos!")
       document.form6.dtFecharecepcion.focus() 
       return 0; 
}
 
if (document.form6.edHoraInicio.value.length==''){ 
alert("¡Complete los campos!")
       document.form6.edHoraInicio.focus() 
       return 0; 
}
 
if (document.form6.edHoraFin.value.length==''){ 
alert("¡Complete los campos!")
       document.form6.edHoraFin.focus() 
       return 0; 
}
 
if (document.form6.edTiempoIntervencion.value.length==''){ 
alert("¡Complete los campos!")
       document.form6.edTiempoIntervencion.focus() 
       return 0; 
}
 
     var datos = $(this).serialize();   
      event.preventDefault()
      $.ajax(
        {
            url:'ins_detatifac.php',
            type:'POST',
            data:datos,
            beforeSend:function(objeto){ 
                $('#carga').css({display:'block'});
            },
            complete:function(){
                $('#carga').css('display','none');
                },
            success: function(data) {
                $('#result').html(data);
            }
            
            
        }); 
        
    });
});
</script>
 

Y el textarea donde mandaría el formulario con onblur:

Código Javascript:

<textarea name="edAveria"  onblur="this.value=this.value.toUpperCase();v28(this.value, this.name);" cols="22" rows="8"><?php echo $row_Recordset2['edAveria']; ?></textarea>
 

Gracias

[Alexis88]

Utiliza el método blur para detectar la pérdida del enfoque en el elemento y con el método trigger, disparas el evento submit en el formulario. Un pequeño ejemplo:

Código HTML:

<form id = "formulario" action = "ejemplo.php">
    Dato: <input type = "text" name = "buscar" />
    <input type = "submit" value = "Buscar" />
</form>
 
<textarea id = "salida"></textarea>
 

Código Javascript:

$("#formulario").submit(function(e){
    e.preventDefault();
    $.ajax({
        url: $(this).prop("action"),
        data: $(this).serialize(),
        success: function(response){
            $("#salida").val(response);
        }
    });
});
 
$("#salida").blur(function(){
    $("#formulario").trigger("submit");
});
 

En el <textarea> se visualizará la respuesta del servidor, es decir, el resultado del procesamiento del dato enviado desde el formulario mediante el método ajax.

Saludos

[satjaen]

Iniciado por Alexis88

Utiliza el método blur para detectar la pérdida del enfoque en el elemento y con el método trigger, disparas el evento submit en el formulario. Un pequeño ejemplo:

Código HTML:

<form id = "formulario" action = "ejemplo.php">
    Dato: <input type = "text" name = "buscar" />
    <input type = "submit" value = "Buscar" />
</form>
 
<textarea id = "salida"></textarea>
 

Código Javascript:

$("#formulario").submit(function(e){
    e.preventDefault();
    $.ajax({
        url: $(this).prop("action"),
        data: $(this).serialize(),
        success: function(response){
            $("#salida").val(response);
        }
    });
});
 
$("#salida").blur(function(){
    $("#formulario").trigger("submit");
});
 

En el <textarea> se visualizará la respuesta del servidor, es decir, el resultado del procesamiento del dato enviado desde el formulario mediante el método ajax.

Saludos

Gracias Alexis, pero si mando el formulario al terminar de escribir en el textarea con blur para que poner ?:

<input type = "submit" value = "Buscar" />


Con esto bastaría?

Código HTML:

<form id = "formulario" action = "ejemplo.php">
   <textarea id = "salida"></textarea>
</form>
 

Lo he intentado así pero no va:

Código Javascript:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<title>mi bug</title>
</head>
<script type="text/javascript" >
$("#formulario").submit(function(e){
    e.preventDefault();
    $.ajax({
        url: $(this).prop("action"),
        data: $(this).serialize(),
        success: function(response){
            $("#contenido").val(response);
        }
    });
});
   $("#salida").blur(function(){
    $("#formulario").trigger("submit");
});
</script>
<body>
<form id = "formulario" action = "ins1_avisos.php">
  <table width="79%">
            <tr>
              <th scope="col" width="57">Teléfonos</th>
<th scope="col" width="52"><input name="telefonos" id="telefonos"  type="text" size="9" maxlength="9"/></th>
 
             <th scope="col" width="46">Nombre</th>
    <th scope="col" width="88"><input name="name" id="name" type="text" size="35"/>
              </th>
              <th scope="col" width="46">Apellidos</th>
  <th scope="col" width="403"><input name="apellidos" id="apellidos" type="text" size="20" /></th>
  
    <th scope="col"><textarea id = "salida"></textarea></th>
            </tr>
            
           
</table>
<input type="hidden" name="MM_insert" value="form1" />
  
</form>
<div id="contenido"></div>
</body>
</html>
 

[Alexis88]

Claro, inicialmente lo había puesto sin el botón y luego lo edité porque también hay que dejar la posibilidad de utilizar el botón que es el medio natural por el cual se puede hacer el envío. Particularmente, encuentro un tanto inútil hacerlo cuando se pierde el enfoque en el <textarea>, el usuario puede haberle quitado el enfoque por error y habrá enviado la información cuando todavía no quería hacerlo. Como programador, siempre tienes que pensar en todos los casos posibles.

Un consejo más: No utilices tablas para alinear los elementos, para eso están las hojas de estilos, las tablas deben ser usadas únicamente para listar datos.

Saludos

[satjaen]

Ok, pero el código no funciona:

Código Javascript:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<title>mi bug</title>
</head>
<script type="text/javascript" >
$("#formulario").submit(function(e){
    e.preventDefault();
    $.ajax({
        url: $(this).prop("action"),
        data: $(this).serialize(),
        success: function(response){
            $("#contenido").val(response);
        }
    });
});
   $("#salida").blur(function(){
    $("#formulario").trigger("submit");
});
</script>
<body>
<form id = "formulario" action = "ins1_avisos.php">
  <table width="79%">
            <tr>
              <th scope="col" width="57">Teléfonos</th>
<th scope="col" width="52"><input name="telefonos" id="telefonos"  type="text" size="9" maxlength="9"/></th>
 
             <th scope="col" width="46">Nombre</th>
    <th scope="col" width="88"><input name="name" id="name" type="text" size="35"/>
              </th>
              <th scope="col" width="46">Apellidos</th>
  <th scope="col" width="403"><input name="apellidos" id="apellidos" type="text" size="20" /></th>
  
    <th scope="col"><textarea id = "salida"></textarea></th>
            </tr>
            
           
</table>
<input type="hidden" name="MM_insert" value="form1" />
  
</form>
<div id="contenido"></div>
</body>
</html>
 

Y así ?

Código Javascript:

<script type="text/javascript" >
$(document).ready(function(){
    //insertando input por Jquery
 
    $('textarea').live('blur', function() {             
             $("#formulario").trigger("submit");
    });
    
    
    
})       
</script>
 

[Alexis88]

El ejemplo que inicialmente te mostré funciona perfectamente, lo probé antes de publicarlo y marcha de maravilla. Los Divs no tienen la propiedad value, por eso no se muestra la respuesta de la petición asíncrona en él, en su lugar debes usar el método html.

Código Javascript:

$("#contenido").html(response);
 

Saludos

[satjaen]

Alexis, no he dudado de tu código sino del mio. Es que no me funciona, escribo algo en el textarea y no hace nada. La tabla es para el ejemplo. Gracias por tu consejo.

Código Javascript:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<title>mi bug</title>
</head>
<script type="text/javascript" >
$("#formulario").submit(function(e){
    e.preventDefault();
    $.ajax({
        url: $(this).prop("action"),
        data: $(this).serialize(),
        success: function(response){
           $("#contenido").html(response);
        }
    });
});
   $("#salida").blur(function(){
    $("#formulario").trigger("submit");
});
</script>
<style>
.carga1{
cursor:pointer;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;background-repeat: no-repeat;background-position:center;background-size:30%;background-color:rgba(0,0,0,0.5);width:300px;color:#fff;text-align:center;height:100px;padding:52px 12px 12px 12px;position:fixed;top:30%;left:40%;z-index:6;
}
</style>
 
<body>
<form id = "formulario" action = "ins1_avisos.php">
  <table width="79%">
            <tr>
              <th scope="col" width="57">Teléfonos</th>
<th scope="col" width="52"><input name="telefonos" id="telefonos"  type="text" size="9" maxlength="9"/></th>
 
             <th scope="col" width="46">Nombre</th>
    <th scope="col" width="88"><input name="name" id="name" type="text" size="35"/>
              </th>
              <th scope="col" width="46">Apellidos</th>
  <th scope="col" width="403"><input name="apellidos" id="apellidos" type="text" size="20" /></th>
  
    <th scope="col"><textarea id = "salida"></textarea></th>
            </tr>
            
           
</table>
<input type="hidden" name="MM_insert" value="form1" />
  
</form>
<div id="contenido" class="carga1"></div>
</body>
</html>
 

[Alexis88]

Es que no va a suceder algo si solamente escribes en el <textarea>, el evento blur se ejecuta cuando el elemento pierde el enfoque, no cuando lo tiene. Luego de escribir, quítale el enfoque y se ejecutará la función. Por otro lado, ¿qué realizas con los datos en el archivo insl_avisos.php?, depende de lo que hagas ahí, se mostrará algo en el Div.

[satjaen]

Ok,

Código Javascript:

<script type="text/javascript">
$(document).ready(function() {
    
    $("#salida").blur(function(){
      $("#form1").trigger("submit");
       });
    
 
    $('#form1').submit(function(event) {
     var datos = $(this).serialize();   
      event.preventDefault()
      $.ajax(
        {
            url:'ins1_avisos.php',
            type:'POST',
            data:datos,
            beforeSend:function(objeto){ 
                $('#carga').css({display:'block'});
            },
            complete:function(){
                $('#carga').css('display','none');
                },
            success: function(data) {
                $('#result').html(data);
 
            }
        }); 
    });
});
</script>
 

[Alexis88]

¿Así funciona o qué sucede?, por otro lado, todavía no has respondido a mi pregunta anterior, ¿qué sucede en el archivo ins1_avisos.php y qué resultado devuelve?.

[satjaen]

Si Alexis el resultado es correcto. Muchas gracias

[satjaen]

Una pregunta Alexis, con el evento onchange en un select se haría igual ?

Código Javascript:

$("#salida").onchange(function(){
 

Gracias

[Alexis88]

En jQuery existe el método change y sí, el resultado sería el mismo.

Saludos

[satjaen]

Iniciado por Alexis88

En jQuery existe el método change y sí, el resultado sería el mismo.

Saludos

Alexis lo estoy intentando así pero no sale. Quiero mandar el formulario cuando selecciono el valor 2.

Código Javascript:

<script type="text/javascript">
$(document).ready(function() {
 
$( "#target" ).change(function() {
$("#form6").trigger("submit");
});
 
    $('#form6').submit(function(event) {
     var datos = $(this).serialize();   
      event.preventDefault()
      $.ajax(
        {
            url:'ins1_avisos.php',
            type:'POST',
            data:datos,
            beforeSend:function(objeto){ 
                $('#carga').css({display:'block'});
            },
            complete:function(){
                $('#carga').css('display','none');
                },
            success: function(data) {
                $('#result').html(data);
 
            }
        }); 
    });
  });
</script>
 

Código Javascript:

<select name="TipoIntervencion" id="TipoIntervencion" >
          <option value=''>SELECCIONE</option>
          <option value='1'>Factura</option>
          <option id="target"  value='2'>Albaran</option>
     </select>
 

[Alexis88]

¿Te has dado cuenta que el <select> tiene por Id "TipoIntervencion" pero en el código estás aplicando el método change al elemento de Id "target"?

Hazlo así:

Código Javascript:

$( "#TipoIntervencion" ).change(function() {
    if ($(this).val() == 2)
        $("#form6").trigger("submit");
});
 

Saludos

[satjaen]

Iniciado por Alexis88

¿Te has dado cuenta que el <select> tiene por Id "TipoIntervencion" pero en el código estás aplicando el método change al elemento de Id "target"?

Si pero si le pongo el Id "target" al select me manda el formulario cuando selecciono cualquiera de los dos valores y yo solo lo quiero que lo mande con el valor 2.

Perdona que he debido de contestar al mismo tiempo que tú.
Gracias

[Alexis88]

¿Y ya probaste con el último código que te di?

[satjaen]

Iniciado por Alexis88

¿Y ya probaste con el último código que te di?

Si y va perfecto.
Muchas gracias