javascript - 通过模态中的输入字段将值发布到 Controller

Question

此代码在 Laravel 中制作按钮以删除操作。单击此按钮时，将显示模态框。但是当我单击“停止”按钮时，我无法将任何数据插入模态输入框，因为这段代码已经失效，而不是有机会插入输入文本:(

如何修改这段代码？

Laravel 中 Collective 的停止按钮

{!! Form::open(['route' => ['jobs.destroy', $job->id], 'method' => 'delete', 'class' => 'btn-group', 'id' => 'jobStop']) !!}
{!! Form::button('<i class="glyphicon glyphicon-stop"></i>', ['type' => 'submit', 'class' => 'btn btn-warning btn-xs', 'id' => 'jobStop']) !!}
{!! Form::hidden('stop_comment', $job->stop_comment, ['id' => 'jobComment']) !!}
{!! Form::close() !!}

模态框

<div class="modal fade" id="jobStopModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
          </button>
          <h4 class="modal-title">Er du sikker på å stoppe jobb?</h4>
        </div>
        <div class="modal-body">
          <p>Kommentar:</p>
          <input type="text" id="jobStopComment">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Lukk</button>
          <button type="button" id="btnSave" class="btn btn-primary">Lagre endringer</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!-- /.modal -->

Jquery

$('#jobStop').on('click', function (e) {
     $("#jobStopModal").modal("show");
});
$('#btnSave').on('click', function () {
    var newStopComment = $('input#jobStopComment').val();
    $('#jobComment').val(newStopComment);
    $('#jobStopModal').modal('hide');
});

Answer 1

您的 Javascript 正在打开模式，但在后台表单确实已提交，因此将加载表单的 action 是什么。

您需要像这样在您的 Javascript 中阻止表单提交:

$('#jobStop').on('click', function (e) {
    e.preventDefault();    // <-- prevent normal form submission
    $("#jobStopModal").modal("show");
});

此外，您还有 2 个 ID 为 jobStop 的元素。 ID 应该是唯一的，这一点在您使用它们来定位 Javascript 中的元素时尤为重要。

{!! Form::open([ ...    'id' => 'jobStop']) !!}
{!! Form::button(' ...  'id' => 'jobStopButton']) !!}

如果您更改按钮 ID，您当然需要更新您的 JS 事件处理程序:

$('#jobStopButton').on('click', function (e) {