Question

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

Comments

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?

---

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

Answer 1

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.