We Keep Coding

How to remove options when clicked on a button

How can i remove options on click of a button that are nested inside an select element?
Is my mistake in for loop ? I can't figure it out
var select = document.getElementById('colorSelect');
var options = document.getElementsByTagName('option');
console.log(options);
function removecolor() {
for (var i = 0; i < options.length; i++) {
console.log(select.value);
//Here i need to delete option value that is selected
}
}
<form>
<select id="colorSelect">
<option>Red</option>
<option>Green</option>
<option>White</option>
<option>Black</option>
</select>
<input type="button" onclick="removecolor()" value="Select and Remove"><br>
</form>

Just use .remove
const select = document.getElementById('colorSelect');
document.getElementById("remove").addEventListener("click",function() {
const opt = select.options[select.selectedIndex];
if (opt) opt.remove()
})
<form>
<select id="colorSelect">
<option>Red</option>
<option>Green</option>
<option>White</option>
<option>Black</option>
</select>
<input type="button" id="remove" value="Select and Remove"><br>
</form>
If you are not allowed to change the HTML and event handler you can do
const select = document.getElementById('colorSelect');
function removecolor() {
const opt = select.options[select.selectedIndex];
if (opt) opt.remove()
}
<form>
<select id="colorSelect">
<option>Red</option>
<option>Green</option>
<option>White</option>
<option>Black</option>
</select>
<input type="button" onclick="removecolor()" value="Select and Remove"><br>
</form>

The linked question will solve your problem, with a slight changes.
Here values are removed using oninput event
var selectobject = document.getElementById("colorSelect");
function func() {
console.log(selectobject.value)
selectobject.options[selectobject.selectedIndex].remove();
}
<select id="colorSelect" oninput="func()">
<option>Red</option>
<option>Green</option>
<option>White</option>
<option>Black</option>
</select>

How to validate the select method with submit type?

I want to validate the select method with submit type button. I have created a form and under that, I have created the select method and given some options. By submit type, the onClick should validate my submit type with the options in the select method. How can I assign the value of option
to var t based on select?
According to the select option my var t should be changed.
If the value is volvo then it should print val11, similarly Saab= val14, opel= val82, Audi= val34
<select name="carlist" class="temp>
<option value="10">Volvo</option>
<option value="20">Saab</option>
<option value="30">Opel</option>
<option value="45">Audi</option>
</select>
<input type="submit" class="temp" value="submit the answer">
<script>
var t;
if () {
t=value;
} else if () {
t=value;
} else if () {
t=value;
}else {
t=value;
}
</script>

You can call a function on clicking the button. Inside the function get the text of the selected option:
function getValue(){
var el = document.querySelector('.temp');
var val = el.options[el.selectedIndex].text;
var t;
if(val == "Volvo")
t = 'val11';
else if(val == "Saab")
t = 'val14';
if(val == "Opel")
t = 'val82';
else if(val == "Audi")
t = 'val34';
alert(t);
}
<form>
<select name="carlist" class="temp">
<option value="10">Volvo</option>
<option value="20">Saab</option>
<option value="30">Opel</option>
<option value="45">Audi</option>
</select>
<input onclick="getValue()" type="submit" class="temp" value="submit the answer">
</form>
You can also think of using data attribute which is more cleaner and simpler:
function getValue(){
var el = document.querySelector('.temp');
var t = el.options[el.selectedIndex].getAttribute('data-val');
alert(t);
}
<form>
<select name="carlist" class="temp">
<option value="10" data-val="val11">Volvo</option>
<option value="20" data-val="val14">Saab</option>
<option value="30" data-val="val82">Opel</option>
<option value="45" data-val="val34">Audi</option>
</select>
<input onclick="getValue()" type="submit" class="temp" value="submit the answer">
</form>

