Thymeleaf change button on submit with javascript

Question

I have a table with students, and each student a button buttonStud. To access these buttons I gave them an individual id of the button name + student id using thymeleaf th:id="'buttonStud'+${student.studentId}" Now after I click this button (which is a submit button, inside a form) I want it to change its text.. I wrote this javascript function to change the button, and I pass it the student Id to change the correct button

                        function changeButton(studentId) {
                             btn = document.getElementById("'buttonStud'+studentId");
                             btn.innerHTML = 'some text...';
                             btn.disabled=true;
                        }

And I think this function will get triggered when I press the submit button (buttonStud button) so I've made a th:onsubmit for the <form>,

<form action="/action" object=student method="POST" th:onsubmit="|changeButton('*{student.studentId}');|" />

But it is not working, console says "Cannot set property 'innerHTML' of null". and I think the problem is with the thymeleaf's inside the form. What is the correct thymeleaf writing?

I've checked the console and the name for the button is put corectly, the function is called after i press submit, but i cannot get the element id in document.getElementById("'buttonStud'+studentId");- it says its null How should I write it correctly?

Jamven · Accepted Answer · 2021-08-26 06:27:33Z

1

The problem realtes actually to Javascript, not Thymeleaf. The reason for the null reference is a wrong selector. It should be document.getElementById('buttonStud'+studentId);. Note the missing double quotes.

The reason would be that JS dosen't use double quotes to do string interpolation in "'buttonStud'+studentId" so the result of that would be literally the characters 'buttonStud'+studentId instead of expected result of buttonStud1.

answered Aug 26, 2021 at 6:27

Jamven

5134 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Thymeleaf change button on submit with javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related