如何将 <input> 值传递给 Laravel 中的控制器？答案

【问题标题】：How can I pass <input> value into controller in Laravel?如何将 <input> 值传递给 Laravel 中的控制器？
【发布时间】：2021-05-27 03:04:22
【问题描述】：

我有一个用作下拉菜单的自定义输入字段，它的工作方式如下：

每个选项都是一个<input> 字段，我需要将此输入的值传递给控制器。 <input> 看起来像这样：

<!-- Updated -->
<label for="United States">United States</label>
<input type="radio" class="radio" id="United States" name="country" value="United States">

当用户按下继续按钮时，我希望将 <input> 的值传递给我的控制器：WelcomeController。

-- 更新了-- 我的控制器方法如下所示：

public function countrySelect(Request $request)
{
    $country = $request->input('country');

    dd($country);
}

这是输入的基本代码结构 - 我想我应该使用表单，因此在 web.php 中创建了一个路由：

Route::post('/', [\App\Http\Controllers\WelcomeController::class, 'countrySelect'])->name('CS');

并且输入应该具有value 属性：

<!-- Updated -->
<form action="{{ route('CS') }}" method="POST">
    
    <input name="country" value="[COUNTRY Value]">

    <button type="submit"> CONTINUE </button>
</form>

我的控制器中的countrySelect 方法是空的，那么如何将<input> 的值传递给它呢？谢谢！

我的完整表格：

<form action="{{ route('CS') }}" method="POST">
    @csrf
    <div class="country-select-container">
        <div class="country-align-container">
            <div class="CountryInput">
                <div class="select-box">
                    <div class="options-container">
                        <div class="option">
                            <label for="United States">United States</label>
                            <input type="radio" name="country" value="United States">
                        </div>

                        <div class="option">
                            <label for="United Kingdom And Ireland">United Kingdom And Ireland</label>
                             <input type="radio" class="radio" id="United Kingdom And Ireland" name="country" value="United Kingdom And Ireland">
                        </div>

                        <div class="option">
                            <label for="Philippines">Philippines</label>
                            <input type="radio" name="country" value="Philippines">
                        </div>

                        <div class="option">
                            <label for="India">India</label>
                            <input type="radio" name="country" value="India">
                        </div>

                        <div class="option">
                            <label for="Indonesia">Indonesia</label>
                            <input type="radio" name="country" value="Indonesia">
                        </div>

                        <div class="option">
                            <label for="Malaysia">Malaysia</label>
                            <input type="radio" name="country" value="Malaysia">
                        </div>

                        <div class="option">
                            <label for="Mexico">Mexico</label>
                            <input type="radio" name="country" value="Mexico">
                        </div>

                        <div class="option">
                            <label for="Singapore">Singapore</label>
                            <input type="radio" name="Singapore">
                        </div>

                        <div class="option">
                            <label for="Germany">Germany</label>
                            <input type="radio" name="country" value="Germany">
                        </div>

                        <div class="option">
                            <label for="Brazil">Brazil</label>
                            <input type="radio" name="country" value="Brazil">
                        </div>

                        <div class="option">
                            <label for="Canada">Canada</label>
                            <input type="radio" name="country" value="Canada">
                        </div>

                        <div class="option">
                            <label for="Italy">Italy</label>
                            <input type="radio" name="country" value="Italy">
                        </div>

                        <div class="option">
                            <label for="Colombia">Colombia</label>
                            <input type="radio" name="country" value="Colombia">
                        </div>

                        <div class="option">
                            <label for="Australia">Australia</label>
                            <input type="radio" name="country" value="Australia">
                        </div>

                        <div class="option">
                            <label for="South Africa">South Africa</label>
                            <input type="radio" name="country" value="South Africa">
                        </div>

                        <div class="option">
                            <label for="France">France</label>
                            <input type="radio" name="country" value="France">
                        </div>

                        <div class="option">
                            <label for="Pakistan">Pakistan</label>
                            <input type="radio" name="country" value="Pakistan">
                        </div>

                        <div class="option">
                            <label for="Bangladesh">Bangladesh</label>
                            <input type="radio" name="country" value="Bangladesh">
                        </div>

                        <div class="option">
                            <label for="Spain">Spain</label>
                            <input type="radio" name="country" value="Spain">
                        </div>

                        <div class="option">
                            <label for="United Arab Emirates">United Arab Emirates</label>
                            <input type="radio" name="country" value="United Arab Emirates">
                        </div>

                        <div class="option">
                            <label for="Netherlands">Netherlands</label>
                            <input type="radio" name="country" value="Netherlands">
                        </div>

                        <div class="option">
                            <label for="Sri Lanka">Sri Lanka</label>
                            <input type="radio" name="country" value="Sri Lanka">
                        </div>

                        <div class="option">
                            <label for="Russia">Russia</label>
                            <input type="radio" name="country" value="Russia">
                        </div>

                        <div class="option">
                            <label for="Trinidad & Tobago">Trinidad & Tobago</label>
                            <input type="radio" name="country" value="Trinidad & Tobago">
                        </div>

                        <div class="option">
                            <label for="Saudi Arabia">Saudi Arabia</label>
                            <input type="radio" name="country" value="Saudi Arabia">
                        </div>

                        <div class="option">
                            <label for="Thailand">Thailand</label>
                            <input type="radio" name="country" value="Thailand">
                        </div>

                        <div class="option">
                            <label for="Peru">Peru</label>
                            <input type="radio" name="country" value="Peru">
                        </div>

                        <div class="option">
                            <label for="New Zealand">New Zealand</label>
                            <input type="radio" name="country" value="New Zealand">
                        </div>

                        <div class="option">
                            <label for="Vietnam">Vietnam</label>
                            <input type="radio" name="country" value="Vietnam">
                        </div>

                        <div class="option">
                            <label for="Japan">Japan</label>
                            <input type="radio" name="country" value="Japan">
                        </div>

                        <div class="option">
                            <label for="Egypt">Egypt</label>
                            <input type="radio" name="country" value="Egypt">
                        </div>

                        <div class="option">
                            <label for="Argentina">Argentina</label>
                            <input type="radio" name="country" value="Argentina">
                        </div>

                        <div class="option">
                            <label for="Other">Other...</label>
                            <input type="radio" name="country" value="Other...">
                        </div>
                    </div>

                    <div class="selected">
                        Select Country To Continue:
                    </div>
                </div>
            </div>
        </div>

        <div class="guest-action-container">
            <div class="go-back-container">
                <div class="go-back-btn">
                    <span class="go-back">
                        <span class="go-back-icon"></span>
                        <span class="go-back-text">BACK</span>
                    </span>
                </div>
            </div>

            <div class="continue-to-site-container">
                <div class="continue-to-site-btn">
                    <button type="submit" class="continue-to-site">
                        <span class="continue-text">CONTINUE</span>
                        <span class="continue-icon"></span>
                    </button>
                </div>
            </div>

            <div class="clearFix"></div>
        </div>
    </div>