You can do a few things, here's the simplest I could get away with.
function submitForm() {
const value = document.querySelector('[name="carlist"').value;
console.log(value);
return false; // to prevent it navigating away.
}
<form onsubmit="submitForm()">
<select name="carlist" class="temp">
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
<input type="submit" class="temp" value="submit the answer">
You can also have some validation running earlier, e.g. on change:
/**
* This function runs on form submit.
*/
function submitForm(event) {
const value = document.querySelector('[name="carlist"').value;
console.log(value);
// to prevent it navigating away.
event.preventDefault();
return false;
}
/**
* This function runs on selection change
*/
function validateCar(changeEvent) {
console.log('Change');
// do something with changeEvent
}
<form onsubmit="submitForm(event)">
<select name="carlist" class="temp" onchange="validateCar(event)">
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
<input type="submit" class="temp" value="submit the answer">

You can set an id attribute on the select element and then access it through a querySelector or getElementById.
<form id="carForm">
<select name="carlist" class="temp" id="car">
<option value="val11">Volvo</option>
<option value="val14">Saab</option>
<option value="val82">Opel</option>
<option value="val34">Audi</option>
</select>
</form>
let carForm = document.getElementById('carForm');
carForm.onsubmit = function(event) {
var t = document.getElementById('car');
...
}
See codepen example

Make a Textfield required when list/menu option is selected

I want to validate a textfield when a relating dropdown is selected.
usually it should be allowed to submit null but when its relating drop menu is selected null should not be allowed.
<select>
<option></option>
<option value="red">one</option>
<option value="blue">two</option>
<option value="green">three</option>
</select>
Lets say i select red from the dropdown
<input name="red" id="red" type="text">
should be required, while others like <input name="blue" id="blue" type="text"><input name="green" id="green" type="text"> can be sent as null and vice versa.
The text field should serve as a full detail for the option selected so, it should correspend.
Is there a way to handle this with javascript?

<html>
<head>
<script>
window.addEventListener('load',function(){ SimpleVal.init(); });
var SimpleVal = {};
SimpleVal.init = function(){
this.form = document.getElementById("myForm");
this.textInputs = [this.form.elements.namedItem("red"), this.form.elements.namedItem("blue"),this.form.elements.namedItem("green")];
for(let i = 0; i < this.textInputs.length; i++) this.textInputs[i].disabled = true;
this.form.elements.namedItem("submit").disabled = true;
let sel = this.form.elements.namedItem("select");
this.form.addEventListener("change",function(){
for(let i = 0; i < this.textInputs.length; i++) this.textInputs[i].disabled = true;
this.form.elements.namedItem("submit").disabled = true;
if(sel.value){
this.form.elements.namedItem(sel.value).disabled = false;
if(this.form.elements.namedItem(sel.value).value) this.form.elements.namedItem("submit").disabled = false;
}
}.bind(this));
};
</script>
</head>
<body>
<form id='myForm'>
<select name='select'>
<option></option>
<option value="red">one</option>
<option value="blue">two</option>
<option value="green">three</option>
</select>
<input name='red' type='text'/>
<input name='blue' type='text'/>
<input name='green' type='text'/>
<input name='submit' type='submit'/>
</form>
</body>
</html>
https://jsfiddle.net/d0ep6z16/

https://jsfiddle.net/yce3Ljpf/1/
<select id="colors">
<option></option>
<option value="red">one</option>
<option value="blue">two</option>
<option value="green">three</option>
</select>
<input name="blue" id="red" type="text" class="color-input">
<input name="blue" id="blue" type="text" class="color-input">
<input name="green" id="green" type="text" class="color-input">
<script>
document.getElementById('colors').addEventListener("change", function() {
if (this.value.length) {
var inputs = document.getElementsByClassName("color-input");
for(var i = 0; i < inputs.length; i++) {
inputs.item(i).removeAttribute('required');
}
document.getElementById(this.value).setAttribute('required', 'required');
}
});
</script>

OK so I've laid this out so you can see what's happening:
<select id="colourSelect" onchange="val()">
<option value="nothing">Please Choose:</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
<br><br>
<input type="text" id="colourTextInput" size="50" onkeyup="clearMe()">
<br><br>
<button type="submit">Submit Button</button>
<script>
function val() {
d = document.getElementById("colourSelect").value;
if(d !== "nothing")
{
document.getElementById("colourTextInput").value = d;
}
else
{
document.getElementById('colourTextInput').value = "";
}
}
function clearMe() {
selectBox = document.getElementById("colourSelect");
selectBox.selectedIndex = null;
}
</script>
When the value of the dropdown is changed the value in the text box is set to the same as the dropdown. If they then go to the text field and try to change the colour, it defaults the dropdown back to its default setting, meaning that you can only ever have one or the other.
It could be made cleaner by simply clearing the text field when the dropdown is selected etc, but it gives you something to work with.
https://jsfiddle.net/cx1x2txu/

I modified this and got it right. Thanks all
<html><html>
<head>
<script>
window.addEventListener('load',function(){ SimpleVal.init(); });
var SimpleVal = {};
SimpleVal.init = function(){
this.form = document.getElementById("myForm");
this.textInputs = [this.form.elements.namedItem("red"), this.form.elements.namedItem("blue"),this.form.elements.namedItem("green")];
for(let i = 0; i < this.textInputs.length; i++) this.textInputs[i].disabled = true;
this.form.elements.namedItem("submit").disabled = true;
let sel = this.form.elements.namedItem("select");
this.form.addEventListener("change",function(){
for(let i = 0; i < this.textInputs.length; i++) this.textInputs[i].disabled = true;
this.form.elements.namedItem("submit").disabled = true;
if(sel.value){
this.form.elements.namedItem(sel.value).disabled = false;
if(this.form.elements.namedItem(sel.value).value) this.form.elements.namedItem("submit").disabled = false;
}
}.bind(this));
};
</script>
</head>
<body>
<form id='myForm'>
<select name='select'>
<option></option>
<option value="red">one</option>
<option value="blue">two</option>
<option value="green">three</option>
</select>
<input name='red' type='text'/>
<input name='blue' type='text'/>
<input name='green' type='text'/>
<input name='submit' type='submit'/>
</form>
</body>
</html>

How to keep once changed data value on select options?

$('.sela').change(function(){
var obj = $('.sela:visible');
var uname = obj.find(':selected').data('x');
$('#inptest').val(uname);
})
$('#btn').click(function(){
$('.sela:visible').find(':selected').attr('data-x', 999)
var a = $('.sela:visible').find(':selected').attr('data-x')
$('#inptest').val(a);
});
#btn{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='sela'>
<option value='lorem1' data-x='left'>ADMIN</option>
<option value='lorem2' data-x='right'>AUTHS</option>
</select>
<br><br>
<select class='sela'>
<option value='lorem3' data-x='up'>SKY</option>
<option value='lorem4' data-x='down'>EARTH</option>
</select>
<br><br>
<input type='text' id='inptest'value='323'>
<br><br>
<div id='btn'>BUTTON</div>
Change first sela to AUTHS.
inptest becomes right
Click on btn - sela selected option data-x is 999 and inptest is 999
Now change sela back to ADMIN and again to AUTH.
I'm expecting it to keep 999 but it becomes right.
How to keep once changed data value on sela options?

