Can find an input value throught its id in a django generated table
I'm very new to javascript and must use it for a project in which i'm using a table and want to extract the value of an input field with id generated trough a Django function. i don't know if that could be relevent but i'm using datatable in this project.
The HTML code looks like this:
<head>
<script src="{% static 'myProject/jQuery/jquery-3.7.1.js' %}"></script>
<script src="{% static 'myProject/javaScript/datatables.min.js' %}"></script>
<script src="{% static 'myProject/javaScript/checkFunc.js' %}" defer></script>
<link rel="stylesheet" href="{% static 'myProject/CSS/checkStyle.css' %}">
<link rel="stylesheet" href="{% static 'myProject/CSS/datatables.min.css' %}">
</head>
<table id="myTable">
<thead>
<tr>
<th>Head Value</th>
<th>Another head Value</th>
</tr>
</thead>
<tbody>
{% for value in list_of_value %}
<tr>
<td><input type="number" id="amount{{ value.id }}" value="1"></td>
<td><button onclick="check(value.id)">Check input box</button></td>
</tr>
{% endfor %}
</tbody>
</table>
And the JS like this:
function check(value_id){
const amount= document.getElementById("amount"+wallet_id);
console.debug(amount);
}
In the console all i get is "null" as if it doesn't exist but i tried modifying it with CSS and it worked just fine. I also tried using jQuery as so:
function check(value_id){
var actionTable = $("#amount" + value_id +"");
console.debug(actionTable);
console.debug(actionTable.value);
}
And on this one i don't get a null i get an object:
Object { }
<prototype>: Object { jquery: "3.7.1", constructor: jQuery(selector, context)
, length: 0, … }
DataTable: function DataTable(e)
add: function add(selector, context)
addBack: function addBack(selector)
addClass: function addClass(value)
after: function after()
ajaxComplete: function type(fn)
ajaxError: function type(fn)
ajaxSend: function type(fn)
ajaxStart: function type(fn)
ajaxStop: function type(fn)
ajaxSuccess: function type(fn)
animate: function animate(prop, speed, easing, callback)
append: function append()
appendTo: function name(selector)
attr: function attr(name, value)
before: function before()
bind: function bind(types, data, fn)
blur: function name(data, fn)
change: function name(data, fn)
children: function name(until, selector)
clearQueue: function clearQueue(type)
click: function name(data, fn)
clone: function clone(dataAndEvents, deepDataAndEvents)
closest: function closest(selectors, context)
constructor: function jQuery(selector, context)
contents: function name(until, selector)
contextmenu: function name(data, fn)
css: function css(name, value)
data: function data(key, value)
dataTable: function V(e, P)
dataTableExt: Object { buttons: {}, builder: "dt/dt-2.2.2", errMode: "alert", … }
dataTableSettings: Array [ {…} ]
dblclick: function name(data, fn)
delay: function delay(time, type)
delegate: function delegate(selector, types, data, fn)
dequeue: function dequeue(type)
detach: function detach(selector)
each: function each(callback)
empty: function empty()
end: function end()
eq: function eq(i)
even: function even()
extend: function extend()
fadeIn: function name(speed, easing, callback)
fadeOut: function name(speed, easing, callback)
fadeTo: function fadeTo(speed, to, easing, callback)
fadeToggle: function name(speed, easing, callback)
filter: function filter(selector)
find: function find(selector)
finish: function finish(type)
first: function first()
focus: function name(data, fn)
focusin: function name(data, fn)
focusout: function name(data, fn)
get: function get(num)
has: function has(target)
hasClass: function hasClass(selector)
height: function funcName(margin, value)
hide: function name(speed, easing, callback)
hover: function hover(fnOver, fnOut)
html: function html(value)
index: function index(elem)
init: function init(selector, context, root)
innerHeight: function funcName(margin, value)
innerWidth: function funcName(margin, value)
insertAfter: function name(selector)
insertBefore: function name(selector)
is: function is(selector)
jquery: "3.7.1"
keydown: function name(data, fn)
keypress: function name(data, fn)
keyup: function name(data, fn)
last: function last()
length: 0
load: function load(url, params, callback)
map: function map(callback)
mousedown: function name(data, fn)
mouseenter: function name(data, fn)
mouseleave: function name(data, fn)
mousemove: function name(data, fn)
mouseout: function name(data, fn)
mouseover: function name(data, fn)
mouseup: function name(data, fn)
next: function name(until, selector)
nextAll: function name(until, selector)
nextUntil: function name(until, selector)
not: function not(selector)
odd: function odd()
off: function off(types, selector, fn)
offset: function offset(options)
offsetParent: function offsetParent()
on: function on(types, selector, data, fn)
one: function one(types, selector, data, fn)
outerHeight: function funcName(margin, value)
outerWidth: function funcName(margin, value)
parent: function name(until, selector)
parents: function name(until, selector)
parentsUntil: function name(until, selector)
position: function position()
prepend: function prepend()
prependTo: function name(selector)
prev: function name(until, selector)
prevAll: function name(until, selector)
prevUntil: function name(until, selector)
promise: function promise(type, obj)
prop: function prop(name, value)
push: function push()
pushStack: function pushStack(elems)
queue: function queue(type, data)
ready: function ready(fn)
remove: function remove(selector)
removeAttr: function removeAttr(name)
removeClass: function removeClass(value)
removeData: function removeData(key)
removeProp: function removeProp(name)
replaceAll: function name(selector)
replaceWith: function replaceWith()
resize: function name(data, fn)
scroll: function name(data, fn)
scrollLeft: function method(val)
scrollTop: function method(val)
select: function name(data, fn)
serialize: function serialize()
serializeArray: function serializeArray()
show: function name(speed, easing, callback)
siblings: function name(until, selector)
slice: function slice()
slideDown: function name(speed, easing, callback)
slideToggle: function name(speed, easing, callback)
slideUp: function name(speed, easing, callback)
sort: function sort()
splice: function splice()
stop: function stop(type, clearQueue, gotoEnd)
submit: function name(data, fn)
text: function text(value)
toArray: function toArray()
toggle: function name(speed, easing, callback)
toggleClass: function toggleClass(value, stateVal)
trigger: function trigger(type, data)
triggerHandler: function triggerHandler(type, data)
unbind: function unbind(types, fn)
undelegate: function undelegate(selector, types, fn)
uniqueSort: function uniqueSort()
unwrap: function unwrap(selector)
val: function val(value)
width: function funcName(margin, value)
wrap: function wrap(html)
wrapAll: function wrapAll(html)
wrapInner: function wrapInner(html)
Symbol(Symbol.iterator): function values()
<prototype>: Object { … }```
**but** that object don't have a value and don't seems to be corresponding to my input field.
So my question is is there something i don't understand or am I doing something wrong ? And if so how do i do it right ?