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

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

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

Answer 2

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 3

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