【问题标题】:Make a text box automatically fill depending on drop-down selection (Laravel and Javascript help!)根据下拉选择自动填充文本框(Laravel 和 Javascript 帮助!)
【发布时间】:2016-03-10 17:44:27
【问题描述】:

我希望根据用户从同一页面的下拉列表中选择的内容自动填充页面中的一些文本框。

就像,如果用户做出选择,然后自动填充数据库中的相关信息。然后如果用户更改选择,动态更新和更改文本框中的信息以匹配选择。

到目前为止,如果我对选择进行硬编码,我所能做的就是显示一些数据库文本(当然,无论用户做什么,都会显示相同的内容)。

假设我正在从数据库中名为 info_description 的特定字段中提取一些信息:

$fill = \DB::table('tbl_information')->where('id', 1)->pluck('info_description');

像这样传递给blade.php文件:

return view('pages.information')
        ->with('fill', $fill);

我的 Blade.php 文件中有以下内容

<div class="form-group">
    <label class="col-md-4 control-label">app method</label>
    <div class="col-md-6 input-group-sm">
        {!! Form::text('text', $fill) !!}
    </div>
</div>

我想我需要一些 JavaScript 来帮助我解决这个问题,但我完全不知道如何去做。如果有人可以指导我,我真的可以使用一些帮助和指导。

我怎样才能做到这一点?

【问题讨论】:

  • 当用户选择其中任何一个时,您想为id 1,2,3,4..等拉取info_description
  • 是的,就是这样!并自动填充文本框,无需刷新页面

标签: javascript php laravel


【解决方案1】:

这应该会给你一个良好的开端。

route.php

Route::get('/infos/{id}', 'InfoController@getInfo');

InfoController.php

public function getInfo($id)
{
  $fill = \DB::table('tbl_information')->where('id', $id)->pluck('info_description');

  return Response::json(['success'=>true, 'info'=>$fill]);
}

app.js

$("#info_id").change(function() {
  $.ajax({
    url: '/info/' + $(this).val(),
    type: 'get',
    data: {},
    success: function(data) {
      if (data.success == true) {
        $("#info_id").value = data.info;
      } else {
        alert('Cannot find info');
      }

    },
    error: function(jqXHR, textStatus, errorThrown) {}
  });
});

HTML

<select name="info_id" id="info_id">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<textarea name="info_area" id="info_area" cols="30" rows="10"></textarea>

【讨论】:

  • 谢谢。我会尝试一下。这是我的第一个 laravel 项目,目前我还没有 JavaScript 文件。我应该在哪个文件夹中创建一个?
  • 您可以在此处添加您的文件。 public/js/app.js 您必须在公用文件夹中为 js 创建一个文件夹..
  • 这绝对对我有帮助,我已经投了赞成票,但我还没有足够的代表点来显示它
猜你喜欢
  • 2019-06-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-10-31
  • 1970-01-01
  • 1970-01-01
  • 2014-05-24
相关资源
最近更新 更多