</form>

这里是创建下拉效果的JS：

// country select drop down
$(document).ready(function(){
    // country select options
    const selected = document.querySelector(".selected");
    const optionsContainer = document.querySelector(".options-container");
    const optionsList = document.querySelectorAll(".option");

    selected.addEventListener("click", () => {
        optionsContainer.classList.toggle("active");
    });

    optionsList.forEach( o => {
        o.addEventListener("click", () => {
            selected.innerHTML = o.querySelector("label").innerHTML;
            optionsContainer.classList.remove("active");
        });
    });
});

【问题讨论】：

@TimLewis 我已经进行了这些更改，但是当我dd($request->input('country')) 时，我返回了一个空值。我已经更新了代码以显示我现在拥有的内容
@TimLewis 我在那里更新了
所以现在您有两个名称为country 的输入，您想将哪一个发送到控制器？此外，第二个input 可能应该是<input type="hidden" name="country" value="">，当您单击一个单选选项时，我们的 JS 将其更新为value="{js logic to set value to 'United States'}"，那么它应该可以工作（至少我是这样处理的）。跨度>
啊，好吧，您发布代码的方式看起来像是两个单独的输入，但在您的更新中，情况并非如此。当您选择一个radio 时，它应该在那个<input> 上设置checked，这应该将值发送到控制器。如果这没有发生，您可能有一些 JS 会干扰它。旁注，尝试发布完整的代码，或者从一开始就发布准确的 sn-p :)
@TimLewis 我想通了，谢谢！

标签： php laravel

【解决方案1】：

首先更改表单的代码：

<form action="{{ route('CS') }}" method="POST">
    
    <input value="country">

    <button type="submit"> CONTINUE </button>
</form

到

<form action="{{ route('CS') }}" method="POST">
    @csrf
    <input value="country" name="country">

    <button type="submit"> CONTINUE </button>
</form>

我希望您能看到不同之处。在 laravel 中使用表单时，您必须使用 csrf 令牌，否则我将无法工作。之后在你的控制器中写：

public function handleSubmission(Request $request)
{
   $country = $request->input('country');
}

【讨论】：

编辑和使用代码插入代替sn-p，它不像它的laravel那样工作
我已经在使用@csrf，我已将完整表格添加到问题中
你得到了什么作为输出？

【解决方案2】：

为了将输入的值传递给您的控制器，您应该首先在输入中添加一个“名称”参数，然后在您的 web.php 文件中添加一个 POST 路由，该路由调用控制器中应该调用的方法获取值。最后使用 request('name-of-input') 应该返回值。

例子：

查看：

<form action="/user" class="admin-form" method="POST">
            @csrf
            <label for="form-name">Name: </label>
            <input type="text" id="form-name" name="name" required>

            <label for="form-email">Email: </label>
            <input type="email" id="form-email" name="email" required>

            <input id="form-submit" type="submit" value="Sign up!">
 </form>

web.php：

Route::post('/user', 'App\Http\Controllers\UserController@store');

控制器：

    public function store(Request $request)
{
    $user = new User();
    $user->name = request('name');
    $user->email = request('email');
    $user->save();
    return redirect('/user/create');
}

【讨论】：

这不起作用，请参阅我更新的问题
@RossCurrie 您是否使用表单发送 Post 请求？如果你不使用表单，你应该使用 AJAX，但在这种情况下，一个表单就足够了
是的，我正在使用表单，我将使用完整代码更新问题

【解决方案3】：

您需要在输入字段中包含name 属性，如下所示：

<form action="{{ route('CS') }}" method="POST">
    
    <input name="country" value="country">

    <button type="submit"> CONTINUE </button>
</form

然后在控制器操作中，您可以像这样引用name 字段：

public function handleSubmission(Request $request)
{
   $country = $request->input('country');
}

【讨论】：

对于查询参数，将它们作为/url/path?query_param=value传递，并使用$request->query('query_param')检索它们
$request->input() 将适用于GET（查询字符串）和POST 检索输入的方法:)
这与蒂姆的回复@elchroy 相同，请参阅我更新的问题