entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

4votos

mandar formulario con javascript y ajax, guardar sin refrescar la pagina

hola a todos, tengo el siguiente codigo

<div class="accordion green">
                  <h3>1. Overall Information</h3>
                  <div class="content">

                    <div class="accordion odd">
                      <h3>1.1   Project Description and Scope of Work</h3>
                      <div class="content">
                        Describe in detail the Project associated with the MOP, and the service scope of work. Example: This document includes different scopes 
                        and/or scenarios in the service Z for equipment AB, and Application Y.  This MOP applies to Extension ONLY.
                        <div class="col-sm-10">
                                <textarea class="form-control" rows="5" id="wysiwig_simple1" name="ovinf1"></textarea>
                        </div>
                      </div>
                    </div>
                    <div class="accordion odd">
                      <h3>1.2   Service Impact</h3>
                      <div class="content">
                        Describe the impact as a result of performing this activity, including the impact in case of performing a rollback as part of the general MOP
                        <div class="col-sm-10">
                                <textarea class="form-control" rows="5" id="wysiwig_simple2" name="ovinf2"></textarea>
                        </div>
                      </div>
                    </div>
                    <div class="accordion odd">
                      <h3>1.3   Generic MOP Correlation</h3>
                      <div class="content">
                        This section contains links to the generic method of procedures that are related to the activity stated on this document. Those correlations apply for the previous and/or post related activities.
                        <table class="table table-striped table-bordered table-hover table-heading no-border-bottom" id="field_grid">
                            <thead>
                                <tr>
                                    <th>MOP Name (Link)</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td> <input type="text" value=""  name="o1[]" placeholder="link" class="form-control" /></td>

                                </tr>
                            </tbody>
                        </table>
                        <button id="add_field" class="btn btn-default">Add Field <i class="fa fa-plus"></i></button>
                        <script type="text/template" id="template">
                                 <tr>
                                    <td>
                                        <input type="text" class="form-control" value=""  name="o1[]" placeholder="link" />
                                    </td>

                                    <td>
                                        <a href="#" class="btn-remove"><li class="fa fa-trash-o"> </li></a>
                                    </td>
                                </tr>
                        </script>
                      </div>
                    </div>
                    <div class="accordion odd">
                      <h3>1.4   Specific MOP Correlation</h3>
                      <div class="content">
                        This section contains links to the method of procedures that are related to the activity stated on this document. Those correlations apply for the previous and/or post related activities.
                        <table class="table table-striped table-bordered table-hover table-heading no-border-bottom" id="field_grid2">
                            <thead>
                                <tr>
                                    <th>MOP Name (Link)</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td> <input type="text" value=""  name="o2[]" placeholder="link" class="form-control" /></td>

                                </tr>
                            </tbody>
                        </table>
                        <button id="add_field2" class="btn btn-default">Add Field <i class="fa fa-plus"></i></button>
                        <script type="text/template2" id="template2">
                                 <tr>
                                    <td>
                                        <input type="text" class="form-control" value=""  name="o2[]" placeholder="link" />
                                    </td>

                                    <td>
                                        <a href="#" class="btn-remove2"><li class="fa fa-trash-o"> </li></a>
                                    </td>
                                </tr>
                        </script>
                      </div>
                    </div>
                    <button  onclick="saveovinf()">Save Overall Information &raquo;</button>
                    <pre id="valores"></pre>
                     <div class="progress">
                        <div class="progress-bar" role="progressbar" id="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"><span class="sr-only">100% Complete</span></div>
                    </div>
                  </div>
                </div>

necesito saber como lograr que se mande la información del formulario

  1. sin refrescar la pagina
  2. recuperando los datos correctamente

por favor alguien que me pueda guiar un poco?? que le tendría que poner a mi función
onclick="saveovinf()
para poder recuperar los datos de los texttarea y de los inputs
Gracias

1voto

white comentado

tienes algo de código en tu función saveoinf() ? si no, lo que tendrías que ponerle a esa funcion es todo, toda la logica, pero antes, que campos quieres enviar? como los quieres recibir en tu servidor? veo varios campos deseas enviar todos?

1voto

rach comentado

hola muchas gracias por responder, tengo este pedazo de codigo

$("#alert").css("display", "inline");
    $("#contenidoOculto").load("mops.php", function(){
    $("#alert").slideUp("slow");
    });

lo que quiero es mandar todos los datos que puse del formulario pero sin recargar la pagina :(
y tomando en cuenta que los ultimos dos campos son dinamicos, y el usuario puede agregar cuantos links quiera, no se si me di a entender, :S ojala que me puedas ayudar
Saludos

1 Respuesta

5votos

Kyrios Puntos340

Lo que deseas es obtener y enviar todos inputs, selects, radiobuttons, etc que existan en tu formulario y de ahi que se despliegue algun mensaje que te diga que si se enviaron bien o no pero que los datos se sigan viendo en pantalla, o eso es lo que entiendo.
Si eses es el caso, me parece que tendrias que usar un FormData y de ahi podrias hacer algo asi:

  1. Crear un FormData:
    var fdata=new FormData();

    2.- Encontrar todos los campos de entrada de tu formulario, algo asi serviria

    fields=$('.content').find('input, select, textarea'); //Encuentras todos los campos y se asignan a la variable fields
  2. Recorres esa variable obteniendo los valores de los campos:
    fields.each(function(i, elem){      
        valor=$(elem).val();
                fdata.append(nombre,v); //nombre es como se obtiene la v usando post
    });
  3. Envias los datos por ajax:
    $.ajax({
        type:'POST',
        url: 'RUTA_archivo',
        contentType:false,
        data:fdata,
        processData:false,
        cache:false,
        success: function (json) {//Si se hizo el proceso de la informacion que enviaste correctamente
            //Hace algo
        },
                error:function(json){/NO se hizo el proceso de la informacion que enviaste correctamente
            //Hace algo
                }
    });

    Con eso envias todo tu formulario sin recargar la pagina, o asi lo entiendí yo.

3votos

wroque comentado

si vas a utilizar jQuery, no hay necesidad de hace tanto script,

<form name="myForm">
 ...
</form>
<script>
    $('[name="myForm"]').submit(function(event) {
        var data = $(this).serialize(),
            url = '/servicio/..';

        $.post(url, data, function(msg) {
            alert(msg);
        }, 'json');

        event.preventDefault();
    });
</script>

2votos

dimcraft comentado

disculpa pero:

event.preventDefault();

debe ir antes, no despues:

event.preventDefault();
var data = $(this).serialize();

1voto

wroque comentado

el ajax es asincronico, no veo porque debería ir antes de la declaración de una variable, si las buenas prácticas señalan lo contrario.

2votos

dimcraft comentado

tienes razon ajax puede ser asincrono o sincrono, pero eso es respecto a otras peticiones ajax, no respecto al codijo javascript que se escribe antes de una petición.

2votos

wroque comentado

El codigo es funcional, siendo javascript, si te fallá me avisas.

pd: agrega la referencia que apoye lo que dices.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta