When I select an option, I want to remove selected attribute from old one and add it to option I selected.
HTML Code:
<label>Gender</label>
<select id="gender" name="gender" class="form-control" onchange="redirect()">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="any">Any</option>
</select>
JS Code:
<script>
$("#gender").on("change", function redirect() {
// const queryStr = "gender=any&platform=any"
// const usp = new URLSearchParams(queryStr)
// console.log(usp)
url = window.location.href.split("?")[0] + "?gender=" + this.value + "&platform=<%=platform%>"
location.replace(url)
})
</script>
Related
I got stuck while creating a dependent drop down menu in react. I am trying to make a form in which user can select three options through the drop down menu respectively and based on the options selected the 4th field which is a disabled text field will be populated with the appropriate result.
This is my code.
<div className="col-md-4">
<label htmlFor="inputEmail4" className="form-label">District</label>
<select className="form-select" value={selectedDistrict} onChange={handleDistrict} aria-label="Select District" >
<option value="Select District">Select District</option>
<option value={Data.data[0].DISTRICT}>{Data.data[0].DISTRICT}</option>
</select>
</div>
<div className="col-md-4">
<label htmlFor="inputPassword4" className="form-label">Assembly Constituency Number & Name.</label>
<select className="form-select" value={selectedConstituencyNameandNumber} onChange={handleConstituencyNameandNumber} aria-label="Select Assembly Constituency Number & Name." >
<option style={{"display": "block"}} value="Select Assembly Constituency Number & Name.">Select Assembly Constituency Number & Name.</option>
{selectedDistrict && acBooth.map((acBooth, index) => (
<option key={index} value={acBooth['AC No & Name']}>{acBooth['AC No & Name']}</option>
))}
</select>
</div>
<div className="col-md-4">
<label htmlFor="inputEmail4" className="form-label">Booth No.</label>
<select className="form-select" value={selectedBoothNumber} onChange={handleBoothNumber} aria-label="Select Booth No." >
<option value="Select Booth No.">Select Booth No.</option>
{selectedDistrict && partNumber.map((item, index) => (
<option key={index} value={item["Part No"]}>{item["Part No"]}</option>
))}
</select>
</div>
This is the code for 3 drop down menu. I want to execute a function which takes two parameter from the selected options in drop down menu and then display the output in the blank text field whose code is given below.
<div className="col-md-4">
<label htmlFor="inputEmail4" className="form-label">Booth Name</label>
<input type="text" disabled className="form-control" value={boothName} onChange={()=>{
const newName = getBoothName(selectedConstituencyNameandNumber, selectedBoothNumber);
setBoothName(newName);
console.log(newName);
}} id="inputUID" />
</div>
These are the function which I have written. It is working properly in the backend but I am unable to get the output in frontend.
const getBoothName = (acNo, partNo) => {
const boothName = Data.data.filter((item) => {
return item["AC No & Name"] === acNo && item["Part No"] === partNo
})
return boothName[0]["Part Name English"]
}
const [selectedDistrict, setSelectedDistrict] = useState('');
const [selectedConstituencyNameandNumber, setSelectedConstituencyNameandNumber] = useState('');
const [selectedBoothNumber, setSelectedBoothNumber] = useState('');
const handleDistrict = (e) => {
setSelectedDistrict(e.target.value);
}
const handleConstituencyNameandNumber = (e) => {
setSelectedConstituencyNameandNumber(e.target.value);
}
const handleBoothNumber = (e) => {
setSelectedBoothNumber(e.target.value);
}
A help is really appreciated.
The onChange function of your Input Textfield should be on the 3rd Select field. After that on change of your third dropdown it will setBoothName(newName) and your value will be set in the input textfield.
<div className="col-md-4">
<label htmlFor="inputEmail4" className="form-label">
Booth No.
</label>
<select
className="form-select"
value={selectedBoothNumber}
onChange={handleBoothNumber}
aria-label="Select Booth No."
>
<option value="Select Booth No.">Select Booth No.</option>
{selectedDistrict &&
partNumber.map((item, index) => (
<option key={index} value={item["Part No"]}>
{item["Part No"]}
</option>
))}
</select>
</div>
Change handleBoothNumber function in your code like this
const handleBoothNumber = (e) => {
setSelectedBoothNumber(e.target.value);
setBoothName(getBoothName(selectedConstituencyNameandNumber, selectedBoothNumber));
}
I'm facing the following challenge building some dropdowns with Handlebars.
Instead of modeling the dropdown's select this way:
<div class="form-floating col-3">
<select name="sport" class="form-select" id="floatingSelect">
<option {{selectedSport sport 'all'}} value="all">All</option>
<option {{selectedSport sport 'Hiking'}} value="Hiking">Hiking</option>
<option {{selectedSport sport 'Mountaineering'}} value="Mountaineering">Mountaineering</option>
<option {{selectedSport sport 'Climbing'}} value="Climbing">Climbing</option>
<option {{selectedSport sport 'Mountain biking'}} value="Mountain biking">Mountain biking</option>
</select>
<label for="floatingSelect">Sport</label>
</div>
<div class="form-floating col-2">
<select name="difficulty" class="form-select" id="floatingSelect">
<option {{selectedDifficulty difficulty 'all'}} value="all">All</option>
<option {{selectedDifficulty difficulty 'Easy'}} value="Easy">Easy</option>
<option {{selectedDifficulty difficulty 'Medium'}} value="Medium">Medium</option>
<option {{selectedDifficulty difficulty 'Hard'}} value="Hard">Hard</option>
<option {{selectedDifficulty difficulty 'Expert'}} value="Expert">Expert</option>
</select>
<label for="floatingSelect">Difficulty</label>
</div>
I would like to use the same helper for both of them, but I still don't know how to do it. (btw, ignore the fact that I should be using an {{#each}} for displaying the options :P)
The controller:
module.exports.list = (req, res, next) => {
const filters = req.query;
const { location, sport, difficulty } = req.query;
const criterial = Object.keys(filters)
.filter((key => filters[key] !== 'all'))
.reduce((criterial, filter) => {
if (filters[filter]) criterial[filter] = filters[filter];
return criterial;
}, {});
Route.find(criterial)
.then(routes => {
res.render('routes/list', { routes, location, sport, difficulty })
})
.catch(next)
}
The helpers:
hbs.registerHelper('selectedSport', (option, sportValue) => {
return option === sportValue ? ' selected' : '';
})
hbs.registerHelper('selectedDifficulty', (option, difficultyValue) => {
return option === difficultyValue ? ' selected' : '';
})
Many thanks for your help! :)
Finally I solved it this way:
Instead of typing all the options directly on the HBS, I create these with a helper that renders each option.
<div class="form-floating col-3">
<select name="sport" class="form-select" id="floatingSelect">
{{#each sportOptions as |sportOption|}}
{{option ../sport sportOption}}
{{/each}}
</select>
<label for="floatingSelect">Sport</label>
</div>
<div class="form-floating col-2">
<select name="difficulty" class="form-select" id="floatingSelect">
{{#each difficultyOptions as |difficultyOption|}}
{{option ../difficulty difficultyOption}}
{{/each}}
</select>
<label for="floatingSelect">Difficulty</label>
</div>
The helper receives 2 parameters: sport and sportOption and according to their value, returns a string cointaining the option with the selected attribute or not.
hbs.registerHelper('option', function (selectedValue, value) {
const selectedProperty = value == selectedValue ? 'selected' : '';
return new hbs.SafeString(`<option value=${value} ${selectedProperty}>${value}</option>`);
});
sportOption and difficultyOption are arrays with all the possibilities inside them.
I hope that, if someone else has the same problem, this can be of any help :)
I'm not sure if there's something wrong with my code or it's an existing bug with lit-html?
I'm trying to get value of the selected item when button is clicked.
number.js
<select class="form-control" name="number">
<option ?selected=${this.number === 1} value="1">One</option>
<option ?selected=${this.number === 2} value="2">Two</option>
<option ?selected=${this.number === 3} value="3">Three</option>
</select>
<button type="button" #click=${getSelectedValue}>Get Selected Value</button>
getSelectedValue() {
const selectOptions = this.querySelector('select[name="number"]');
const selectedValue = selectOptions.options[selectOptions.selectedIndex].value;
}
I've tried selectOptions.value but I still can't get the selected value.
Note that, I've added createRenderRoot() {return this;} to disable the shadowDOM.
Here I'm having no_of_devices which has three fields 'macAddress', 'useWith' and 'type' in a row, the count of row depends upon the number of devices selected from select field, so I'm using body-parser and i want to get all the row data which has name generated using for loop so all the rows having macAddress will have name='macAdd0',name="macAdd1" etc same goes with 'type' and 'useWith' field.
HTML
<select id="noOfDevice" class="form-control" name="noOfDevice" onchange="getDeviceCount(this)">
<option selected value="0">Select</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
</select>
Javascript
<script>
var macAdd;
var useWith;
var type;
var noOfDevice = req.body.noOfDevice;
for (var i = 0; i < noOfDevice; i++) {
var k = i.toString();
macAdd[i] = req.body.macAdd[i];
useWith[i] = req.body.useWith[i];
type[i] = req.body.type[i];
//console.log(req.body.macAdd);
process.deviceManger(macAdd[i], useWith[i], type[i]);
console.log('Device' + i + 'Details Update');
}
function getDeviceCount(sel) {
console.log("No of Device:" + sel.value);
var currCount = sel.value;
var div = document.createElement("div");
for (var i = 0; i < currCount; i++) {
div.setAttribute('id', 'addElements');
div.innerHTML += '<div class="row"><div class="form-row"><div class="form-group col-md-3"><label for="inputCity">Mac Address</label><input type="text" class="form-control" id="macAdd" name="macAdd' + i + '"></div> <div class="form-group col-md-3"><label for="inputState">Type of Device</label> <select id="inputState" class="form-control" name="deviceType' + i + '"> <option selected>Select</option> <option value="Irys Slate">Irys Slate</option> <option value="Irys Sling">Irys Sling</option> <option value="Irys Swing">Irys Swing</option> </select> </div> <div class="form-group col-md-3"> <label for="inputState">Use with</label> <select id="inputState" class="form-control" name="useWith' + i + '"> <option selected>Select</option> <option value="All">All</option> <option value="Nconnect">Nconnect</option> <option value="Tiara">Tiara</option> <option value="Corona">Corona</option> <option value="TiaraMini">TiaraMini</option> <option value="Nconnect+Tiara">Nconnect+Tiara</option> <option value="Nconnect+Corona">Nconnect+Corona</option> <option value="Nconnect+TiaraMini">Nconnect+TiaraMini</option> </select> </div> </div> </div>';
document.getElementById("devices").appendChild(div);
}
}
</script>
I want to change the src attribute of image according to the selection of drop list menu. For example, the droplist contains "Peter, Henry, David", the image will show different images accordingly to the name (something like peter.png, henry.png, david.png, or 1.png, 2.png, 3.png)
So here is what I did. However, it didn't work. I don't know what I missed here.
<select id="name" name="name">
<option value="">Please select...</option>
<option value="Peter">Peter</option>
<option value="Henry">Henry</option>
<option value="David">David</option>
</select>
<img src="default.png" id="imageholder" alt="imageholder" />
<script type="text/javascript">
$(document).ready(function() {
$("#name").change(function() {
var nameholder= $("#name").val();
$('#imageholder').attr('src', nameholder + ".png" );
});
})
</script>