Can I use multiple selection with React.createref()? It returns undefined.
<div>
<label>
Pilih Skill :{" "}
<select multiple ref={this.inputSkill}>
<option value="Front-end" key="1">Front-end</option>
<option value="Back-end" key="2">Back-end</option>
<option value="Dev-Ops" key="13">Dev-Ops</option>
<option value="Full Stack" key="41">Full Stack</option>
</select>
</label>
</div>
Related
I am a beginner at React JS. I would like to learn how to store selected values in useState.
The form containts four different drop downs and I want to store this selected values in useState so that at the end of the multi step form, user can go back to edit the fields before sub.
import React, {useState} from 'react';
import './paperdetails.css';
import IncDecCounter from './IncDecCounter'
import {
Text
} from '#chakra-ui/react';
const PaperDetails = () => {
const [selected, setSelected] = useState();
return (
<div className='paper-details'>
<div className='paper-details_display_flex'>
<div className='left'>
<div className='left-calc_wrapper'>
<div>
<label>Type of Paper</label>
<select>
<option value="essay">Paraphrasing</option>
<option value="Custom Writing">Custom Writing</option>
<option selected value="Dissertation">Dissertation</option>
<option value="Research Paper">Research Paper</option>
<option value="essay">Essay</option>
<option value="Term Paper">Term Paper</option>
<option selected value="Admission Essay">Admission Essay</option>
<option value="Coursework">Coursework</option>
<option value="Book Review">Book Review</option>
<option selected value="Paraphrasing">Essay</option>
<option value="Physics Paper">Physics Paper</option>
</select>
</div>
<div>
<label>Study Level</label>
<select>
<option value="school">Bachelor</option>
<option value="college">College</option>
<option selected value="Bachelor">School</option>
<option value="Masters">Masters</option>
</select>
</div>
</div>
<div className='left_middle'>
<div className='calc-control'>
<label>Number of Pages</label>
<IncDecCounter />
</div>
<div className="select-deadline">
<label>Deadline</label>
<select className='deadline' value={selected} onChange={e=>setSelected(e.target.value)}>
<option value="1 hour">1 hour</option>
<option value="3 hours">3 hours</option>
<option selected value="8 hours">8 hours</option>
<option value="12 hours">12 hours</option>
<option value="24 hours">24 hours</option>
<option value="48 hours">48 hours</option>
<option selected value="3 days">3 days</option>
<option value="5 days">5 days</option>
<option value="7 days">7 days</option>
<option selected value="14 days">14 days</option>
</select>
<span color={'#785aec'} fontSize={'14px'}
fontWeight={'bold'}> Will be ready in: {selected}
</span>
</div>
</div>
<section className="writing-instructions">
<div className="writing_instructions">
<div className="d-flex">
<label className='instructions'>
Writing instructions
<span className='text-orange'> *required</span>
</label>
<input className="input-file" id="my-file" type="file"
accept="application/pdf,application/msword,
application/vnd.openxmlformats-officedocument.wordprocessingml.document"/>
<label tabindex="0" for="my-file" className="input-file-trigger">
<span className='span--underlinel-blue'> Upload writing Instructions</span>
</label>
</div>
<div className='text-area'>
<textarea className='text-area_main'
placeholder='Type your instructions here. Please provide as many details as possible.'></textarea>
</div>
</div>
</section>
</div>
<div className='right'>
<div className='total-row'>
<div className='total-text'>
<h1 className='total-text_h1'>Total:</h1>
<span className='span_price'>$0.00</span>
</div>
</div>
</div>
</div>
</div>
)
}
export default PaperDetails;
How to store multiple values in state
to do this ,you will need to define state for all four select box like this
const [seleccedValue1,setSelectedValue1]=useState(null);
const [seleccedValue2,setSelectedValue2]=useState(null);
const [seleccedValue3,setSelectedValue3]=useState(null);
const [seleccedValue4,setSelectedValue4]=useState(null);
then you will need to handle on change event of each select box like this
<select onChange={(e)=>{setSelectedValue1(e.target.value)}}>
<option value="essay">Paraphrasing</option>
<option value="Custom Writing">Custom Writing</option>
<option selected value="Dissertation">Dissertation</option>
<option value="Research Paper">Research Paper</option>
<option value="essay">Essay</option>
<option value="Term Paper">Term Paper</option>
<option selected value="Admission Essay">Admission Essay</option>
<option value="Coursework">Coursework</option>
<option value="Book Review">Book Review</option>
<option selected value="Paraphrasing">Essay</option>
<option value="Physics Paper">Physics Paper</option>
</select>
you can do the same for other select boxes as well
Please checkout this question:
It was already answered here:
React JSX: selecting "selected" on selected <select> option
Here is how you store value of any input field in useState();
const [selected,setSelected] = useState({});
function handleChange(event){
setSelected({...selected,[event.targe.id]=event.target.value});
}
return(
<select
id={"id_0"}
value={selected["id_0"]}
onChange={(event)=>(handleChange(event))}>
......."your code continue here"
and here is how you handle multiple input fields.
<select id={'id_1'} value={selected['id_1']}
onChange={(event)=>(handleChange(event))}/>
<select id={'id_2'} value={selected['id_2']}
onChange={(event)=>(handleChange(event))}/>
I want to tell user to select any option from select other than first (index=0). I saw few examples and tried but not working for me:
<select ng-model="patient.gender" name="gender" class="form-control" required>
<option>- Select -</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
<div class="error" ng-show="Form.gender.$invalid">
Select gender
</div>
What to change here?
provide empty(default value) to option, so required field validation will fire on selection.
Html:
<select ng-model="patient.gender" name="gender" class="form-control" required>
<option value=''>- Select -</option> //Default value to empty
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
Can you help me to solve the error, my array post is not working, it always get the 1st value only. it duplicate only the text fields.
My content where to duplicate the fields using drop down button.
<h3>Step 3</h3>
<label><strong>Shipment Details</strong></label><br>
<label>Quantity:</label>
<select class="form-control" id="num_item" name="items_ID[]">
<option value="0">- SELECT -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select><br>
<div class="itemList">
<label>Package <span class="number">1</span> type *: </label>
<select class="form-control" name="packaging[]">
<option value="Letter Size"> Letter Size </option>
<option value="Small Box"> Small Box </option>
<option value="Meduim Box"> Meduim Box </option>
<option value="Large Box"> Large Box </option>
<option value="Tube"> Tube </option>
<option value="Pallet"> Pallet </option>
</select>
<br/>
<label>Package Dimensions & Weight: </label><br>
<input type="text" class="package-dimension form-control" name="pcklength[]" placeholder="Length *" style="width: 15%;" value=""/>
<input type="text" class="package-dimension form-control" name="pckwidth[]" placeholder="Width *" style="width: 15%;" value=""/>
<input type="text" class="package-dimension form-control" name="pckheight[]" placeholder="Height *" style="width: 15%;" value=""/> <strong>inch</strong>
<input type="text" class="package-dimension form-control" name="pckWeight[]" placeholder="Weight *" style="width: 35%;" value=""/> <strong>kg</strong> -->
<br><hr>
</div>
<div class="anotherItemList">
</div>
My Script
//for required Item
//when the webpage has loaded do this
$(document).ready(function() {
//if the value within the dropdown box has changed then run this code
$('#num_item').change(function(){
//get the number of fields required from the dropdown box
var num = $('#num_item').val();
var i = 0;
$(".newItemList").remove();
if (num > 1){
var i = 1;
while (i < num){
$('.itemList').clone().appendTo('.anotherItemList').removeClass("itemList").addClass("newItemList newItemList-" + i);
$(".newItemList-" + i + " .number").text(i+1);
i++;
}
}
});
});
//end
I have this HTML code (no, I can not to convert it in a ng-options):
<form>
<div class="list">
<div style="margin-bottom: 20px;">
<label class="item item-input item-select">
<div class="input-label">
Price From (start)
</div>
<select required id="priceForm" ng-model="search.priceFrom" ng-init="'search.priceFrom = searchParams.priceFrom'">
<option value=0>All</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="500">500</option>
<option value="700">700</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
<option value="2000">2000+</option>
</select>
</label>
</div>
<div>
<label class="item item-input item-select">
<div class="input-label">
Vacation Days (start)
</div>
<select required ng-model="search.vacationDays">
<option value=0 >All</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10+</option>
</select>
</label>
</div>
</div>
</form>
I want this:
The first time that I see this page the values of both select must be "All" (value = 0), and I think that I need only to add "required" but it does no work.
And for every next times the default value need to be the value inside searchParams.priceFrom (it is a variable in my $scope).
Where is my error ?
Thanks.
M.
Since both selects are bound to your search.vacationDays && search.priceFrom all you would need to do in your controller is something like:
$scope.search.priceFrom = 0;
$scope.search.vacationDatys = 0;
Please see demo below
just set your serach obj in controller
$scope.search = {
priceFrom: 0,
vacationDays: 0
}
var app = angular.module('app', []);
app.controller('fCtrl', function($scope) {
$scope.search = {
priceFrom: 0,
vacationDays: 0
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="fCtrl">
<form>
<div class="list">
<div style="margin-bottom: 20px;">
<label class="item item-input item-select">
<div class="input-label">
Price From (start)
</div>
<select required id="priceForm" ng-model="search.priceFrom" ng-init="'search.priceFrom = searchParams.priceFrom'">
<option value=0>All</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="500">500</option>
<option value="700">700</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
<option value="2000">2000+</option>
</select>
</label>
</div>
<div>
<label class="item item-input item-select">
<div class="input-label">
Vacation Days (start)
</div>
<select required ng-model="search.vacationDays">
<option value=0>All</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10+</option>
</select>
</label>
</div>
</div>
</form>
</div>
</div>
I have a dropdown list of countries. and when iam selecting a particular country my output should be filtered with details of only that country to be displayed following is my code but not working properly.
<label for="filtercountry" class="control-label col-xs-2">Filter By Country</label>
<div class="col-xs-2">
<select class="form-control">
<option value="None">-- Select --</option>
<option ng-model="Tofilter.country" value="India" ng-change="changed()">India</option>
<option ng-model="Tofilter.country" value="USA" ng-change="changed()">USA</option>
<option ng-model="Tofilter.country" value="Pakistan" ng-change="changed()">Pakistan</option>
<option ng-model="Tofilter.country" value="China" ng-change="changed()">China</option>
<option ng-model="Tofilter.country" value="Australia" ng-change="changed()">Australia</option>
</select>
</div>`<ul id="result">
Name :{{x }}
`
Put ng-change on the select element:
<select class="form-control" ng-change="changed()">
it's not necessary to put your model in all option, put it in select
<select class="form-control" ng-change="changed()" ng-model="Tofilter.country">
<div class="col-xs-2">
<select class="form-control" ng-change="changed()" ng-model="Tofilter.country" >
<option value="None">-- Select --</option>
<option value="India" >India</option>
<option value="USA" >USA</option>
<option value="Pakistan" >Pakistan</option>
<option value="China" >China</option>
<option value="Australia" >Australia</option>
</select>
</div>