如何将表单文本输入发送到console.log?

时间:2018-01-18 07:36:32

标签: jquery ajax laravel-5.5

我有一个有三个字段的表单。我现在需要将用户键入的信息发送到console.log。这是可能的,如果是的话,我会写什么?

modal.blade.php

<!-- Modal -->
<div class="modal fade" id="level-show" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Level</h4>
            </div>
            <form action="{{ route('postInsertLevel') }}" method="POST" id="form-level-create">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <select name="program_id" id="program_id" class="form-control">

                            </select>
                            <br>
                            <input type="text" name="level" id="new-level" class="form-control" placeholder="Level">
                            <br>
                            <input type="text" name="description" id="new-description" class="form-control" placeholder="Description level">
                        </div>
                    </div>
                </div>
            </form>
            <div class="modal-footer">
                <button type="submit" class="btn btn-success btn-save-level">Save changes</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

的script.js

    $('#level-click').on('click', function(){
        var programs = $('#program_id option');
        var program = $('#form-level-create').find('#program_id');
        $(program).empty();
        $.each(programs, function(i, pro) {
            $(program).append($("<option>",{
                value : $(pro).val(),
                text : $(pro).text()
            }))
        })
        $('#level-show').modal();
    });
    $('#form-level-create').on('submit', function(e){
        e.preventDefault();
        var data = $(this).serialize();
        var url = $(this).attr('action');
        $.post(url, data, function(data){
            console.log(data)
        })
    });

TestController.php

public function postInsertLevel(Request $request)
    {
        if ($request->ajax())
        {
            return response(Level::create($request->all()));
        }
    }

路由/ web.php

Route::post('/manager/course/insert-level', ['as' => 'postInsertLevel', 'uses' => 'CourseController@postInsertLevel']);

但我尝试显示console.log,我看到了:

Console.log

2 个答案:

答案 0 :(得分:0)

我不知道我是否理解你想要的东西但是,这是你想要做的?

&#13;
&#13;
function print(){
  var choice = document.getElementById('1').value;
  document.getElementById('2').innerHTML = choice;
  console.log(choice);
  return false;
}
&#13;
<form>
  <select id="1">
    <option>Banana
    <option>Apple
    <option>Orange
  </select>
  <input type="submit" value="Save" onclick="return print();">
</form>
<p id="2"></p>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

你为什么要通过Laravel路由?您只需在客户端JavaScript中添加事件侦听器即可获得&#39; keyup&#39;到你的表单字段和console.log事件有效负载。

另外,为什么不使用服务器端日志记录?例如,控制器中的logger($input)