Creating a user-friendly interface with Dropdown menus paired with Labels and Buttons, structured to repeat row by row

Question

Creating a user-friendly interface with Dropdown menus paired with Labels and Buttons, structured to repeat row by row

I have a query regarding my design.

My concern is about adding products to the bill. Each product needs to be added on a separate line. View Image of Adding One Product per Line

Upon adding a product, I also want to display its warranty in the Warranty column:

Check Warranty Display for Selected Product

However, when adding subsequent products, I'm struggling to display their warranties. Unable to Show Warranty for Additional Products

The HTML code where dropdown options are populated dynamically:

<tbody style="border: 1px solid rgba(0,0,0,0.35); height: 34px; line-height: 34px;">
    <tr class="text-center">
        <td>
            <select id="myDropdown" name="bill_product[]" onChange="dropdownTip(this.value)">
                <option disabled selected value="">Select Product</option>
                <option id="1" value="31/01/2020">Product #1</option>
                <option id="2" value="31/01/2030">Product #2</option>
                <option id="3" value="31/01/2040">Product #3</option>
            </select>
        </td>
        <td>
            <input name="txtbox" type="text" id="txtbox" />
        </td>
        <td>
            <button type="button" class="btn btn-danger btn-xs disabled">
                <i class="fa fa-times"></i>
            </button>
        </td>
    </tr>
</tbody>

Javascript function for adding rows to the bill:

$(document).ready(function () {
    var counter = 0;
    $("#addrow").on("click", function () {
        var newRow = $("<tr class='text-center'>");
        var cols = "";
        cols += '<td><select name="bill_product[]"><option disabled selected value="">Select Product</option><cms:pages masterpage="product.php"><option value="<cms:show k_page_id />"><cms:show k_page_title /></option></cms:pages></select></td>';
        cols += '<td><input type="text" id="txtbox" name="txtbox" /></td>';
        cols += '<td><button type="button" class="ibtnDel btn btn-danger btn-xs"><i class="fa fa-times"></i></button></td>';
        newRow.append(cols);
        $("table.order-list").append(newRow);
            counter++;
        });
        $("table.order-list").on("click", ".ibtnDel", function (event) {
            $(this).closest("tr").remove();       
                counter -= 1
            });
        });

Code snippet for displaying the warranty end date:

$(document).ready(function() {
    $("#myDropdown").change(function() {
        var selectedValue = $(this).val();
        $("#txtbox").val(selectedValue);
    });
});

Challenge: I'm facing difficulty in showing the warranty date for any product after the first one.

Your assistance would be greatly appreciated.

P.S.: The dynamic values for select option tags are fetched using CouchCMS.

javascript jquery html css couch-cms

Answer 1

Answer №1

My innovative solution eliminates non-native JS for compatibility with any system:

<tbody style="border: 1px solid rgba(0,0,0,0.35); height: 34px; line-height: 34px;">
    <tr class="text-center">
        <td>
            <select id="myDropdown" name="bill_product[]" onChange="dropdownTip(this.value)">
                <option disabled selected value="">Select Product</option>
                <option id="1" value="31/01/2020">Product #1</option>
                <option id="2" value="31/01/2030">Product #2</option>
                <option id="3" value="31/01/2040">Product #3</option>
            </select>
        </td>
        <td>
            <input name="txtbox" type="text" id="txtbox" />
        </td>
        <td>
            <button type="button" class="btn btn-danger btn-xs disabled">
                Delete
            </button>
        </td>
    </tr>
</tbody>

// Removing lines
let delBtns = document.querySelectorAll(".del-btn");

[].forEach.call(delBtns, function(delBtn){
    delBtn.addEventListener('click', function(event){
    let line = event.target.dataset.line;

    let lineToRemove = document.querySelector("#line-"+line);

    lineToRemove.remove();
  })
});

// Updating inputs
let productDropDowns = document.querySelectorAll("select");

[].forEach.call(productDropDowns, function(dropDown){
    dropDown.addEventListener('change', function(event){
    let line = event.target.dataset.line;

    document.querySelector('#line-'+line+' input').value = event.target.value;
  })
});

// New line button
let count = 0;
let newLineButton = document.querySelector("#newLineTrigger");

newLineButton.addEventListener('click', function(){
    count++;
    let tableBody = document.querySelector('tbody');
  let newLine = document.createElement('tr');
  newLine.id = 'line-' + count;
  tableBody.appendChild(newLine);
  newLine = document.querySelector('#line-' + count);

  let col1 = document.createElement('td');
    let select = document.createElement('select');
  select.id = 'drop' + count;
  select.dataset.line = count;

  select.addEventListener('change', function(event){
    let line = event.target.dataset.line;
    document.querySelector('#line-'+line+' input').value = event.target.value;
  })

  for(let i=0; i<3; i++){
    let option = document.createElement('option');
    option.value = i;
    option.innerText = 'option ' + i;
    select.appendChild(option);
  }

    col1.appendChild(select);

  let col2 = document.createElement('td');
  let textBox = document.createElement('input');
  textBox.id = 'textBox'+count;
  textBox.name = 'textBox'+count;
  col2.appendChild(textBox);

  let col3 = document.createElement('td');
  let newDelBtn = document.createElement('button');
  newDelBtn.className = "del-btn";
  newDelBtn.dataset.line = count;
  newDelBtn.innerText = "Delete";
  newDelBtn.addEventListener('click', function(event){
    let line = event.target.dataset.line;

    let lineToRemove = newLine;

    lineToRemove.remove();
  });
  col3.appendChild(newDelBtn);


    newLine.appendChild(col1);
    newLine.appendChild(col2);
    newLine.appendChild(col3);

  tableBody.appendChild(newLine);
});

