I've got a <select> in a LiveComponent and I want to react to the value being changed. There's no submit button. I have this:
<form>
<select phx-change="per_page_changed" phx-target={#myself} >
<option value={3}>3</option>
<option value={5}>5</option>
</select>
</form>
When I change the value, my component's handle_event is called, but the params are %{"_target" => ["undefined"]} - no value from the select. What I am I doing wrong?
Add a name attribute
The <select> needs a name attribute, like this:
<form>
<select name="per_page" phx-change="per_page_changed" phx-target={#myself} >
<option value={3}>3</option>
<option value={5}>5</option>
</select>
</form>
Without a name attribute, LiveView doesn't know what key to use for the input value. With name="per_page", the params to handle_event/3 are %{"_target" => ["per_page"], "per_page" => "5"}.
Related
In my code, I want to make it a default selected value if there is only one.
As of now the code looks as follows:
<select
name="something"
value={this.props.parentProps.value}
<option value="" disabled selected>--Select--</option>
<option value="Other">Other</option>
</select>
The idea here is to have the only option selected, if there is only one.
I could copy them out to and array within the code if needed:
<select options={something}
What would you recommend?
Basically I want something like:
if(only one option)
Select(that one);
you can do something like this:
<select
name="something"
value={this.props.parentProps.value}
<option value="" disabled selected={options.length === 1}>--Select--</option>
<option value="Other">Other</option>
</select>
this options.length === 1 will return true or false that will trigger the selected
i am new to react and just started a project could anyone please let me know why i am not getting values in alert message thing is i don't know how to get values in dropdown. I want dropdown message in alert or some console. thanks in advance for the help.
import React,{useState} from 'react';
import './Content.css';
function Content(){
const [value, setValue] = useState([{
application:'',
platform :''
}])
const dropdownHandler =(event) =>{
setValue({application:event.target.value,platform :event.target.value,...value})
alert(console.log(value));
}
return(
<div>
<div className="application-container">
<label>Application</label>
<select name="application">
<option value="umrportal">umrportal</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div className="platform-container">
<label>Type of platform</label>
<select name="platform">
<option value="UMR">UMR</option>
<option value="IVR">IVR</option>
<option value="middleware">Middleware</option>
</select>
</div>
<button className="btn-round" onClick={dropdownHandler}>submit</button>
</div>
)
}
export default Content;
Get rid of the button.
The event you want to use is the change event on each drop-down. For example, consider this markup:
<div>
<div className="application-container">
<label>Application</label>
<select name="application" onChange={dropdownHandler} value={value.application}>
<option value="umrportal">umrportal</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div className="platform-container">
<label>Type of platform</label>
<select name="platform" onChange={dropdownHandler} value={value.platform}>
<option value="UMR">UMR</option>
<option value="IVR">IVR</option>
<option value="middleware">Middleware</option>
</select>
</div>
</div>
Note two things I'm doing here:
Calling the dropdownHandler from the drop-down, not from a button. Because the event with the name/value is on the form element, not some button.
Setting the value of the drop-down from state.
What this would do is then update the state for each change, and always show the current state.
The state you're using is also wrong. You're initializing it to an array for some reason. Just use an object:
const [value, setValue] = useState({
application:'',
platform :''
});
At this point all you need is a dropdownHandler which updates that object. Each event from the <select> element is going to have the name and the new value, which you can use to set the property on your object (as long as the names and the properties match, which in this case they do):
const dropdownHandler = event => {
setValue({
...value,
[event.target.name]: event.target.value
});
};
You can see a running example here.
If you want to add a button, then the question would become: What do you want that button to do? If it's just update the state, you don't need it. You update the state every time the a form element changes.
You need to add onChange event for select.
<select name="application" onChange={(e) => dropdownHandler(e)} value={application}>
<option value="umrportal">umrportal</option>
<option value="IVR">IVR</option>
<option value="middleware">Middleware</option>
</select>
<select name="platform" onChange={(e) => dropdownHandler(e)} value={platform}>
<option value="UMR">UMR</option>
<option value="IVR">IVR</option>
<option value="middleware">Middleware</option>
</select>
How does one set the default value of an uncontrolled <select> in a JSX stanza? I have many controlled <select>'s in flight, I know the difference.
<select
// defaultValue="Select a type"
// value="Select a type"
onChange={ this.handleTypeSelect.bind(this, event) }
>
<option value="" disabled selected>Select a type</option>
<option value="type1">type1</option>
<option value="type2">type2</option>
</select>
Running the code above as-is generates the dreaded:
Warning: Use the defaultValue or value props on <select> instead of settingselectedon <option>
Removing the selected line and uncommenting the value or defaultValue lines removes the console warning but has no effect in the browser at all (as in the default value does not show up).
What am I missing?
defaultValue takes the value of the default option you want selected. Your option Select a type has no value.
If you do <option value="-1">Select a type</option> then defaultValue={-1} it should work.
<select defaultValue={-1} onChange={ this.handleTypeSelect.bind(this, event)}>
<option value="-1" disabled>Select a type</option>
<option value="type1">type1</option>
<option value="type2">type2</option>
</select>
Instead of using the following:
<select class="form-control" disabled>
<option ng-repeat="category in Categories" value="category.id" ng-selected="APIdata.category_id === category.id">{{ category.name }}
</option>
</select>
is it possible to use an input text only since the above selected list is disabled and there is no possibility of changing its value? Categories and APIdata are properties(Categories is an array and APIdata is an object) of $scope. How should we do that?
Add in your controller in the right place:
$scope.category = $scope.Categories.filter(c => c.id === $scope.APIdata.category_id)[0];
Change your view:
<input type="text" ng-model="category" disabled/>
I have a problem to read the information selected that is propagate in a select.
<div ng-show="deviceDetail != null" ng-model="example" >
<select >
<option value="NONE">Select</option>
<option ng-repeat="option in deviceDetail" ng-change="selectOption()">{{option}}</option>
</select>
<br/>
The value of the selection is: {{example}}
</div>
this is the HTML code and in the {{example}} I want to see the information that the user selected.
this is the part of the js releted:
$scope.selectOption = function() {
$scope.example = option.productName;
};
How I can fix it?
Thanks a million!
Set your example scope variable directly in <select> instead calling ng-change event and assigning into that function.
You can directly set option.name to example model with the use of ng-options too.
Here You have applied ng-model directive to div tag.
<div> is not input element so apply ng-model to <select> element here.
I would suggest to use ng-options directive for filling the selection list in <select>. ng-repeat is also fine.
Here you are binging ng-change event so in the function if requires then you can pass the object on which event is triggering so you can use that object or perform any operation on that.
Below is the modified template.
<div ng-show="deviceDetail != null">
<select >
<option value="NONE">Select</option>
<option ng-model="example" ng-options="option in deviceDetail" ng-change="selectOption(option)">{{option}}</option>
</select>
<br/>
The value of the selection is: {{example}}
</div>
You should to pass current option:
<select >
<option value="NONE">Select</option>
<option ng-repeat="option in deviceDetail" ng-change="selectOption(option )">{{option}}</option>
</select>
$scope.selectOption = function(option) {
$scope.example = option; // is there property .productName?;
};
Try this:
<div ng-show="deviceDetail != null">
<select >
<option value="NONE">Select</option>
<option ng-model="option" ng-options="option in deviceDetail" ng-change="selectOption(option)">
{{option}}</option>
</select>
<br/>
The value of the selection is: {{example}}
Js:
$scope.selectOption = function(option) {
$scope.example = option;
};
You should use ng-options
The value of the selection is: {{example}}