我怎樣才能通過<input> Laravel 中的 controller 的值？

Question

我有一個用作下拉菜單的自定義輸入字段，它的工作方式如下：

每個選項都是一個<input>字段，我需要將此輸入的值傳遞到 controller。 <input>看起來像這樣：

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

當用戶按下繼續按鈕時，我希望將<input>的值傳遞給我的 controller: WelcomeController 。

-- 更新 -- 我的 controller 方法如下所示：

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>

我的 controller 中的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");
        });
    });
});

Answer 1

In order to pass the value of an input to your controller you should start by having a "name" parameter in your input, then a POST route, in your web.php file, that calls the method in the controller that should get the values . 最后使用 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');

controller：

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

Answer 2

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

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

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

然后在 controller 操作中，您可以像這樣引用name字段：

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

Answer 3

首先更改表單的代碼：

<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 令牌，否則我將無法工作。 之后在你的 controller 中寫：

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