pass jquery field values to php and save them to database

Navigation
0

hello everyone I have a situation where I have two documents request.php and guardianship.php

in the file request.php I have a to add fields. 

 var nextinput = 0;
        function AgregarCampos(){
        nextinput++;
        campo1 = '<div class="col-xs-2"><label for="sel1">N0. Empreado:</label><input type="text" class="form-control" placeholder="# Empreado" id="Numero_Empreado' + nextinput + '"&nbsp; name="Numero_Empreado' + nextinput + '"&nbsp; /></div>';
        campo2 = '<div class="col-xs-2"> <label for="sel1">Fecha:</label><input type="date" class="form-control" id="campo' + nextinput + '"&nbsp; name="campo' + nextinput + '"&nbsp; /></div>';
        campo3 = '<div class="col-xs-2"> <label for="sel1">Area:</label><select class="form-control" id="campo' + nextinput + '"&nbsp; name="campo' + nextinput + '"&nbsp;>\n\
                    <option>1.- Vacaciones</option>\n\
                    <option>2.- Tiempo X Tiempo</option>\n\
                    <option>3.- Permiso Falta</option>\n\
                    <option>3.- Horario Diferente de Trabajo</option>\n\
                    </select></div>';
        campo4 = '<div class="col-xs-2"><label for="sel1">Hora Inicio:</label><input type="time" class="form-control" id="campo' + nextinput + '"&nbsp; name="campo' + nextinput + '"&nbsp; /></div>';
        campo5 = '<div class="col-xs-2"><label for="sel1">Hora Fin:</label><input type="time" class="form-control" id="campo' + nextinput + '"&nbsp; name="campo' + nextinput + '"&nbsp; /></div>';
        campo6 = '<div class="col-xs-2"><label for="sel1">Solicitante:</label><input type="text" class="form-control" id="campo' + nextinput + '"&nbsp; name="campo' + nextinput + '"&nbsp; /></div>';
        campo7 = '<div class="col-xs-12"><label for="sel1">Causa Tiempo Extra:</label><textarea class="form-control" rows="5" id="campo' + nextinput + '"&nbsp; name="campo' + nextinput + '"&nbsp; ></textarea></div>';
        $("#campos").append(campo1,campo2,campo3,campo4,campo5,campo6,campo7);
        }

in the same document I have my with my button send 

<form class="form-horizontal form-label-left" action="php/Solicitud_Tiempo_extra.php" method="POST" novalidate>
          <div class="row">          
          <input type="button" id="btAdd" value="Añadir Elemento" class="btn btn-primary" onclick="AgregarCampos();" />
                    <input type="button" id="btRemove" value="Eliminar Elemento" class="btn btn-primary" />
                    <input type="button" id="btRemoveAll" value="Eliminar Todo" class="btn btn-primary" /><br />
          <div id="campos">
                  
                
                    </div>

           </div>
          </br>
           <div class="row">
                <button type="submit" class="btn btn-primary">Enviar Solicitud</button>
           </div>
</form>

What I want is to send the values of the fields that are going to be filled and adding dynamically to my file SaveRequest and save them in my database.

    
asked by antonio sanchez 29.06.2018 в 19:10
source

1 answer

1

Maybe your approach is not very orthodox but I think it can work.

I send you what you raise a little cleaner and with the corrections I needed to work. There are other ways to do it with Ajax or with a JavaScript framework but I think you will find out better if I tell you what you know.

The first thing is that each field that is sent in the post needs its own name and this you did not get with your code because you repeated the formula name="campo' + nextinput + '" for the different fields of the same row.

On the other hand, the button to delete row you have to put in each of them, it can not be common (I have not put the function to delete, I'll leave that to you, but you already have identifiers inserted to be able to do it good.

The "id" fields of each "input" or "select" would not be needed in this scenario but I have left them since you had put them. The "for" of the "label" have to match the "name", you already have it too. 

var nextinput = 0;

function AgregarCampos() {
  nextinput++;
  var etiqueta_campo1 = 'numero_empreado[' + nextinput + ']';
  var etiqueta_campo2 = 'fecha[' + nextinput + ']';
  var etiqueta_campo3 =  'area[' + nextinput + ']';

  var inicio='<div id="fila_' + nextinput + '">';  
  var campo1 ='<div class="col-xs-2"><label for="' + etiqueta_campo1 + '">N0. Empreado:</label><input type="text" class="form-control" placeholder="# Empreado" id="' + etiqueta_campo1 + '" name="' + etiqueta_campo1 + '"></div>';
   var campo2 ='<div class="col-xs-2"> <label for="' + etiqueta_campo2 + '">Fecha:</label><input type="date" class="form-control" id="' + etiqueta_campo2 + '" name="' + etiqueta_campo2 + '"></div>';
  var campo3 ='<div class="col-xs-2"> <label for="' + etiqueta_campo3 + '">Area:</label><select class="form-control" id="' + etiqueta_campo3 + '" name="' + etiqueta_campo3 + '"><option value="vacaciones">1.- Vacaciones</option><option value="tiempo">2.- Tiempo X Tiempo</option><option value="falta">3.- Permiso Falta</option><option value="horario">3.- Horario Diferente de Trabajo</option></select></div>';
  var fin = '</div><input type="button" id="btRemoveFila' + nextinput + '" value="Eliminar Elemento" class="btn btn-primary">';

  $("#campos").append(inicio+campo1+campo2+campo3+fin);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal form-label-left" action="php/Solicitud_Tiempo_extra.php" method="POST" novalidate>
  <label for="usuario">Solicitante</label><input type="text" name="usuario">    
  <input type="button" id="btAdd" value="Añadir Elemento" class="btn btn-primary" onclick="AgregarCampos();">
  <input type="button" id="btRemoveAll" value="Eliminar Todo" class="btn btn-primary">
  
  <div id="campos">
  </div>
  
    <p><button type="submit" class="btn btn-primary">Enviar Solicitud</button></p>
</form>

A file "Request_Time_extra.php" very crude so you can see that this works would be: 

<?php

echo "<h1>Subformularios</h1>";

foreach ($_POST['numero_empreado'] as $key => $value){
    echo '<br>numero_empreado(' . $key . ")=" . $_POST['numero_empreado'][$key] ;
    echo 'fecha(' . $key . ")=" . $_POST['fecha'][$key];
    echo 'area(' . $key . ")=" . $_POST['fecha'][$key];
}
    
answered by 29.06.2018 в 21:27
Error: illegal initializer for Object Is it good to use the enctype tag in HTML5 forms?