Hi guys anyone know how to add input and button inside select
This is my code
<select
className="w3-select w3-border"
name="country"
onChange={onChange}
>
<option value="DEFAULT" selected disabled hidden>
Select Country :
</option>
{allcountry.map((item, index) => {
return (
<option key={index} value={item.countryname}>
{item.countryname}
</option>
);
})}
</select>
I want add input and button inside the Select Country , so when I input the allcountry state will update, Thank you :D
Related
Here I however tried to make the second div visible if a value is selected in the first dropdown. But I want to make a form where there will be 3 dropdown but only the first will be visible where the user will select any value and the 2nd dropdown will be accordingly. I even need to fetch the values using API. Here's an example of the form what I'm trying to make : https://donate.alauddintrust.com Thanking you!
import React from 'react';
import Section2 from '../Sections/Section2'
class App1 extends React.Component {
//set the statte default value
constructor(props) {
super(props);
this.state = {value: 'hide'};
}
// set the state value based on select option value
divstatus = (e) =>{
this.setState({value: e.target.value});
}
render() {
return (
<>
<div className="container">
<header class="page-header">
<h1 className={['text-warning']}>Donate <i>Now</i></h1>
</header>
<form className="donation-form form-horizontal container" id="donation-form">
<div id="donation-type-group" className="form-group">
<label htmlFor="recurrence">Donation Type <span className="required">*</span></label>
<select id="donation_type" onChange={this.divstatus} name="donation_type" className="form-control">
<option value="show">Select Donation Type</option>
<option value="hide">Sadaqa</option>
<option value="2">Fitrana</option>
<option value="3">Zakat</option>
<option value="4">Fidya</option>
<option value="5">Qurbani</option>
<option value="6">Donation</option>
<option value="15">Kaffara</option>
</select>
</div>
<div className={this.state.value}>
<div id="donation-type-group" className={['form-group']}>
<label htmlFor="recurrence">Programs<span className="required">*</span></label>
<select id="donation_type" name="donation_type" className="form-control">
<option value="">Select Donation Type</option>
<option value="1">Sadaqa</option>
<option value="2">Fitrana</option>
<option value="3">Zakat</option>
<option value="4">Fidya</option>
<option value="5">Qurbani</option>
<option value="6">Donation</option>
<option value="15">Kaffara</option>
</select>
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-lg btn-primary">Submit donation</button>
</div>
</form>
<hr/>
<Section2 />
</div>
</>
)
};
}
export default App1;
I did somthing similar a while ago, you can display the first dropdown and onChange of the first dropdown trigger the API call to update the state to hold the options for the second dropdown, and in the second dropdown section when the api results are empty dont render the second dropdown (could use a (results) ?? <GoodComponent/> will only show if results not empty)
could also add a loading state value to disable the dropdowns in between API calls and listen to its changes using a useEffect hook
I'm using Ant Design for inputs in my React project. In the multiple input select, I have the default placeholder message "Select an Option"
{type === 'select' && (
<Select
className={isBlack}
mode="multiple"
key={inputKey}
id={inputKey}
defaultValue={value}
disabled={isFixed}
>
{!isBlack && (
<Option
value=""
selected
disabled
hidden
>
<span>Select an option</span>
</Option>
)}
{options.map((option, i) => (
<Option
className="ant-drop"
key={`option_${0 + i}`}
value={option}
>{option}
</Option>
))}
</Select>
)}
However, after all the options are selected in the dropdown, I can't figure out how to hide the "Select an Option" message after there are no more options to map. At the top level, I tried to use if value === null then return the dropdown without data but I think that doesn't make sense because I would be technically rendering the dropdown twice. I'm not sure where to go from here. Any help would be greatly appreciated.
I hope i am understanding correctly and without too much context, can't you try the following:
Display Select an Option with more
Assuming once the user selects an option, you are updating a state or updating something. When you update that state/variable, we can be sure to hide the default option.
So displaying this option will be like this:
{(!isBlack && userAnswered) (
<Option
value=""
selected
disabled
hidden
>
<span>Select an option</span>
</Option>
)}
Where userAnswered can be const userAnswered = !!this.state.dropDownSelectAnswers.length for example.
I'm tring to implement an AutoComplete feature for an Input tag.
When I start typing, I get the dropdown, then I select one of the items.
When I'm trying to reach the selected item, I just get the 1st option from the options list instead of the one I chose.
This is what it looks like:
<input id="chosenTxt" list="someList">
<datalist id="someList">
<select id="selectList">
<option value="First" label="one" />
<option value="Second" label="two" />
<option value="Third" label="three" />
</select>
</datalist>
</input>
Then for example I choose "Second" and use
$("#selectList option:selected").attr("label")
I get "one".
FYI : I know this is built in jQuery UI, but I don't wanna use it.
You need to listen for the input event on the input element and iterate over
the options, checking if the input value is equal to the value of one of the options.
You can access the options of the datalist element from the options property on the datalist.
Here is an example.
$('#chosenTxt').on('input', function() {
$that = $(this);
$.each($('#someList')[0].options, function(idx, opt) {
if($that.val() == opt.value) {
console.log(opt.label)
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="chosenTxt" list="someList">
<datalist id="someList">
<select id="selectList">
<option value="First" label="one" />
<option value="Second" label="two" />
<option value="Third" label="three" />
</select>
</datalist>
I have a txtSubTotal text box, a discount drop down and a txtGrossTotal text box. txtSubTotal text box is updating when the ADD button is clicked. txtGrossTotal text box is updating when the drop down value is selected. But, when updating the txtSubTotal text box, at the same time txtGrossTotal text box should be updated for the default drop down value, which is "0". Here, txtGrossTotal should be the value of txtSubTotal.
Below is my code, it doesn't display the txtGrossTotal when the drop down has it's default value. (But, after selecting another option, and again select the default value, it updates the txtGrossTotal.)
function discountedGrossTotal(dropdownVal){
var discountOption = document.getElementById("discount"),
subTotal = document.getElementById("txtSubTotal"),
grossTotal = document.getElementById("txtGrossTotal").value;
grossTotal.value = subTotal.value - (subTotal.value * dropdownVal/100);}
discount drop down
<select class="select" id="discount" name="discount" onchange="discountedGrossTotal(this.value);">
<option selected>0</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
txtGrossTotal HTML
<div id="gross_total_div">
<input name="txtGrossTotal" type="text" id="txtGrossTotal" size="15" readonly/>
</div>
Basically you want to take the same action by changing the "discount" dropdown value as well as the "subtotal" textbox value. So, you will have to call the same function on both.
You can achieve this by doing below modifications in your code:
Remove the parameters from "discountedGrossTotal" function
Add a new variable inside your function like dropdownVal = document.getElementById("discount").value
Call the same function on change event of your "txtSubTotal" textbox
Now, this function will be called if any of these (textbox or dropdown) value is changed and hence the "Gross Total" value will be updated accordingly.
Please Try this, it should work for you...
function discountedGrossTotal() {
var dropdownVal= document.getElementById("discount").options[document.getElementById("discount").selectedIndex].innerHTML;
subTotal = document.getElementById("txtSubTotal");
grossTotal = document.getElementById("txtGrossTotal").value;
document.getElementById("txtGrossTotal").value = subTotal.value - (subTotal.value * dropdownVal / 100);
}
sub total: <input type="text" id="txtSubTotal" onblur="discountedGrossTotal()" />
<br />
discount: <select class="select" id="discount" name="discount" onchange="discountedGrossTotal();">
<option selected>0</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br />
<div id="gross_total_div">
<input name="txtGrossTotal" type="text" id="txtGrossTotal" size="15" readonly />
</div>
I have a drop down list where the user will select return reason. the drop down has 'other' option which will display another textbox to insert another info. I already got the code to save value from drop down but not the value in the textbox if user selects 'other' option. thanks!
Here is my drop down:
<td width="218">
<select name="returnreason" id="returnreason" onChange="others(this.value);">
<option value="0"> --Select Return Reason-- </option>
<option value="1">Damaged in transit</option>
<option value="2">Wrong item delivered</option>
<option value="3">Wrong item ordered</option>
<option value="4">Demo/Service Unit</option>
<option value="5">W/out warranty sticker</option>
<option value="6">Does not work/broken (DOA)</option>
<option value="7">Clients are not satisfied</option>
<option value="8">Others</option>
</select>
</td>
<div id="8" style="display:none;">
Please specify <input type="text" id="8" name="8" class="forinput"/>
</div>
My js:
<script>
$(document).ready(function() {
$("#returnplus").hide();
$("#addreturn").click(function() {
$("#returnplus").show("slow");
});
}
</script>
Here's for saving to the db:
$returnreason=isset($_POST['returnreason'])? $_POST['returnreason'] : '';
Maybe this
$r8 = isset($_POST['8'])? $_POST['8'] : '';
if( $returnreason == 8 ){
$returnreason_specify = $r8;
}
I don't understand what you realy want ...
If you just want your input '8' data its $r8 = isset($_POST['8'])? $_POST['8'] : '';