如何使用Javascript在laravel的同一页面中显示输入值？答案

【问题标题】：How to show a input value in the same page in laravel using Javascript?如何使用Javascript在laravel的同一页面中显示输入值？
【发布时间】：2021-06-20 08:00:26
【问题描述】：

我正在尝试显示用户使用 id 'searchBar' 输入的年份，并在带有 javascript 的同一个 laravel 页面上的表中的表中使用 'outp' id 显示它。但它只是不起作用..

这是我的 show.blade.php

<div class="row">
                    <div class="form-group col-2">
                        <form action="" method="GET" role="search">
                            {{ csrf_field() }}
                            <div class="input-group">
                                <input type="text" class="form-control" id="seachBar" name="q" placeholder="Search year">                              
                                <button type="submit" id="btn"></button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-2">

                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th class="text-left" style="width: 5%">Data</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr scope="row">
                                        <td class="text-left">31/01/<lable id="outp"></p></td>
                                    </tr>

我已经用这个连接了 javascipt 文件：

<script src="{{ asset('js/showYear.js') }}" type="text/javascript"></script>

这是我的 javascript 文件 showYear.js ：

var year = document.getElementById('seachBar').value;


document.getElementById('btn').onclick = function showYear(year)
{
document.getElementById('outp').innerHTML = year; 
}

我是 laravel 和 javascript 的新手，我可能在 2 到 3 周前开始实习，所以我有点迷路了 :)。帮助会很棒，tkx

【问题讨论】：

你想要onkeyup 值吗？？
showYear(year){ } 传递给事件侦听器函数的第一个参数是event 对象。如果您想从输入中获取年份，请将该行代码放入事件侦听器函数中此外，由于您的按钮位于 <form> 内，您要么需要阻止默认提交操作（因为页面将导航离开）或更改其type 到 button
JavaScript 文件的第一行只会运行一次，并且不会神奇地延伸到未来。要读取实际的当前值，您需要在 inside 处理函数中读取它：jsfiddle.net/chxfpqtz（我还修复了您的无效 HTML；如果您没有使用 VS Code 或 Netbeans 之类的 IDE 或其他有你我肯定会推荐这样做）
代码 var year = document.getElementById('seachBar').value; 是否在某些 onload 函数中？如果没有，它将在加载时触发，这意味着它将在用户有机会编写任何内容之前获取输入的值。您应该在需要时获取值。至少在用户可能会更改的输入时。

标签： javascript php html laravel input

【解决方案1】：

试试下面的代码，

$(document).ready(function() {
  $("#seachBar").keyup(function() {
    $("#outp").html($(this).val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="form-group col-2">
<form action="" method="GET" role="search">
<div class="input-group">
<input type="text" class="form-control" id="seachBar" name="q" placeholder="Search year">                              
<button type="submit" id="btn">Submit</button>
</span>
</div>
</form>
</div>
</div>

<div class="row">
<div class="form-group col-2">

<div class="table-responsive">
<table class="table">
<thead>
    <tr>
        <th class="text-left" style="width: 5%">Data</th>
    </tr>
</thead>
<tbody>
    <tr scope="row">
        <td class="text-left" id="outp"></td>
    </tr>
</tbody>
</table>

【讨论】：