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");
        });
    });
});

@TimLewis I have made these changes, but when I dd($request->input('country')), I get a null returned. I have updated the code to show what I have now — RC07JNR
– RC07JNR, Commented May 25, 2021 at 19:53
So now you have two inputs with the name country, which one are you trying to send to the Controller? Also, the 2nd input should probably be <input type="hidden" name="country" value="">, and when you click a radio option, us JS to update that to value="{js logic to set value to 'United States'}", then it should work (at least that's how I'd approach this). — Tim Lewis
– Tim Lewis, Commented May 25, 2021 at 20:01
Ah ok, so the way you posted your code, it looked like two separate inputs, but in your update, that isn't the case. When you select a radio, it should set checked on that <input>, which should send the value to the Controller. If that isn't happening, you might have some JS that is interfering with that. Sidenote, try to post the full code, or an accurate snippet from the start :) — Tim Lewis
– Tim Lewis, Commented May 25, 2021 at 20:43

U. Windl · Accepted Answer · 2023-08-10 22:14:05Z

1

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 add the csrf token, if not it will not work. After that in your controller just write:

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

edited Aug 10, 2023 at 22:14

U. Windl

4,74839 silver badges65 bronze badges

answered May 25, 2021 at 20:05

archille gael

801 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gonzalo F S Over a year ago

edit and use code insertion instead of snippet, it does not work as its laravel

RC07JNR Over a year ago

I was already using @csrf, I've added my full form to the question

archille gael Over a year ago

what did you get as a output for this?

Gonzalo F S · Accepted Answer · 2021-05-25 19:46:22Z

0

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');
}

answered May 25, 2021 at 19:46

Gonzalo F S

4083 silver badges9 bronze badges

3 Comments

RC07JNR Over a year ago

That didn't work, see my updated question

Gonzalo F S Over a year ago

@RossCurrie are you using a form to send the Post request? if you dont use a form you should use AJAX, but in this case a form would be enough

RC07JNR Over a year ago

Yes I am using a Form, I will update question with full code

elchroy · Accepted Answer · 2021-05-25 19:46:32Z

0

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');
}

answered May 25, 2021 at 19:46

elchroy

1026 bronze badges

3 Comments

elchroy Over a year ago

For query parameters, pass them as /url/path?query_param=value, and retrieve them with $request->query('query_param')

Tim Lewis Over a year ago

$request->input() will work for both GET (query string) and POST methods to retrieve input :)

RC07JNR Over a year ago

That was the same as Tim's response @elchroy, see my updated question

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related