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!

Matthias S · Answer 1 · 2020-05-19T14:46:42.497

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.

edited May 19 '20 at 14:46

answered May 19 '20 at 09:24

Matthias S

3,358
3
21
31

so this reply is wrong, even if its marked as solution https://stackoverflow.com/questions/4853563/how-do-i-submit-a-form-with-a-li-instead-of-a-submit-button – JahStation May 19 '20 at 09:51
change done, but same error to me: "Uncaught SyntaxError: Invalid or unexpected token" – JahStation May 19 '20 at 09:53
Look, usually you don't downvote an answer even if it is not solving your problem. See here: https://stackoverflow.com/help/privileges/vote-down I thought the issue was that the form is not sent. So I looked it up and found this https://stackoverflow.com/questions/9855656/how-to-submit-a-form-using-javascript - and then figured the issue would be with setting ID instead of name. Now it's obvious the problem was not that the form was not sent but a server-side error. – Matthias S May 19 '20 at 12:18
exuse me for down votes, but its not unsefull what u said is wrong, its work even by id, so for this i down vote. if im wrong too...apologise. thanks anyway for your contribution. – JahStation May 19 '20 at 12:25
1

I just wanted to let you know. Downvoting is not meant to be used when the answer is wrong. If you do that, you disencourage people from helping you. And also, you lose your own reputation points by downvoting. The part about CSRF is still true, so I think "not useful" is debatable. – Matthias S May 19 '20 at 14:43

score 0 · Accepted Answer · answered May 19 '20 at 10:10

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()">' +

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

2 Answers2