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

通过Modal中的输入字段将值发布到控制器

1 个答案: