I have a partial that I call in layouts/application.html.erb to display a form for a search. The user chooses values from the two select fields; then, should hit enter to render a view with search results.
Here is the partial:
** _search.html.erb:
<form name="classic">
<select name="countries" size="1" onChange="updatecities(this.selectedIndex)" style="width: 150px">
<option selected>Select A Brand</option>
<option value="usa">Opel</option>
<option value="canada">Cheverolet</option>
<option value="uk">Scoda</option>
</select>
<select name="cities" size="1" style="width: 150px">
</select>
</form>
<script type="text/javascript">
var countrieslist=document.classic.countries
var citieslist=document.classic.cities
var cities=new Array()
cities[0]=""
cities[1]=["Vectra|vectravalue", "Corsa|corsavalue"]
cities[2]=["Optra|optravalue", "Lanos|lanosvalue"]
cities[3]=["Octavia|octaviavalue", "Fleshia|fleshiavalue"]
function updatecities(selectedcitygroup){
citieslist.options.length=0
if (selectedcitygroup>0){
for (i=0; i<cities[selectedcitygroup].length; i++)
citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])
}
}
</script>
The javascript is just to filter the second select dropdown based on the first select dropdown. What I need to do is to send the values chosen in this form in the URL for params hash so that I can act on it in the controller and display the search results. I could use link_to.
How do I include the selected values from the form fields in link_to?
Your help is appreciated. Thanks!
Serialize the form and send the data to the server. The selected value is passed as the hashvalue where the key is the "id" for the select tag.
Related
Hi I have problem with my multiple select search form.
The parameters are in the url
urlhomepage.../search?cars=1&cars=2&cars=4
I do not know how to get parameters url in form option as selected
<select multiple="multiple" name="cars[]" id="select2" placeholder="">
#foreach($names as $name)
<option value="{{$name->id}}">{{$name->title}}</option>
#endforeach
</select>
I want to get the effect so that the form options are marked on the basis of a url query
First you should pass variable as array as cars[] like below
urlhomepage.../search?cars[]=1&cars[]=2&cars[]=4
Inside php you can get cars array form query string
<?php
$cars = request('cars',[]);
?>
And put cars value as auto selected in select
<select value="{{$cars}}" multiple="multiple" name="cars[]" id="select2" placeholder="">
I have the following HTML snippet:
<input type="text" id="manufacturer" list="manufacturers" placeholder="Search by manufacturer name or supplier code" class="form-control form-control-2-3" value="" name="manufacturer">
<datalist id="manufacturers">
<select>
<div>
<option value="Jaguar">AA</option>
<div></div>
</div>
<div>
<option value="Audi">AB</option>
<div></div>
</div>
<div>
<option value="Mercedes">AC</option>
<div></div>
</div>
</select>
</datalist>
It's a dropdown menu and I want to select one of the options. No matter what I try with any find command or select function. I always get the same error:
Selenium::WebDriver::Error::ElementNotVisibleError: element not visible: Element is not currently visible and may not be manipulated
Does anyone have any suggestions on how to scope to those options and select one?
Thanks.
What you're trying to do isn't currently possible because it's not actually a dropdown select element. The <datalist> option elements are never actually visible on the page because the standard states "In the rendering, the datalist element represents nothing and it, along with its children, should be hidden." - https://html.spec.whatwg.org/dev/form-elements.html#the-datalist-element . Instead any <option> elements in the datalist are just used as autofill suggestions for the input element (but don't actually restrict the value a user can input in any way). Because of this and since the datalist user can just type anything they want into the input element you can set the input value like any other text input.
fill_in("manufacturer", with: 'Jaguar')
how to pass many objects in one form? becouse like that not working.... help me please
<form class="form-control" action="#" th:action="#{'/'}" method="post">
<select>
<option th:each="city :${cities}" th:value="${city.getId()}" th:text="${city.getName()}"/>
</select>
<select>
<option th:each="category :${categories}" th:value="${category.getId()}" th:text="${category.getDescirption()}">
</option>
</select>
//this line isnt correct:
<a class="btn btn btn-primary btn-sm" href="#"
th:href="#{'/todo/done?id=' + ${city.id} + '&name=' + ${category.name}}">done</a>
</form>
You add each object as named model attribute. Example
#RequestMapping(value = "message", method = RequestMethod.GET)
public String messages(Model model) {
model.addAttribute("cities", citiesRepository.getAll());
model.addAttribute("categories", citiesRepository.getAll());
return "message/list";
}
Personally I find it more readable to have single object as model attribute. That object has fields for each actual attribute.
See official documentation for more details https://www.thymeleaf.org/doc/articles/springmvcaccessdata.html
In your example you are not using th:each correctly.
You should have th:each as select level (not at option level) then refer to individual items in nested select elements.
like
<select th:each="city :${cities}">
<option th:value="${city.getId()}" th:text="${city.getName()}"/>
</select>
In your last example you are refering to ${city.id} and ${category.name} but city and category are not defined (probably thymleaf error message tells you that).
What exactly you want to achieve? Do you want to link with selected city and category? If so, you need separate model attributes like
selectedCity and selectedCatetory.
I am trying to get the selected value of the dropdown on change event to be sent on reactive form submission. I have a very similar scenario working for radio based on the answer from how to get selected value of radio in reactive form
Here's the code for dropdown
<div class="row" *ngIf="question.controls.type.value === 'dropdown'">
<div class="col-md-12">
<div class="form-group__text select">
<label for="type">{{ question.controls.label.value }}</label>
<br><br>
<select name="value" formArrayName="component" (change)="updateSelection(question.controls.component.controls, $event.target)">
<option
*ngFor="let answer of question.controls.component.controls; let j = index" [formGroupName]="j"
[ngValue]="answer?.value?.value">
{{answer?.value?.value}}
</option>
</select>
</div>
</div>
</div>
I am not able to pass the answer as formcontrol to updateSelection on change of a selected option from the dropdown. Any help is greatly appreciated.
https://stackblitz.com/edit/angular-acdcac
Very similarily like previous question, we iterate the form controls in your array, initially set all as false, and then turn the chosen choice as true. So template let's pass $event.target.value:
<select name="value" formArrayName="component"
(change)="updateSelection(question.controls.component.controls, $event.target.value)">
<option *ngFor="let answer of question.controls.component.controls; let j = index" [formGroupName]="j"
[ngValue]="answer?.value?.value">
{{answer?.value?.value}}
</option>
</select>
And in the component we as mentioned iterate the form controls and set all as false. The value for $event.target.value will be the string value, for example Choice 1. We then search for the form control that has that value and then set the boolean for that particular formgroup:
updateSelection(formArr, answer) {
formArr.forEach(x => {
x.controls.selectedValue.setValue(false)
})
let ctrl = formArr.find(x => x.value.value === answer)
ctrl.controls.selectedValue.setValue(true)
}
Your forked StackBlitz
<form method="post">
<select name="users" id="users" onchange="showUser(this.value)" value="">
<option value="">Select a person:</option>
<option value="1" onchange="copy();">tcs</option>
<option value="2" onchange="copy();">wipro</option>
<option value="3" onchange="copy();">Hcl</option>
<option value="4" onchange="copy();">krystal kones</option>
</select>
</form>
I have this drop down i want that when the value is changed like tcs,wipro or hcl then that value should shown in html label
Try putting the onChange attribute in the select tag.
Example: http://jsfiddle.net/r6Fus/
HTML:
<div id="label"></div>
<select id="mySelect" onchange="copy();">
<option value="">Select a person:</option>
<option value="tcs" >tcs</option>
<option value="wipro" >wipro</option>
<option value="Hcl" >Hcl</option>
<option value="krystal kones" >krystal kones</option>
</select>
Javascript:
function copy() {
document.getElementById("label").innerHTML = document.getElementById("mySelect").value
}
Otherwise you could use jQuery.
First of all, the onchange event is for the select element, not the option elements. Those don't actually change. Also, you have two JavaScript functions. showUser() and copy(). But you describe only one piece of functionality. What do these two functions do?
As for showing the text in the label, here's one way to do it (using jQuery, because everybody does):
$(document).ready(function() {
$('#users').change(function() {
$('#myLabel').text($(this).val());
});
});
What this is basically doing is:
Wait until the DOM is loaded and ready.
Bind a function to the change event of the specified select element.
The function contains one line, which sets the text of the specified label to the value of the select.