Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » enviar datos del formulario sin actualizar pagina

JavaScript - enviar datos del formulario sin actualizar pagina

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

enviar datos del formulario sin actualizar pagina

Publicado por mathiaz (1 intervención) el 19/12/2016 23:34:46
buenas tardes!! alguien me puede ayudar por favor!!
estoy haciendo un formulario en modelo vista controlador
tengo un formulario de la siguiente manera:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<form   name='form1' method='POST' action='../control/conCargo.php' class="formulario"  >
           <input  type='text' class='text'   name='nombre' id='nombre'  value='<?php if( isset($_GET["nombre"])) echo $_GET["nombre"]; ?>' >
 
 
 
<input type="hidden" name="operacion">
 <input    name="buscar" id="buscar" type="button" value="Buscar"  onClick="envia(this.value)"  onblur="activar()">
 <input  name="registrar" id="registrar"  type="button"  value="Registrar" onClick="envia(this.value)">
  <input  name="modificar" id="modificar" type="button"   value="Modificar" onClick="envia(this.value)">
  <input  name="activate" id="activate"  type="button"  value="Inactivar" onClick="envia(this.value);est(this.value);" >
 
 
 <script type="text/javascript" >
 
       function inicializar_formulario()
        {
        f=document.form_cargo;
        f.eliminar.disabled=true;  //inicialmente  botones bloqueado

        f.modificar.disabled=true;//boton bloqueado

        }
       window.onload=inicializar_formulario;
 
        function envia(ope)
          {
            document.form1.operacion.value=ope;
             document.form1.submit();  //aqui envio datos del formulario al controlador

           }
      function activar()              //funcion para activar  los botones bloqueados

       {
         f=document.form1;
         f.eliminar.disabled=false;
         f.modificar.disabled=false;
       }
 
</script>

lo que quiero que se activen los botones eliminar y modificar cuando doy clic en el boton buscar ya que inicialmente los tengo bloqueados la funcion activar() los activa pero como almismo tiempo el boton consultar tiene una funcion envia(ope) que envia datos del formulario se actualiza la pagina y se vuelven a bloquear los botones como estaban inicialmente. alguna solucion??


de antemano estoy muy agradecido con sus respuestas muchas gracias!!!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil

enviar datos del formulario sin actualizar pagina

Publicado por Rama (1 intervención) el 27/12/2016 22:25:51
Hola Mathiaz, de antemano te comento que estoy recién iniciando el tema de JS, no te voy a poder ayudar de manera practica pero estuve leyendo hace poco que para realizar este tipo de acciones se utiliza AJAX! lee algo sobre el tema y vas a ver que es facil, yo no tengo mucha practica, perdón que no te pueda ayudar de manera efectiva
Un abrazo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 477
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

enviar datos del formulario sin actualizar pagina

Publicado por Alejandro (130 intervenciones) el 28/12/2016 02:43:49
Hola Mathiaz, mira para resolver tu problema podes utilizar Ajax. Te dejo como podes resolverlo y algunos links para que investigues mas sobre que es Ajax y como se utiliza.

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
http://www.w3schools.com/xml/xml_http.asp

FORMULARIO
1
2
3
4
5
6
7
8
9
10
11
12
<form   name='form1' method='POST' action='../control/conCargo.php' class="formulario">
    <input  type='text' class='text'   name='nombre' id='nombre'  value='<?php if( isset($_GET["nombre"])) echo $_GET["nombre"]; ?>' >
    <input type="hidden" name="operacion">
 
    <!-- BOTONES -->
    <input  name="buscar" id="buscar" type="button" value="Buscar">
    <input  name="registrar" id="registrar"  type="button"  value="Registrar">
    <input  name="modificar" id="modificar" type="button"   value="Modificar">
    <input  name="activate" id="activate"  type="button"  value="Inactivar" >
    <input  name="eliminar" id="eliminar"  type="button"  value="Eliminar">
</form>
<script type="text/javascript" src="test.js"></script>

JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
function envia(event) {
    event.preventDefault();
    alert('asds');
    // recupero el valor de la operacion guardado en el boton

    var operacion = this.value;
 
    var httpRequest = null;
    var url         = 'test.php';    // url del backend (CONTROLADOR)

    var method      = 'POST';  // metodo

    var data        = 'date='+operacion; // datos a enviar

 
    if ( window.XMLHttpRequest ) {
        httpRequest = new XMLHttpRequest();
    } else if ( window.XMLHttpRequest ) {
        httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
    }
 
    // Realizo la solicitud

    httpRequest.onreadystatechange = function() {
 
        // Si la peticion se realizo de manera correcta...

        if ( this.readyState === 4 && this.status === 200 ) {
 
            // Recibo la repuesta del server almacenada en la propiedad responseText

            // del objeto XMLHttpRequest

            // Te en cuenta que tambien puede recibir otro tipo de dato como respuesta

            // ejemplo: un objeto JSON, .html, .xml, etc.

            console.log(httpRequest.responseText);
 
            // En esta parte luego de recibir la respuesta podes llamar a la funcion

            // que activa a los botones

            activar();
        }
 
    };
 
    httpRequest.open(method, url, true);
 
    // si el metodo elegido es post ingreso la cabezera correspondiente

    if (method === 'POST') {
        httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    }
 
    // envio los datos

    httpRequest.send(data);
 
}
 
function inicializar_formulario()
{
    f=document.form1;
    f.eliminar.disabled=true;  //inicialmente  botones bloqueado

    f.modificar.disabled=true;//boton bloqueado

}
 
function activar()              //funcion para activar  los botones bloqueados

{
    f=document.form1;
    f.eliminar.disabled=false;
    f.modificar.disabled=false;
}
 
(function(document){
 
    // Deshabilito los botones

    inicializar_formulario();
 
    var form = document.getElementById('form1');
 
    var btnBuscar = document.getElementById('buscar');
    var btnRegistrar = document.getElementById('registrar');
    var btnActivar = document.getElementById('activate');
 
    // agrego los manejadores

    btnBuscar.addEventListener('click', envia);
    btnRegistrar.addEventListener('click', envia);
    btnActivar.addEventListener('click', envia);
 
}(document));

PHP (Este debe ser tu controlador)

1
2
3
4
5
6
7
<?php
 
	// Este seria el Controlador el cual recibe la peticion enviada por AJAX

	// Es aca donde debes implementar la logica de tu aplicacion

	// A modo de ejemplo solo devuelvo un Hola Mundo

	echo "Hola Mundo";
?>

Espero que pueda servirte.
Saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar