Tengo un problema con las casillas de verificación al usar jquery y php. Estoy agregando filas de horas y quiero agregar una casilla de verificación de horas extraordinarias que está en el formulario, pero cuando uso jquery para agregar los datos a una nueva línea para permitir agregar varias filas para agregar a la base de datos después de que no puedo hacerlo agregue la casilla de verificación Los datos de mi formulario son los siguientes.

Quiero agregar la casilla de verificación (Está marcado / No marcado) y también el valor de 0 no marcado y 1 si está marcado.

El campo se llama add_overtime_hours

<!-- this ext section is the Adding Hours on the jobsheet -->
<script type="text/javascript">
var rownumhours = 0;
function addhours(frm) {
rownumhours ++;
<!-- the next part creates the html to add dynamic fields into the Div hoursrow
var hoursrow = '<p id="rownumhours'+rownumhours+'">Start Time: <input type="text" name="add_start[]" size="4" value="'+frm.add_start.value+'">  Finish Time: <input type="text" name="add_finish[]" value="'+frm.add_finish.value+'"> Date: <input type="text" name="add_date[]" value="'+frm.add_date.value+'"> Overtime: <input type="checkbox" name="add_overtime_hours[]" size="1" value="'+frm.add_overtime_hours.value+' "> <input type="button" value="Remove" onclick="removeRow('+rownumhours+');"></p>';
<!-- the next part looks at the partsrow div lower in the page and then appends the values to the row variable above -->
jQuery('#hoursrow').append(hoursrow);
frm.add_start.value = '';
frm.add_finish.value = '';
frm.add_overtime_hours.value = 'N';
frm.add_date.value = '';
}

function removeRow(rnum) {
    jQuery('#rownumhours'+rnum).remove();
}
</script>

<tr>
<td colspan="3" align="left">
    <div id="hoursrow">
        <p>
            <span class="text">Hours Labour :</span></span>
        </p>
        <p>
            <span class="headings"><span class="text"><span class="hours">Start Time:
            <input type="time" name="add_start" size="4" />Finish Time:
            <input type="time" name="add_finish" size="4" />Date:
            <input type="date" name="add_date" size="4" />OVT:
            <input type="checkbox" name="add_overtime_hours" id="add_overtime_hours"  Value="1" size="1" maxlength="1" />
            </span></span>
            <span class="text"><span class="hours">
                <input onclick="addhours(this.form);" type="button" value="Add Labour" />
                </span></span>
        </p>
        <p class="headings"><span class="text"><span class="hours">
          <span class="info">(This row will not be saved unless you click on "Add Labour" first) </span></span></span>
        </p>
    </div>
</td>
<td width="7"></td>
</tr>
<tr>
    <td>&nbsp;</td>
</tr>

Gracias por cualquier ayuda que se pueda brindar sobre lo que estoy haciendo mal.

Gracias

1
Robert Grain 23 ago. 2016 a las 15:43

2 respuestas

La mejor respuesta

Tienes algunos errores en tu código.

Los arreglé y el código final está en el siguiente fragmento.

Para distinguir los nombres de cada campo utilicé los siguientes criterios:

name="add_finish[1]"
name="add_finish[2]"
......

Por supuesto, cada nombre tiene un prefijo diferente según el nombre del campo.

Por lo tanto, puede utilizar los nombres así organizados en el lado del servidor.

var rownumhours = 0;

function addhours(obj, e) {
  rownumhours++;
  var hoursrow = '<p id="rownumhours' + rownumhours + '">Start Time: <input type="time" name="add_start[' + rownumhours + ']" size="4" value="' +
      $(obj).closest('span.headings').find('[name="add_start"]').val() + '">  Finish Time: <input type="time" name="add_finish[' + rownumhours + ']" value="' +
      $(obj).closest('span.headings').find('[name="add_finish"]').val() + '"> Date: <input type="date" name="add_date[' + rownumhours + ']" value="' +
      $(obj).closest('span.headings').find('[name="add_date"]').val() + '"> Overtime: <input type="checkbox" name="add_overtime_hours[' + rownumhours + ']" size="1" value="' +
      $(obj).closest('span.headings').find('[name="add_overtime_hours"]').val() + '"' +
      (($(obj).closest('span.headings').find('[name="add_overtime_hours"]').is(':checked')) ? 'checked' : '') +
      ' "> <input type="button" value="Remove" onclick="removeRow(' +
      rownumhours + ');"></p>';
  jQuery('#hoursrow').append(hoursrow);
}

function removeRow(rnum) {
  jQuery('#rownumhours' + rnum).remove();
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<table>
    <tbody>
    <tr>
        <td colspan="3" align="left">
            <div id="hoursrow">
                <td>&nbsp;</td>
                <p><span class="text">Hours Labour :</span></span></p>

                <p> <span class="headings"><span class="text"><span class="hours">Start Time:
          <input type="time" name="add_start" size="4"/>
          Finish Time:
          <input type="time" name="add_finish" size="4"/>
          Date:
          <input type="date" name="add_date" size="4"/>
          OVT:
          <input type="checkbox" name="add_overtime_hours" id="add_overtime_hours" Value="1" size="1" maxlength="1"/>
          </span></span><span class="text"><span class="hours">
        <input onclick="addhours(this, event);" type="button" value="Add Labour"/>
        </span></span></p>

                <p class="headings"><span class="text"><span class="hours">
          <span class="info">(This row will not be saved unless you click on "Add Labour" first) </span></span></span>
                </p>
            </div>
        </td>
        <td width="7"></td>
    </tr>
    </tbody>
</table>

Un ejemplo de cómo puede obtener todas las add_overtime_hours es:

$myboxes = $_POST['add_overtime_hours'];
if(empty($myboxes)) {
     echo("You didn't select any boxes.");
} else {
    $i = count($myboxes);
    echo("You selected $i box(es): ");
    for($j=0; $j < $i; $j++) {
         echo($myboxes[$i] . " ");
    }
}
      Show_Overtime: <input type="text" name="add_overtime_hours[]" size="1" value="' + (($(obj).closest('span.headings').find('[name="add_overtime_hours"]').is(':checked')) ? 'checked' : '1' )' ">
1
Robert Grain 23 ago. 2016 a las 15:53

Gracias gaetanoM Esa es una gran solución. Ahora tengo que repasarlo todo para entenderlo. gracias

0
Robert Grain 24 ago. 2016 a las 13:28