I'm working on a big form with a lot of inputs and select fields. I send the post request with axios and I'm using FormData() object with append method for all of the fields.
Everything is fine, just the data I receive in my controller is not what I actually expect. I mean, this is the example of one of the select field:
<select onChange={this.props.handleSelect} name="select1">
<option value="default">Choose your option</option>
<option value="1">Something</option>
<option value="2">Else</option>
<option value="3">Whatever</option
</select>
I set state of the Form with setState:
setState({ select1: target.options[target.selectedIndex].innerText });
So the state is "select1": "Whatever" (The point is, I'm not using the value from that field)
Then I append this select field before the request like this:
const formData = new FormData();
formData.append('select1', this.state.select1);
And after the post request, in my laravel controller I try to dd() with request all and get this:
"select1": "3"
So the data is sent without any problem, but I just receive the numeric value of selected option, not the text I try to send. Maybe I've just misunderstood something, so if it's the case, please, let me know.
Thanks in advance.
Related
I want to get the value of this input.
<input type="text" name="txtEmployeeNo" value='{{ $employee->employee_no }}'>
Its value is 53210. How can I get that in my controller?
I currently have this on my controller.
$employeeNum = $request->input('txtEmployeeNo');
$employeeSched = Schedule::where(['employee_no'=>$employeeNum])->get();
return view('admin.employeemaintenance.createSchedule',compact(,'employeeSched'));
The problem is when I open and see if it is fetched nothing is showing. I cannot get the input.
Try this, It should must work.
$employeeNum = (isset($request['txtEmployeeNo'])) ? $request['txtEmployeeNo'] : 0;
$employeeSched = Schedule::where(['employee_no'=>$employeeNum])->get();
return view('admin.employeemaintenance.createSchedule',$employeeSched);
In your controller insert this line after opening your function:
dd($request->all);
It will show you everything that has been posted through your form with values. If you get your 'txtEmployeeNo' without value, it means something went wrong when you insterted it in your input.
Check with dev tools if that specific input has any value.
If your input has the value you mentioned and your $request->all() still shows an empty value for your "txtEmployeeNo", then the error is in the HTML/Blade file.
Make sure you create the form correctly
Make sure your input's name equals with the request you are trying to receive in your controller.
If you get null as the value of the $request, that could mean, in your Blade file, the input also has it's value as null.
Try to manually insert a value like <input type="text" name="txtEmployeeNo" value="2"> and see if you get that in your controller. If you do, then the query in your input is wrong.
That's all I could think of without provided Blade and Controller code.
Try this:
$employeeNum = $request->input('txtEmployeeNo');
$employeeSched = Schedule::where('employee_no', $employeeNum)->get();
return view('admin.employeemaintenance.createSchedule',compact('employeeSched'));
well, here is an edit to this answer with the steps needed:
in your routes:
Route::post('yourRouteName','yourController#nameOfFunctionInController')->name('TheNameOfTheRoute');
In your controller:
public function nameOfFunction(Request $request) {
$employeeNum = $request->input('txtEmployeeNo');
$employeeSched = Schedule::where('employee_no', $employeeNum)->get();
return view('admin.employeemaintenance.createSchedule',compact('employeeSched'));
}
And that's it basically.
I filled a dropdown list with data from a database table and I have a second one which I want to display information based on the data displayed in the first dropdown. Is there any way I could do this in SPRING? Or could you tell me any other good way to do this?
These are the dropdown-lists:
<select name="Oras" class="drop-down">
<option th:each="oras : ${orase}"
th:text="${oras}"
th:value="${oras}"></option>
</select>
<select name="Baza sportiva" class="drop-down" path="">
<option th:each="bazaSportiva : ${bazeSportive}" th:text="${bazaSportiva.nume}"
th:value="${bazaSportiva}">
</option>
</select>
I created a controller which decides what data should be displayed in the first dropdown(from the database):
#RequestMapping(value="")
public String afisareOrase(Model model){
ArrayList<BazaSportiva> bazeSportive = (ArrayList<BazaSportiva>) bazaSportivaDao.findAll();
ArrayList<String> orase = new ArrayList<String>();
for(BazaSportiva bazaSportiva : bazeSportive){
String oras = bazaSportiva.getOras();
if(!orase.contains(oras)){
orase.add(oras);
}
}
model.addAttribute("orase", (Iterable) orase);
return "platforma/services";
}
You need to write a javascript/jquery code in order to send an AJAX request upon the selection of any option within the first drop-down in order to fetch the second set of your data from database.
then after the AJAX response with its data went back to your AJAX function, use another javascript/jquery function to access to the second select tag (using id/class) and fill it up with the acquired data!
Refer to this youtube video tutorial for understand the concept behind this and implement it in your own code -> Tutorial
I'm trying to load form values from a cache on route load so if someone navigates from one route to another they don't lose their settings. Checkboxes and text inputs are working correctly. Only selects seem to have an issue.
Here's the element:
<select id="client" name="client[]" multiple="" v-model="chosen_clients">
<option v-for="client in clients" v-bind:client="client" :value="client.id">#{{ client.name }}</option>
</select>
First, I check the cache and update the address bar:
beforeCreate: function(){
if(sessionStorage.getItem('invoiceable')){
router.push({ path: '/invoiceable?'+sessionStorage.getItem('invoiceable')});
}
},
Then I bind the data to the address bar:
data: function(){
return {
chosen_clients: this.$route.query['client[]'] ? (Array.isArray(this.$route.query['client[]']) ? this.$route.query['client[]'] : [this.$route.query['client[]']]) : [],
}
},
Later, after mounted, I want to fetch data and update the address bar, but there's a problem:
var data = $('#invoiceable-form').serialize();
//This information does not match
console.log(this.chosen_clients); //This is correct
console.log($('#client').val(); //This is empty, even though visually, the select has selected options
Eventually, $('#client').val() has the correct value (meaning the visibly selected options appear as part of the serialized form. I know this because I have console.logs set up on beforeUpdate less than a second after the value is not present in .serialized it shows up without any interaction with the select. Even if I manually set $('#client').val([2,12]); before I .serialize() the correct values aren't there. I can force the issue by manually adding data to the result of .serialize, but that feels hacky.
#Roy J was right. The select options weren't loaded yet.
I would like to use a select box to redirect to an URL containing the select value.
Here bellow the HTML page with thymeleaf variables :
<form th:action="#{/app/}">
<select id="app" name="app">
<option th:each="app : ${apps}"
th:value="${app.id}"
th:text ="${app.name}">
</option>
</select>
<button>Go</button>
</form>
The controller is written as following :
#RequestMapping("/app/{appId}")
public ModelAndView getApp(#PathVariable String appId){...}
My goal is to access the controller with the URL : mydomain/app/{app.id}/
I tried to use th:field onto the select without success. I'm missing something here.
Please, could you explain me how to add the select value to the URL expected by the controller ?
Thank you for the hints
EDIT following #NicolaiEhemann answer
I moved to javascript using jquery and ajax :
$('button').click(function() {
$.ajax({
url: '/app/' + $('#app').val(),
dataType: 'html'
}).done(function(data) {
$('#result').html(data)
});
});
Thank you.
Thymeleaf will only generate static html code. To achieve what you want, you have to write client side javascript to handle the 'input' event event to change the form action when a different value is selected, or handle the form 'submit' event to override the default action of the form submission. The relevant js code will probably be dependent on which framework you use.
Simply, add the path variable to the form action with double uderscores around
i.e. replace <form th:action="#{/app/}"> with <form th:action="#{/app/__${app.id}__">
source: http://forum.thymeleaf.org/Sending-pathvariable-to-controller-td4028739.html
I have a drop down list that list different options to the user. I need the list to populate a text area based on what the user selects. I have the data already in my database and I want to be able to run a query based the user's selection from the drop down list.
This is how my select tag looks like right now:
<select name="procedure" onChange="">
<option value="">Select Procedure</option>
<cfloop query="procedures">
<option value="#procedureId#">#procedureName#</option>
</cfloop>
</select>
And this is my text area:
<textarea name="procedureDescription" cols="80" rows="6">#the query output will go here#</textarea><br />
Is there a way to use onSelectChange function to control a server side query with Ajax?
I hope my thoughts are clear, if you need more info please ask.
Yes, unless I misunderstand, you should be able to do this using an Ajax request. The onchange method should look something like this:
function handleProcedureChange()
{
var selectedVal = $(this).val();
var url; // TODO set procedure URL here, using selectedVal as needed
$.get(url, function(procedureResult) {
$("#procedureDescription").text(procedureResult);
});
}
Then you'd need to set up the server-side method to run the procedure and return the result as plain text.