通过 js 在 laravel 基于 bootstrap 发送表单给我一个错误

Question

我想完成这个简单的任务：

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

我的页面有点复杂，但并不难：我通过点击渲染页面上的按钮加载了一个模式，它根据一个变量的内容动态绘制，所以在我的脚本部分我是这样的：

$.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>'
                        );

这部分在 bootstrap 模态中正确呈现给我。有趣的部分：

   <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>

甚至下一个 forms/li 元素对我来说都是正确的，具有唯一 ID、令牌、url 和变量。那么为什么我得到这个：

Uncaught SyntaxError: Invalid or unexpected token

当我尝试点击特定的 "li" 元素时。

第二个问题是，我是否需要按照描述在每种形式中嵌入 "csfr" 令牌？因为我在手册上找到了这个，但我不太清楚正确的做法是什么：

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.

我在 Laravel 6.2 上使用 bootstrap.min.js。谢谢！

Answer 1

如果您只是想通过表单名称调用 submit 函数，则无需为您的表单提供 id 属性，而是需要为它提供 name。因此，如果您有 <form name="myForm">，则可以执行 myForm.submit()，如果您有 <form id="myForm">，则需要执行 getElementById('myForm').submit()。

此外，是的，如果您按照自己的方式发送表单，则需要添加 CSRF 令牌。如果您使用像 axios 这样的 HTTP 客户端，您可以为每个请求自动设置 CSRF 令牌。但是你必须以不同的方式发送你的表单，即使用 axios。

编辑：以任何方式发送表单都有效，因此它与您是否使用 id 或 name 无关。我从 How to submit a form using javascript? 那里得到了信息，但得出了错误的结论。我以为表格没有发送，但这不是问题所在。

Answer 2

经过多次测试，我发现问题是 "id" 字段中的错误：

-我的任务 ID 是数字；

所以表单的所有ID或名称都是数字。

有一个id错误的是"example"的值不是数字，这个可以发送表单！所以我所做的是在表单的 id/name 上添加一小部分，在 onclick 函数上添加同样的内容。我可以确认这对 id 或 name 有效！

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

通过 js 在 laravel 基于 bootstrap 发送表单给我一个错误

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

javascript

laravel

bootstrap-modal

csrf-token