Question 10895 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Need to control form inputs within a dymanic table – Jquery

I’m using PHP, Jquery, and BootStrap.

I’m generating a form so users can provide their availability for consideration in an upstream process.
Users click a button, and a new row is added to the website asking for users’ input. There is a checkbox named all day that I would like to lock and update values for the start and end input area’s as well.

I have this working for row one only. If I generate three rows of input and check the box in row 3, row one’s input fields get modified when I want the fields in the same row as the checked box to be changed.

I think I need to narrow in the unique ID’s of the row table, but I’m not sure how to do that.

var s1 = 0;

$(document).ready(function() {

  $(".add-single").click(function() {
    $("#singleAvailTable").show();
    var markup = '<tr id="' + s1 + '"><td class="text-center w-20"><input type="date" class="" name="inputSingleDate[]" id="inputSingleDate[]" value="<?php echo $AvailDatedate; ?>" min="<?php echo $AvailDatedate; ?>" max="<?php echo $AvailOneYear; ?>" required></td><td class="text-center w-20"><input type="hidden" name="checkAllDay[]" id="checkAllDay[]" value="0"><input type="checkbox" onclick="this.previousSibling.value=1-this.previousSibling.value; AllDay(' + s1 + ')" id="checkAllDaybuton"></td><td class="text-center w-20"><select id="inputStartTime[]" name="inputStartTime[]" class="form-select form-select-sm"><option selected value="08:00">8:00 AM</option><option value="08:15">8:15 AM</option></select></td><td class="text-center w-20"><select id="inputEndTime[]" name="inputEndTime[]" class="form-select form-select-sm"><option value="08:00">8:00 AM</option><option value="08:15">8:15 AM</option><option value="08:30">8:30 AM</option><option value="12:00">12:00 PM</option><option value="20:00">8:00 PM</option></select></td><td class="text-center w-20"><input type="text" class="" id="inputNote[]" name="inputNote[]" pattern="[a-zA-Z0-9.- ]+"></td><td class="text-center w-20"><button type="button" class="btn btn-danger btn-sm" id="RowDel">Delete</button></td></tr>';
    $('#singleAvailTable').find('tbody').append(markup);
    s1++;
    console.log(s1);
  });

  // Find and remove selected table rows
  $("#singleAvailTable").on('click', '#RowDel', function() {
    $(this).parent().parent().remove();

  });


});

function AllDay(x) {


  // console.log("Row index is: " + x);
  // Find Allday checkbox
  if (document.getElementById('inputStartTime[]').disabled == false) {
    document.getElementById("inputEndTime[]").value = "20:00";
    document.getElementById("inputEndTime[]").disabled = true;
    document.getElementById("inputStartTime[]").value = "08:00";
    document.getElementById("inputStartTime[]").disabled = true;
    console.log('disabled row' + x);
    return;
  }
  if (document.getElementById('inputEndTime[]').disabled == true) {
    document.getElementById("inputEndTime[]").value = "12:00";
    document.getElementById("inputEndTime[]").disabled = false;
    document.getElementById("inputStartTime[]").value = "08:00";
    document.getElementById("inputStartTime[]").disabled = false;
    console.log('enabled row' + x);
    return;
  }
}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<p class="text-center">Use a button below to add an availability entry.</p>
<form>


  <table class="table table-sm" id="singleAvailTable">
    <thead>
      <tr>
        <th scope="col" class="text-center w-20">Date</th>
        <th scope="col" class="text-center w-20">All Day</th>
        <th scope="col" class="text-center w-20">Start Time</th>
        <th scope="col" class="text-center w-20">End Time</th>
        <th scope="col" class="text-center w-20">Availability Note</th>
        <th></th>
      </tr>
    </thead>
    <tbody id="tbody">
    </tbody>
  </table>
</form>
<p class="text-center">
  <button type="button" class="btn btn-primary add-single" id="addSingleBtn">Add Single Day Availability</button>
</p>

jsfiddle snippet: https://jsfiddle.net/orddie/0mf6qLxk/10/.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I got what I needed by changing the select logic to class and not ID code is here https://jsfiddle.net/orddie/0mf6qLxk/16/

    Most of the updates were done to this section

    function AllDay(x) {
  // console.log("Row index is: " + x);
  // Find Allday checkbox
                
  if (document.getElementsByClassName("inputStartTime")[x].disabled == false) {
    document.getElementsByClassName("inputEndTime")[x].value = "20:00"; 
    document.getElementsByClassName("inputEndTime")[x].disabled = true;
    document.getElementsByClassName("inputStartTime")[x].value = "08:00"; 
    document.getElementsByClassName("inputStartTime")[x].disabled = true;
    console.log('disabled row'+x);
    return;
  }
  if (document.getElementsByClassName("inputEndTime")[x].disabled == true) {
    document.getElementsByClassName("inputEndTime")[x].value = "12:00"; 
    document.getElementsByClassName("inputEndTime")[x].disabled = false;
    document.getElementsByClassName("inputStartTime")[x].value = "08:00"; 
    document.getElementsByClassName("inputStartTime")[x].disabled = false;
    console.log('enabled row'+x);
    return;
  }                
}
            
$("#singleAvailTable").on('click', '#checkAllDaybuton', function() {
  var test = $(this).show;
  // console.log(test);
});

  2. 0

    Change you id for

    • All day checkbox as id="checkAllDaybuton’+s1+’
    • Start time as id="inputStartTime’+s1+’"
    • End time as id="inputEndTime’+s1+’"

    Change the onclick function for checkbox as

    function AllDay(x) {

    var checkbox = document.getElementById('checkAllDaybuton' + x );
    var inputStartTime = document.getElementById('inputStartTime' + x );
    var inputEndTime = document.getElementById('inputEndTime' + x );

    inputStartTime.disabled = checkbox.checked;
    inputEndTime.disabled = checkbox.checked;
}
    • Here we set the disabled property of the inputStartTime and inputEndTime to the value of the checked property of the checkbox.
    • This will disable the relevant time dropdowns if the checkbox is checked, or enable it if it is unchecked.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search