Develop Reference

updating values in django template in html input?

I am making a shopping cart. I want to update the value as the user updates the input field.
Here is my code:
<tr>
<th scope="row">1</th>
<td>${object['name']}</td>
<td>
<input type="number" value=1 id=${object['id']}>
</td>
<td>${object['price']*this.value}</td>
</tr>
The input field has a default value of 1. In the last tag, I am multiplying value by the price. I am using "this" keyword because I want to apply the multiplied amount to the same row.
It doesn't give me any error but it just prints "NaN" in the table not the figure.

React-table - problem with rendering checkboxes on 'next' click

I am working with react-table and one of my column cotains checkboxes. I render that column with such a code:
Cell: props => (
<label className="switch">
<input id="for_all" className="input_switch" type="checkbox" defaultChecked={props.value}/>
<span className="slider round"></span>
</label>
)
But the problem is that when I click on "Next", checkboxes are not "marked" based on the their value in coresponding props (props.value), but it is kept the same as it was in the same row (in 10 row view, 11th checkbox will be the same as it was in the 1st row). How can I fix that?

I solved that issue by adding another parameter to the input field:
checked={props.value}

I have multiple select with sequential ids, how can I reference one of them in jquery?

I have a form where the user presses a button and dynamically generates a row of a table, which has 3 columns.
Each generated row is added to the table and has the following form:
<tr id="1" class="">
<td>
<select id="cmb_articulo_1" name="articulo[]">
</td>
<td>
<input type="text" id="txtcantidad_1" name="txtcantidad[]">
</td>
<td>
<input type="text" id="txtprecio_1" name="txtprecio[]">
</td>
<td>
<select id="cmb_descuento_1" name="descuento[]">
</td>
</tr>
Each element of the generated row is added a sequential corresponding to the generated row (id="cmb_articulo_1", id="cmb_articulo_2", id="cmb_articulo_3",..)
The user may have generated n-rows and the problem is that I have not been able to determine how to identify in which select from which row an option was chosen and how to process that option.
How to process the chosen option, has to do with when, for example, I have a select with id = "combo", I can process the chosen option with $("#combo").change(function{ . . . }), But in the situation I raise, there may be 1, 2, 5, 10, 20, etc. rows created dynamically, so I can not process the chosen option as in the previous case. I understand that there must be a way to process the chosen option in a select of any row, making a dynamic reference of that element.
Please, can you help me with these two consultations ?, from now, thank you very much.

Add a class to all <select> elements in the table:
<select class="cmb_articulo" id="cmb_articulo_1" name="articulo[]">
Then use event delegation to be able to bind dynamically inserted elements:
$(document).on('change', '.cmb_articulo', function () {
var $select = $(this);
var $row = $select.closest('tr');
var id = $row.attr('id');
// You have the ID now, do whatever you need to.
});

Auto fill form using javascript - get data from datalist

I have an autocomplete field that receives it's data from a database:
<datalist id="custlist">
<?php
$q_cust=mysql_query("select * from customer where rowstatus='0' order by id");
if (mysql_num_rows($q_cust)>0) {
while ($row=mysql_fetch_array($q_cust)){
print '<option value="'.$row['id'].'">'.$row['name'].'</option>';
}
}
?>
</datalist>
Below is my HTML for the codelist:
<tr>
<td></td>
<td><h3>Field 1</h3></td>
<td>:</td>
<td><input class="awesomplete" required="required" id="cust" name ="custnama" list="custlist" /></h3></td>
<td></td>
</tr>
The autocomplete works fine (I'm using the awesomplete widget) and when I select one of the customer names, the input 1 field will automatically show the ID of the customer.
What I want to do is having another field, let's say "input 2" that will show the customer name when the user selects the ID from the input 1 field.
Since I already stored the name as well on the data list, can I just get it from the datalist and show it in the input 2 field based on the value of input 1 using JavaScript?
If i can't do that please explain me the simplest way to get it done.

Perform an action when radio button choice is toggled

I am trying to make a form with radio button in bootstrap, such that whenever a radio button is toggled, a different form with new fields should appear subsequently:
<tr>
<td><label for="exampleInputEmail3" class="input-group">1 or 2 ? </label></td>
<td>
<select id="whatever" name="whatever" class="input-group">
<input type="radio" name="radioName" value="1" />one<br />
<input type="radio" name="radioName" value="2" />two<br />>
</select>
</td>
</tr>
If user selects option 1, form 1 needs to be displayed just below it otherwise form 2 needs to be shown.
The form 1 looks like:
<tr id="whatever_description">
<td><label for="exampleInputEmail3" class="control-label">1</label></td>
</tr>
The form 2 looks exactly the same with different label:
<tr id="whatever_description">
<td><label for="exampleInputEmail3" class="control-label">2</label></td>
</tr>

You can use Jquery to do this easily.
First you can use the .val() function to get the value of the radio button you checked.
Then you can use the hide/show functions to show the right form and hide the other.
I hope this helps you out.

First, you'll need different ID's for your table rows. Two elements cannot share the same ID. You can listen for changes with the change function and then toggle the visibility of both rows at the same time by using the comma to grab multiple selectors and then show/hide each respectively with toggle
$('input[name="radioName"]').change(function () {
$("#whatever_description1, #whatever_description2").toggle();
});
Here's a demo in fiddle
If you want more control, see get value from radio group using jquery