Javascript:捕获在 Laravel 应用程序的表单操作字段中使用的值

Question

我有一个带有 Javascript 函数的 Laravel 应用程序，它捕获一些数据，我用这些数据动态填充模式框。

$(function() {
    $('#edit-auction-modal').on("show.bs.modal", function (e) {
     var auctionId = $(e.relatedTarget).data('id');
     console.log(auctionId);
     //auctionId has the correct value for the selected auction. This needs to be used in the View file
    });
});

在 View 文件中，我有一个带有表单的模式框(用于更新字段)。

<div id="edit-auction-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="panel panel-info">
                  <div class="panel-heading">
                    <div class="panel-title" id="auctionLabel"></div>
                  </div>
                </div>
                <div class="modal-body edit-content" style="padding-top:10px">
                     <form method="POST" action="{!! route('admin_auctions_update', ['id' => auctionId ]) !!}">
                      {{ csrf_field() }}
                      {{ method_field('PUT') }}
                      ....
                     </form>

使用上述代码，当它尝试发送到“auctions/auctionId/update”而不是“auctions/1/update”或“auctions/2/update”时，不会更新任何内容

如何更改此设置以便我可以在我的 View 中使用auction0id(来自JS文件)的值？

我认为应该很简单，但我的 JS 技能低于平均水平......

Answer 1

你可以尝试这样的事情:

$(function() {
    $('#edit-auction-modal').on("show.bs.modal", function (e) {
        var auctionId = $(e.relatedTarget).data('id');
        var pattern = /(auctions\/)(.+)(\/update)/;
        var action = $('form').attr('action');
        $('form').attr('action', action.replace(pattern, "$1" + auctionId + "$3"));
    });
});

<小时/>

说明:

View 在服务器端处理，并定义最初发送到浏览器的 html。在此之后您将不再运行任何 PHP 代码。由于 auctionId 仅作为客户端事件的结果而存在，因此修改 action 属性的唯一工具是 JavaScript。

因此，在 View 中您只需包含 JS 脚本，我假设您已经包含了。另外，您可以将原始操作写为 {!! route('admin_auctions_update', ['id' => 0 ]) !!} (0 作为某些默认占位符值)。

最后是正则表达式说明:括号定义捕获组，然后您可以按数字访问它们。因此，第一个包含要替换的 id 之前的字符串内容，第二个包含 id 本身，第三个包含字符串的其余部分。