1

I am having a problem with checkboxes using jquery and php. I am adding rows of hours and I want to add a Overtime checkbox which is on the form but when I use the jquery to add the data to a new line to allow for adding multiple rows for adding to the database after I cant get it to add the checkbox my Form data is as below.

I want to add the checkbox (Is Checked / Not Checked) and also the value of 0 not checked and 1 if checked.

the field is called 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>

thank you for any help that can be given on what I am doing wrong.

thank you

Improve this question

2 Answers 2

Reset to default
1

You have some errors in your code.

I fixed them and so the final code is in the following snippet.

In order to distinguish the names of each field I used the following criteria:

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

Of course, each name has a different prefix according to the name of the field.

Therefore, you may use the names so organized on your server side.

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>

An example on how you can get all add_overtime_hours is:

$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' )' ">
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Hello GaetanoM thank you for looking at my code. I have changed it in the main page although the overtime hours doesn't seem to propogate through still. Also for some reason the date I put in on the first line is 23/08/2016 and when it propogates to a new line it shows 2016-08-23.
Hello gaetanoM thank you very much for that I wouldn't have ever got that myself. I will now go and learn about the .closest previously the div is then saved to the database will I need to change anything on the existing code from the changes. I assume that it is still creating the same names to fill the Database in. I would also like to insert the checkbox into the database value is this possible too ? thank you so much.
Thank you very much I have been trying to copy the value of the checked box into a 0 or a 1 depending on if the checkbox is checked or not. I have tried to use the .val on the new text box but I cant quite get it right
@RobertGrain Sorry, but according to SO, one question one answer. We cannot continue with the same question for ever. You can only accept/upvote or not. It's up to you.
Hello Gaetano I am very sorry about that you certainly have helped me alot and I will certainly accept the answer as the original question is working well. I will continue to work on the rest thanks for giving me a great start.
|
0

Thank you gaetanoM That is a great solution. I have now got to go through it all to understand it. thank you

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.