How can I pass <input> value into controller in Laravel?

Question

I have a custom input field that acts as a drop-down menu and it works like this:

Each option is an <input> field and I need the value of this input to be passed into the controller. The <input> looks like this:

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

When the user presses the continue button, I want the value of the <input> to be passed to my controller: WelcomeController .

-- Updated -- My controller method looks like this:

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

    dd($country);
}

Here is a basic code structure of the inputs - I think I should be using a form and so have created a route in web.php :

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

And that the input should have the value property:

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

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

The countrySelect method in my controller is empty and so how do I pass the value of the <input> into it? Thanks!

---

My Full Form:

<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>

Here is the JS that creates the dropdown effect:

// 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. Finally use request('name-of-input') and that should return the value.

Example:

view:

<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

You need to include the name attribute in the input field like this:

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

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

Then in the controller action you can reference the name field like this:

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

Answer 3

start by changing the code of the form from:

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

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

to

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

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

i hope that you are seeing the difference. while using a form in laravel you must and the csrf tokem if not i will not work. After that in your controller just write:

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