sending form by js on laravel based bootstrap give me an error

Question

I would like to achieve this simple task:

<form id="myForm" action="foo.htm" method="post">  
  <ul>
    <li onclick="myForm.submit();">Click me</li>
  </ul>
</form>

My page is a little bit complicated, but nothing too hard: I've a modal loaded by hitting a button on the rendered page, and its draw dynamically based on the content of one variable, so in my scripts part ive this:

$.each(tasks, function(index, task) {
                        [...]
                        VARIABLE DECLARATION PART
                         [...]                      

                        body.append('<form class=taskForm id='+taskId+' action="'+
                            '{{URL::route('dettaglioTask')}}"' +
                            ' method="Post">' +
                            '@csrf'+
                            '<li onClick="'+taskId+'.submit()">' +
                            '<div class="block">' +
                            '<div class="tags">' +
                            '<a class="tag">' +
                            '<span>'+da+'-'+mo+'-'+ye+'</span>' +
                            '</a>' +
                            '</div>' +
                            '<div class="block_content">' +
                            '<h2 class="title">' +
                            '<a>'+divStatus+'</a>' +
                            '</h2>' +
                            '<div class="byline">' +
                            '<span>'+tipo+'</span> ' +
                            '</div>' +
                            '<p class="excerpt">'+descrizione+'' +
                            '</p>' +
                            '</div>' +
                            '</div>' +
                            '</li>'+
                            '</form>'
                        );

This part is rendered correctly to me in a bootstrap modal. The interesting part:

   <ul class="list-unstyled timeline">
                            <form class="taskForm" id="1135102" action="http://localhost:8000/dettaglioTask" method="Post">
                             <input type="hidden" name="_token" value="VJQYeeHRWs222Rms1UBWxdvc7tPcBGer7xMy6iUC">
                                <li onclick="1135102.submit()">
                                    [....]
                                 </li>

Even the next forms/li element are right to me, with unique id, and token, url and variables. So why I got this:

Uncaught SyntaxError: Invalid or unexpected token

When i try to hit the specific "li" element.

The second question is, do I need to embed "csfr", token in every form as described? because i found this on the manual, but is not too clear to me what is the right way of doing it:

CSRF Tokens & JavaScript When building JavaScript driven applications, it is convenient to have your JavaScript HTTP library automatically attach the CSRF token to every outgoing request. By default, the Axios HTTP library provided in the resources/js/bootstrap.js file automatically sends an X-XSRF-TOKEN header using the value of the encrypted XSRF-TOKEN cookie. If you are not using this library, you will need to manually configure this behavior for your application.

I'm using bootstrap.min.js, on Laravel 6.2. thanks!

Answer 1

Instead of giving your form the id attribute, you need to give it a name if you simply want to call the submit function by the name of the form. So if you have <form name="myForm"> you can do myForm.submit(), if you have <form id="myForm"> you need to do getElementById('myForm').submit() instead.

Also, yes, you need to add the CSRF token if you send the form the way you do. If you use an HTTP client like axios you can set the CSRF token automatically to each request. But then you have to send your form in a different way, namely with axios.

EDIT: Sending the form works either way, so it has nothing to do with whether or not you use id or name. I got the information from How to submit a form using javascript? but drew the wrong conclusion. I assumed the form was not sending, but that was not the problem.

Answer 2

after many test I found the problem by an error of in the "id" field:

-my task ids are numeric;

So all the id or name of the form are numeric.

One id is wrong with the value of "example" instead of a number, and this one works on sending the form! So what i did is adding a little part on the id/name of the form and same thing on the onclick function. And i can confirm thats works on id or name!

'<form class=taskForm name=numero_'+taskId+' action="'+
                            '{{URL::route('dettaglioTask')}}"' +
                            ' method="Post">' +
                            '@csrf'+
                            '<li onClick="numero_'+taskId+'.submit()">' +