I am currently building a web app with flask. In a table, I want to create buttons that get assigned the value of an input field, but in a table created with jinja. Normaly this would have been possible with this code but since it is a jinja table I can't find a way to do this. Can anybody help?
<tbody>
{% for itemname in itemnames%}
<tr>
<td class="text-start"><button class="item btn" type="submit" name="item" value="{{itemname.name}}">{{itemname.name}}</button></td>
<td class="text-start"><input autocomplete="off" autofocus class="form-control mx-auto w-auto" id="{{itemname.amount}}" name="amount" placeholder={{itemname.amount}} value="{{itemname.amount}}" type="text"></td>
<td class="text-start"><button class="btn btn-success" type="submit" name="add" onclick="getInputValue();">+</button></td>
</tr>
<script>
function getInputValue() {
// Selecting the input element and get its value
var inputVal = document.getElementById("{{itemname.amount}}").value;
// Displaying the value
alert(inputVal);
}
</script>
{% endfor %}
</tbody>
Edit, removed the first way
https://www.w3schools.com/js/js_htmldom_navigation.asp
Use dom navigation starting from the button to the input
<td class="text-start"><input autocomplete="off" autofocus class="form-control mx-auto w-auto" id="{{itemname.amount}}" name="amount" placeholder={{itemname.amount}} value="{{itemname.amount}}" type="text"></td>
<td class="text-start"><button class="btn btn-success" type="submit" name="add" onclick="getInputValue(this);">+</button></td>
function getInputValue(e) {
var input = e.previousSibling.value
alert(input)
</script>