Be consistent,
either use .attr('data-x')/.attr('data-x', newValue) or use .data('x')/.data('x',newValue)
So
$('.sela').change(function() {
var obj = $('.sela:visible');
var uname = obj.find(':selected').data('x');
$('#inptest').val(uname);
})
$('#btn').click(function() {
$('.sela:visible').find(':selected').data('x', 999)
var a = $('.sela:visible').find(':selected').data('x')
$('#inptest').val(a);
});
#btn {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='sela'>
<option value='lorem1' data-x='left'>ADMIN</option>
<option value='lorem2' data-x='right'>AUTHS</option>
</select>
<br><br>
<select class='sela'>
<option value='lorem3' data-x='up'>SKY</option>
<option value='lorem4' data-x='down'>EARTH</option>
</select>
<br><br>
<input type='text' id='inptest' value='323'>
<br><br>
<div id='btn'>BUTTON</div>
Or
$('.sela').change(function(){
var obj = $('.sela:visible');
var uname = obj.find(':selected').attr('data-x');
$('#inptest').val(uname);
})
$('#btn').click(function(){
$('.sela:visible').find(':selected').attr('data-x', 999)
var a = $('.sela:visible').find(':selected').attr('data-x')
$('#inptest').val(a);
});
#btn{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='sela'>
<option value='lorem1' data-x='left'>ADMIN</option>
<option value='lorem2' data-x='right'>AUTHS</option>
</select>
<br><br>
<select class='sela'>
<option value='lorem3' data-x='up'>SKY</option>
<option value='lorem4' data-x='down'>EARTH</option>
</select>
<br><br>
<input type='text' id='inptest'value='323'>
<br><br>
<div id='btn'>BUTTON</div>

javascript dropdown validation

I need to alert if you haven't selected anything and couldn't get it to work. It needs to show what is where wrong and alert with a window.
<!DOCTYPE html>
<html>
<head>
<select id="ddlView">
<option value="0">Select</option>
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>
<input type="button" onclick="myFunction()" value="select" />
<script>
function Validate()
{
var e = document.getElementById("ddlView");
var strUser = e.options[e.selectedIndex].value;
var strUser1 = e.options[e.selectedIndex].text;
if(strUser==0)
{
alert("Please select a user");
}
}
</td></head>
</html>

I think you have multiple problems here.
You need to add a body tag
Set the correct function name in your button.
you need a closing script tag
Give this a try:
<!DOCTYPE html>
<html>
<body>
<select id="ddlView">
<option value="0">Select</option>
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>
<input type="button" onclick="Validate()" value="select" />
<script type="text/javascript">
function Validate()
{
var e = document.getElementById("ddlView");
var strUser = e.options[e.selectedIndex].value;
var strUser1 = e.options[e.selectedIndex].text;
if(strUser==0)
{
alert("Please select a user");
}
}
</script>
</body>
</html>

This is not you asked for but you can still consider what i did.
Have an option with value 0 which is going to be the default option of the dropdown and add required attribute to the select element.
Once this select element is in a form and is submitted ,HTML is automatically going to take over the validation part.
<select required>
<option value="">Select</option>
<option value="1">Option1</option>
</select>

<body>
<div>
<span>Select the course : </span>
<select id="ddlView">
<option value="0">Select</option>
<option value="1">Java Script</option>
<option value="2">CSS</option>
<option value="3">JQuery</option>
<option value="3">HTML</option>
<option value="3">C#</option>
</select>
</div>
<br >
<input type="button" class="btn" value="Submit" id="btnSubmit" onclick="ddlValidate();" />
<script type="text/javascript">
function ddlValidate() {
var e = document.getElementById("ddlView");
var optionSelIndex = e.options[e.selectedIndex].value;
var optionSelectedText = e.options[e.selectedIndex].text;
if (optionSelIndex == 0) {
alert("Please select a Course");
}
else {
alert("Success !! You have selected Course : " + optionSelectedText); ;
}
}
</script>

That has to be in your form processing script, you can just add it to the top of your code and check if it has been submitted.
// Place this atop of your script.
if(isset($_POST)) {
if($_POST['member_id']) {
// Your codes here
}
}

call this function at a button click(OnClientClick=" return Validate()") you have to list an item for the 0'th positions(ddlView.Items.Insert(0, new ListItem("Select...", "0"));)
function Validate(){
var region = document.getElementById('<%=ddlView.ClientID%>').value;
if (region == 0) {
alert("Please select a user");
return false;
}
}