Answer 2

My innovative solution eliminates non-native JS for compatibility with any system:

<tbody style="border: 1px solid rgba(0,0,0,0.35); height: 34px; line-height: 34px;">
    <tr class="text-center">
        <td>
            <select id="myDropdown" name="bill_product[]" onChange="dropdownTip(this.value)">
                <option disabled selected value="">Select Product</option>
                <option id="1" value="31/01/2020">Product #1</option>
                <option id="2" value="31/01/2030">Product #2</option>
                <option id="3" value="31/01/2040">Product #3</option>
            </select>
        </td>
        <td>
            <input name="txtbox" type="text" id="txtbox" />
        </td>
        <td>
            <button type="button" class="btn btn-danger btn-xs disabled">
                Delete
            </button>
        </td>
    </tr>
</tbody>

// Removing lines
let delBtns = document.querySelectorAll(".del-btn");

[].forEach.call(delBtns, function(delBtn){
    delBtn.addEventListener('click', function(event){
    let line = event.target.dataset.line;

    let lineToRemove = document.querySelector("#line-"+line);

    lineToRemove.remove();
  })
});

// Updating inputs
let productDropDowns = document.querySelectorAll("select");

[].forEach.call(productDropDowns, function(dropDown){
    dropDown.addEventListener('change', function(event){
    let line = event.target.dataset.line;

    document.querySelector('#line-'+line+' input').value = event.target.value;
  })
});

// New line button
let count = 0;
let newLineButton = document.querySelector("#newLineTrigger");

newLineButton.addEventListener('click', function(){
    count++;
    let tableBody = document.querySelector('tbody');
  let newLine = document.createElement('tr');
  newLine.id = 'line-' + count;
  tableBody.appendChild(newLine);
  newLine = document.querySelector('#line-' + count);

  let col1 = document.createElement('td');
    let select = document.createElement('select');
  select.id = 'drop' + count;
  select.dataset.line = count;

  select.addEventListener('change', function(event){
    let line = event.target.dataset.line;
    document.querySelector('#line-'+line+' input').value = event.target.value;
  })

  for(let i=0; i<3; i++){
    let option = document.createElement('option');
    option.value = i;
    option.innerText = 'option ' + i;
    select.appendChild(option);
  }

    col1.appendChild(select);

  let col2 = document.createElement('td');
  let textBox = document.createElement('input');
  textBox.id = 'textBox'+count;
  textBox.name = 'textBox'+count;
  col2.appendChild(textBox);

  let col3 = document.createElement('td');
  let newDelBtn = document.createElement('button');
  newDelBtn.className = "del-btn";
  newDelBtn.dataset.line = count;
  newDelBtn.innerText = "Delete";
  newDelBtn.addEventListener('click', function(event){
    let line = event.target.dataset.line;

    let lineToRemove = newLine;

    lineToRemove.remove();
  });
  col3.appendChild(newDelBtn);


    newLine.appendChild(col1);
    newLine.appendChild(col2);
    newLine.appendChild(col3);

  tableBody.appendChild(newLine);
});

Answer 3

Answer №2

The element '#addrow' responsible for adding rows is not visible to me. Could you please modify the fiddle to include this button?

Answer 4

The element '#addrow' responsible for adding rows is not visible to me. Could you please modify the fiddle to include this button?

Answer 5

Answer №3

All warranty input fields have the same ID, "txtbox". To differentiate them, you can utilize the counter variable to assign unique IDs to each warranty field.

Answer 6

All warranty input fields have the same ID, "txtbox". To differentiate them, you can utilize the counter variable to assign unique IDs to each warranty field.

Creating a user-friendly interface with Dropdown menus paired with Labels and Buttons, structured to repeat row by row

Answer №1

Answer №2

Answer №3

Similar questions

Leveraging angular.extend() with controllers and function overrides

Is a webpage's sluggishness in Internet Explorer due to its lengthy page structure causing issues while loading quickly on other browsers?

Creating a tailored regular expression for validating email addresses

Send an object from AngularJS to an MVC controller and bind it to a corresponding class object

Could anyone provide an explanation of the current situation in this section of the code?

Troubleshooting CSS Hover Not Displaying Properly in Angular 14

Revise the reply within ExpressJS

How does gray-matter function in Node.js affect the matter within?

Utilizing AngularJS: Techniques for Binding Data from Dynamic URLs

The maskedinput plugin offered by jQuery

Do flexible layouts require more effort and time to create and upkeep compared to fixed width layouts?

Dealing with encoding problems in Node.JS when parsing JSON data with UTF-

When using threejs, the color set for setClearColor is supposed to be white. However, when calling an external HTML file, it unexpectedly renders as

The addClass function in jQuery does not seem to be functioning properly when used within

Guide to modifying the class color using javascript

Is it possible for an Android webview to access the device's geo location?

Exploring Android Webview capabilities using HTML 5 geolocation

Unraveling the JSON section within a intricate text document

Unable to transform data types

Exploring the depths of JSON: Unraveling the secrets of reading dynamic object data