Unable to fetch row elements values using Javascript-CodePudding

I'm little new to Javascript.

This is using django as backend.

I'm trying to capture data from table columns like 'dose', 'duration' and 'usage' which uses text box and checkbox.

Whenever I hit the button with id='qty', then I'm able to see correct value for first click but when I click the button for another element it still submits same previous data instead of data on the same row.

Below is the sample output that I captured from console log

#Item 1 Log
[Log] Object (e28c8d12-1a95-44e5-9813-dfc2f4bf3bb1, line 502)
code: ""
dose: "1"
name: "PARACIP"
price: undefined
quantity: "2"
total: NaN
usage: {morning: false, afternoon: false, evening: false, night: false, sos: false}


#Item 2 Log
[Log] Object (e28c8d12-1a95-44e5-9813-dfc2f4bf3bb1, line 502)
code: ""
dose: "1"
name: "Paracetamol"
price: undefined
quantity: "2"
total: NaN
usage: {morning: false, afternoon: false, evening: false, night: false, sos: false}
Object Prototype

HTML Code

<table id="example"  style="width:100%">
    <thead>
        <tr>
            <th>Item</th>
            <th>Dose</th>
            <th>Duration</th>
            <th>Usage</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        {% for item in inventory %}
        <tr>
            <td>{{ item.brand }} {{ item.item_name }}</td>
            <td>
                <input type="text"  name="dose", id="dose">
            </td>
            <td>
                <input type="text"  name="duration" id="duration">
            </td>
            <td>
                <div >
                    <input  type="checkbox" id="morning" name="morning">
                    <label  for="morning">Morning</label>
                </div>
                <div >
                    <input  type="checkbox" id="afternoon" name="afternoon">
                    <label  for="afternoon">Afternoon</label>
                </div>
                <div >
                    <input  type="checkbox" id="evening" name="evening">
                    <label  for="evening">Evening</label>
                </div>
                <div >
                    <input  type="checkbox" id="night" name="night">
                    <label  for="night">Night</label>
                </div>
                <div >
                    <input  type="checkbox" id="sos" name="sos">
                    <label  for="sos">SOS</label>
                </div>
            </td>
            <td>
                <button  type="button" id="qty" onclick="addItem({'dose':document.getElementById('dose').value,'quantity':document.getElementById('duration').value,'name':'{{item.item_name}}','code':this.name,'usage':{'morning':document.getElementById('morning').checked,'afternoon':document.getElementById('afternoon').checked,'evening':document.getElementById('evening').checked,'night':document.getElementById('night').checked,'sos':document.getElementById('sos').checked} })"></button>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

Below is the simple JS script that I'm using

    function addItem(dataToAdd){
        console.log(dataToAdd);
        dataToAdd['price']=dataToAdd['price'];
        dataToAdd['total']=dataToAdd['price']*dataToAdd['quantity'];
    }

CodePudding user response：

In your template you have rows like

<input type="text"  name="dose", id="dose">

It seems that each input does not have its unique id, so when you click the button on any row you get the same result. The solution could be modifying backend part with something like this:

<input type="text"  name="dose", id="{{ item.somedoseid }}">

CodePudding user response：

Another solution may be with pure JS only (if it is more convenient or as an example):

<button  type="button" id="qty" onclick="
addItem({
'dose':this.parentNode.parentNode.children[1].firstElementChild.value,
'quantity':this.parentNode.parentNode.children[2].firstElementChild.value,
'name':'{{item.item_name}}',
'code':this.name,
'usage':{'morning':this.parentNode.parentNode.children[3].children[0].firstElementChild.checked,
'afternoon':this.parentNode.parentNode.children[3].children[1].firstElementChild.checked,
'evening':this.parentNode.parentNode.children[3].children[2].firstElementChild.checked,
'night':this.parentNode.parentNode.children[3].children[3].firstElementChild.checked,
'sos':this.parentNode.parentNode.children[3].children[4].firstElementChild.checked} })">BtnText</button>