Once the user selects 'Cancelled' in the drop-down menu, the input field should appear to the user, so that the user can enter their reason for cancellation.
But it's not working.
By default, the input field is disabled, and doesn't appear to the user.
I tried to use onselect but to no avail.
HTML
<div>
<select placeholder="Status?" onselect="closeReasonAction" name="changeStatus" id="changeStatus" disabled>
<option value="Pending">Pending</option>
<option value="Quoted">Quoted</option>
<option value="Cancelled">Cancelled</option>
<option value="Confirmed">Confirmed</option>
</select>
<input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px;">
</div>
if (document.getElementById('changeStatus').value != "Cancelled") {
document.getElementById("closeReason").style.opacity = 0;
document.getElementById("closeReason").disabled = true;
}
else if (document.getElementById('changeStatus').value == "Cancelled") {
document.getElementById("closeReason").style.opacity = 1;
document.getElementById("closeReason").disabled = false;
}
once the user clicks on cancelled the input field disabled here should just be abled and appear for the user to enter
I think you missed the onchange function what happens when you change the select. Modify the onselect function to onchange function and add opacity:0 into input style and make it disabled initially.
function closeReasonAction() {
if (document.getElementById('changeStatus').value != "Cancelled") {
document.getElementById("closeReason").style.opacity = 0;
document.getElementById("closeReason").disabled = true;
}
else if (document.getElementById('changeStatus').value == "Cancelled") {
document.getElementById("closeReason").style.opacity = 1;
document.getElementById("closeReason").disabled = false;
}
}
<div>
<select placeholder="Status?" onchange="closeReasonAction()" name="changeStatus" id="changeStatus" >
<option value="Pending">Pending</option>
<option value="Quoted">Quoted</option>
<option value="Cancelled">Cancelled</option>
<option value="Confirmed">Confirmed</option>
</select>
<input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px; opacity:0" disabled />
</div>
You have missed your onchange function.
function func(){
if (document.getElementById('changeStatus').value != "Cancelled")
{
document.getElementById("closeReason").style.opacity = 0;
document.getElementById("closeReason").disabled = true;
}
else if (document.getElementById('changeStatus').value == "Cancelled") {
document.getElementById("closeReason").style.opacity = 1;
document.getElementById("closeReason").disabled = false;
}
}
func()
<div>
<select placeholder="Status?" onselect="closeReasonAction" name="changeStatus" id="changeStatus" onchange="func()">
<option value="Pending">Pending</option>
<option value="Quoted">Quoted</option>
<option value="Cancelled">Cancelled</option>
<option value="Confirmed">Confirmed</option>
</select>
<input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px;">
</div>
You have to remove disabled from the select element, and place disabled on the closeReason element, otherwise users will not be able to interact with this element.
You need to add opacity: 0 to the closeReason element, otherwise it will be visible when the page loads.
You need to change onselect to onchange. onselect can only be used for <input type='text'> and <textarea> in forms.
You need to add () to the end of onchange=closeReasonAction so that it becomes onchange=closeReasonAction() since you are trying to call a function on its change event.
You actually need to wrap your JS code in a function called closeReasonAction, otherwise you're trying to call a non-existent function.
Example
function closeReasonAction(){
if (document.getElementById('changeStatus').value != "Cancelled") {
document.getElementById("closeReason").style.opacity = 0;
document.getElementById("closeReason").disabled = true;
}
else if (document.getElementById('changeStatus').value == "Cancelled") {
document.getElementById("closeReason").style.opacity = 1;
document.getElementById("closeReason").disabled = false;
}
}
<div>
<select placeholder="Status?" onchange="closeReasonAction()" name="changeStatus" id="changeStatus">
<option value="Pending">Pending</option>
<option value="Quoted">Quoted</option>
<option value="Cancelled">Cancelled</option>
<option value="Confirmed">Confirmed</option>
</select>
<input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px; opacity: 0;" disabled>
</div>
The if condition should be inside a function and the function should be called on change event of the select box
function closeReasonAction() {
if (document.getElementById('changeStatus').value != "Cancelled") {
//document.getElementById("closeReason").style.opacity = 0;
document.getElementById("closeReason").disabled = true;
} else if (document.getElementById('changeStatus').value == "Cancelled") {
document.getElementById("closeReason").style.opacity = 1;
document.getElementById("closeReason").disabled = false;
}
}
<div>
<select placeholder="Status?" onchange="closeReasonAction()" name="changeStatus" id="changeStatus">
<option value="Pending">Pending</option>
<option value="Quoted">Quoted</option>
<option value="Cancelled">Cancelled</option>
<option value="Confirmed">Confirmed</option>
</select>
<input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px;">
</div>
You should change onselect with onchange:
function closeReasonAction($el) {
var $reason = document.getElementById("closeReason");
if ($el.value != "Cancelled") {
$reason.disabled = true;
} else if ($el.value == "Cancelled") {
$reason.style.opacity = 1;
$reason.disabled = false;
}
}
<div>
<select placeholder="Status?" onchange="closeReasonAction(this)" name="changeStatus" id="changeStatus">
<option value="Pending">Pending</option>
<option value="Quoted">Quoted</option>
<option value="Cancelled">Cancelled</option>
<option value="Confirmed">Confirmed</option>
</select>
<input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px;">
</div>
You should use the onchange function, rather than onclick on each individual option.
Use a value attribute on each option to store the data, and use an instance of this to assign the change (or event.target)
You have no ID on your text field
You're missing the end quote for your onclick function
<select name="" onchange="myFunction(event)">
<option disabled selected>Choose Database Type</option>
<option value="Green">green</option>
<option value="Red">red</option>
<option value="Orange">orange</option>
<option value="Black">black</option>
</select>
And the function:
function myFunction(e) {
document.getElementById("myText").value = e.target.value
}
Related
Tried to create an Others option in a drop down menu, which by doing so, activates a textbox to type in.
However, my current method of doing this causes the remaining options to be invisible when clicked, and the textbox does not appear when the Others option is clicked.
function disappear(val) {
var textbox = document.getElementById('issue');
if (val == 'other') {
textbox.style.display = 'block';
} else {
textbox.style.display = 'none';
}
}
<select name="issue" id="issue" onchange='disappear(this.value)'>
<option disabled selected></option>
<option value="bug">Bug</option>
<option value="lacking">Lack of Use</option>
<option value="other">Other</option>
</select>
<div id="textbox"></div>
you are selecting the wrong element
var textbox=document.getElementById('textbox');
function disappear(val){
var textbox=document.getElementById('textbox');
if(val=='other'){
textbox.style.display='block';
}
else{
textbox.style.display='none';
}
}
#textbox{
width:90px;
height:60px;
background-color:red;
display:none;
}
<select name="issue" id="issue" onchange='disappear(this.value)'>
<option disabled selected></option>
<option value="bug">Bug</option>
<option value="lacking">Lack of Use</option>
<option value="other">Other</option>
</select>
<div id="textbox"></div>
that's how you must do it:
var textbox=document.getElementById('textbox');
You're really close! The only thing left is to change the id in the document.getElementById to the correct element and add the input field with the styling.
function disappear(val) {
var textbox = document.getElementById('textbox');
if (val == 'other') {
textbox.style.display = 'block';
} else {
textbox.style.display = 'none';
}
}
<select name="issue" id="issue" onchange='disappear(this.value)'>
<option disabled selected></option>
<option value="bug">Bug</option>
<option value="lacking">Lack of Use</option>
<option value="other">Other</option>
</select>
<input id="textbox" type="text" style="display: none;">
Should your textbox actually be a textarea element? Note: if it's meant to be a div it won't appear on the page (unless you style it) because its content is empty.
Use CSS to initialise the textbox display to none.
In the function you've picked up the select element with your query, and not the textbox element which is why the options are disappearing when you set the display to none. Maybe add an additional check to see if the style is set to block before you set the display to none.
function disappear(val) {
var textbox = document.getElementById('textbox');
if (val == 'other') {
textbox.style.display = 'block';
} else {
if (textbox.style.display === 'block') {
textbox.style.display = 'none';
}
}
}
#textbox { display: none; }
<select name="issue" id="issue" onchange='disappear(this.value)'>
<option disabled selected></option>
<option value="bug">Bug</option>
<option value="lacking">Lack of Use</option>
<option value="other">Other</option>
</select>
<textarea id="textbox"></textarea>
I am a newbie and I have this project where the user should have the option of custom input if the listed options are not in dropdown.
HTML
<div class="form-group">
<label class="col-sm-2 col-form-label">Select Page Size</label>
<select name = 'pageSelector' class="col-sm-3">
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
</div>
PHP
if(isset($_POST["pageSelector"]))
{
$result = $_POST['pageSelector'];
if($result == "")
{
echo "<script>alert('Please select the Page')</script>";
}
$result_explode = explode('|', $result);
$width_page = $result_explode[0];
$height_page = $result_explode[1];
// Converting the string variables to integer
$width_plate=(double)$width_plate;
$height_plate=(double)$height_plate;
$width_page=(double)$width_page;
$height_page=(double)$height_page;
// To calculate the number of pages that can be print with one selected plate
$calculated_width = $width_plate/$width_page;
$calculated_height = $height_plate/$height_page;
$print_include = (int)$calculated_height*(int)$calculated_width;
echo "<div class='h1'>Number of Prints in one plate ".$print_include." prints</div> ";
}
I would like if the user selects the custom option then a input text should appear on the screen.
If user selected a custom option then you can give him an input.
let selectEl = document.getElementById('select-list');
selectEl.addEventListener('change', (e) => {
if (e.target.value == 'custom') {
document.getElementById('txt-custom').style.display = 'block';
} else {
document.getElementById('txt-custom').style.display = 'none';
}
});
#txt-custom {
display: none;
}
<select id="select-list">
<option value="">Select an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="custom">Custom</option>
</select>
<input type="text" id="txt-custom" name="custom-value" />
var pageSelector = document.getElementById('pageSelector');
var customInput = document.getElementById('customInput');
pageSelector.addEventListener('change', function(){
if(this.value == "custom") {
customInput.classList.remove('hide');
} else {
customInput.classList.add('hide');
}
})
.hide {
width: 0;
height: 0;
opacity: 0;
}
<div class="form-group">
<label class="col-sm-2 col-form-label">Select Page Size</label>
<select name = 'pageSelector' class="col-sm-3 page" id="pageSelector">
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
<input type="text" class="hide" placeholder="Custom Selector" name="custom" id="customInput">
</div>
Demo Code :
First you should have input with style="display:none" and with jQuery
jQuery(document).ready(function() {
jQuery("#selectId").change(function() {
if (jQuery(this).val() === 'custom'){
jQuery('input[name=other_input]').show();
} else {
jQuery('input[name=other_input]').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select name = 'pageSelector' class="col-sm-3" id="selectId" >
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
<br><br><br>
<input type="text" name="other_input" style="display:none" />
Angular Version
Angular CLI: 13.0.3
Node: 16.15.0
Package Manager: npm 8.5.5
In .html File
**<div class="col-md-6">
<label class="form-label">Attendence Type</label>
<select (change)="type($event)" class="form-select" aria-label="Default select example" >
<option selected value="P">Present</option>
<option value="A">Absent</option>
<option value="PL">Paid Leave</option>
<option value="UL">Unpaid Leave</option>
</select>
</div>**
I want to Show this input after select paid leave
**<div *ngIf="plFlag" class="col-md-6">
<label class="form-label">Leave Type</label>
<select class="form-select" aria-label="Default select example">
<option selected disabled>Leave Type</option>
<option value="CL">Causel Leave</option>
<option value="SL">Seek Leave</option>
</select>
</div>**
and in .ts File
**type(event: any) {
console.log(event.target.value);
if (event.target.value == "PL") {
this.plFlag = true;
}
else {
this.plFlag = false;
}
}**
I have this code i want to enabled or disable a certain select box for transaction.
I don't know what code is correct for this one hope you can lend me a hand.
<select id="paymenttype" class="paymenttype" name="input-paymenttype" onChange="changetextbox()">
<option value="Cash">Cash</option>
<option value="Installment">Installment</option>
</select>
<select id="paymentterms" class="" name="input-paymentterms" disabled="true">
<option value="3">3x</option>
<option value="4">6x</option>
<option value="6">12x</option>
</select>
<script type="text/javascript">
function changetextbox()
{
var e = document.getElementById("paymenttype");
var value = e.options[e.selectedIndex].value;
if (value == "Cash") {
alert('I need to disable payment terms');
}
else{
alert('I need to enable payment terms');
document.getElementById("paymentterms").disable =='false';
}
}
</script>
Use this to remove attribute:
document.getElementById("paymentterms").removeAttribute("disabled");
You can use .removeAttribute() you can check it here
function changetextbox()
{
var e = document.getElementById("paymenttype");
var value = e.options[e.selectedIndex].value;
if (value == "Cash") {
alert('I need to disable payment terms');
}
else{
alert('I need to enable payment terms');
document.getElementById("paymentterms").removeAttribute('disabled');
}
}
<select id="paymenttype" class="paymenttype" name="input-paymenttype" onChange="changetextbox()">
<option value="Cash">Cash</option>
<option value="Installment">Installment</option>
</select>
<select id="paymentterms" class="" name="input-paymentterms" disabled="true">
<option value="3">3x</option>
<option value="4">6x</option>
<option value="6">12x</option>
</select>
Thank you so much for the answer. I tried and test all your answer. It is quite impressive I finish it with your help. So i decided to paste the final code here.
<select id="paymenttype" class="paymenttype" name="input-paymenttype" onChange="changetextbox()">
<option value="Cash">Cash</option>
<option value="Installment">Installment</option>
</select>
<select id="paymentterms" class="" name="input-paymentterms" disabled="true">
<option value="3">3x</option>
<option value="4">6x</option>
<option value="6">12x</option>
</select>
<script type="text/javascript">
function changetextbox()
{
var e = document.getElementById("paymenttype");
var value = e.options[e.selectedIndex].value;
if (value == "Cash") {
document.getElementById("paymentterms").disabled = true;
} else
{
document.getElementById("paymentterms").disabled = false;
}
}
</script>
My problem is on how to make the second drop-down display once my first dropdown value selected is Courier
First the user must check the checkbox to show the first drop-down and this is my code
<p> <input type="checkbox" id="contract" class="icheckbox_flat-green" onclick="myFunctionCons()"> Contract </p>
Once checked, this contract via dropdown (first dropdown) will be visible
<select id="contractvia" style="display:none" class="form-control">
<option value="0">Via..</option>
<option value="1">Email</option>
<option value="2">FB Messenger</option>
<option value="3">Courier</option>
<option value="4">Others..</option>
</select>
My goal is to display this second dropdown once the contractvia's selected option is Courier
<select id="contractCourier" style="display:none" class="form-control">
<option value="">Courier</option>
<option value="scanned">Scanned</option>
<option value="net">Original</option>
<option value="mouth">Photocopy</option>
</select>
My first task to show the first dropdown once the checkbox is checked is achieved using this code, but it doesn't work for displaying the second dropdown once first dropdown's selected option is 'Courier'
<script>
function myFunctionCons() {
var con = document.getElementById("contract");
var conv = document.getElementById("contractvia");
var conc = document.getElementById("contractCourier");
if (con.checked == true) {
conv.style.display = "block";
} else {
conv.style.display = "none";
}
if ($("#contractvia").val() == 3)
conc.style.display = "block";
else
conc.style.display = "none";
}
</script>
Please check this in Vanilla Javascript
var con = document.getElementById("contract");
var conv = document.getElementById("contractvia");
var conc = document.getElementById("contractCourier");
//On checkbox return first select
con.addEventListener('click', myFunctionCons );
//if value of option is 3 show next select
conv.addEventListener('change', showSecondSelect );
function showSecondSelect() {
//3 is the index of courier
if (conv.selectedIndex == 3) {
conc.style.display = "block";
} else {
conc.style.display = "none";
}
}
function myFunctionCons() {
if (con.checked == true) {
conv.style.display = "block";
} else {
conv.style.display = "none";
}
}
#contractvia,
#contractCourier {
display: none;
}
<p><input type="checkbox" id="contract" class="icheckbox_flat-green">Contract</p>
<select id="contractvia" class="form-control">
<option value="0">Via..</option>
<option value="1">Email</option>
<option value="2">FB Messenger</option>
<option value="3">Courier</option>
<option value="4">Others..</option>
</select>
<select id="contractCourier" class="form-control">
<option value="Courier">Courier</option>
<option value="scanned">Scanned</option>
<option value="net">Original</option>
<option value="mouth">Photocopy</option>
</select>
I have a drop drown list and I am having trouble checking whether or not a value has been selected from the drop down list
Below is my HTML Code :
<label class="paylabel" for="cardtype">Card Type:</label>
<select id="cardtype" name="cards">
<option value="selectcard">--- Please select ---</option>
<option value="mastercard">Mastercard</option>
<option value="maestro">Maestro</option>
<option value="solo">Solo (UK only)</option>
<option value="visaelectron">Visa Electron</option>
<option value="visadebit">Visa Debit</option>
</select><br/>
Below is my JavaScript Code :
var card = document.getElementByName("cards")[0].value;
if (card.value == selectcard) {
alert("Please select a card type");
}
Well you missed quotation mark around your string selectcard it should be "selectcard"
if (card.value == selectcard)
should be
if (card.value == "selectcard")
Here is complete code for that
function validate()
{
var ddl = document.getElementById("cardtype");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == "selectcard")
{
alert("Please select a card type");
}
}
JS Fiddle Demo
<script>
var card = document.getElementById("cardtype");
if(card.selectedIndex == 0) {
alert('select one answer');
}
else {
var selectedText = card.options[card.selectedIndex].text;
alert(selectedText);
}
</script>
You can check if the index of the selected value is 0 or -1 using the selectedIndex property.
In your case 0 is also not a valid index value because its the "placeholder": <option value="selectcard">--- Please select ---</option>
LIVE DEMO
function Validate()
{
var combo = document.getElementById("cardtype");
if(combo.selectedIndex <=0)
{
alert("Please Select Valid Value");
}
}
function check(selId) {
var sel = document.getElementById(selId);
var dropDown_sel = sel.options[sel.selectedIndex].text;
if (dropDown_sel != "none") {
state=1;
//state is a Global variable initially it is set to 0
}
}
function checkstatevalue() {
if (state==1) {
return 1;
}
return false;
}
and html is for example
<form name="droptest" onSubmit="return checkstatevalue()">
<select id='Sel1' onchange='check("Sel1");'>
<option value='junaid'>Junaid</option>
<option value='none'>none</option>
<option value='ali'>Ali</option>
</select>
</form>
Now when submitting a form first check what is the value of state if it is 0 it means that no item has been selected.
<label class="paylabel" for="cardtype">Card Type:</label>
<select id="cardtype" name="cards">
<option value="selectcard">--- Please select ---</option>
<option value="mastercard" selected="selected">Mastercard</option>
<option value="maestro">Maestro</option>
<option value="solo">Solo (UK only)</option>
<option value="visaelectron">Visa Electron</option>
<option value="visadebit">Visa Debit</option>
</select><br />
<script>
var card = document.getElementById("cardtype");
if (card.options[card.selectedIndex].value == 'selectcard') {
alert("Please select a card type");
return false;
}
</script>
I believe this is the most simple in all aspects unless you call the validate function be other means. With no/null/empty value to your first option is easier to validate. You could also eliminate the first option and start with the most popular card type.
<form name="myForm">
<select id="cardtype" name="cards">
<option value="">--- Please select ---</option>
<option value="mastercard" selected="selected">Mastercard</option>
<option value="maestro">Maestro</option>
<option value="solo">Solo (UK only)</option>
<option value="visaelectron">Visa Electron</option>
<option value="visadebit">Visa Debit</option>
</select><br />
<input type="submit" name="submit" class="button" value="SUBMIT" onmouseover="validate()"></form>
<script>
function validate() {
if (document.myform.cards.value == "") {
alert("Please select a card type");
document.myForm.cards.focus();
}
</script>
function checkSelected() {
if (optionsId.selectedIndex < 0) {
alert("Please select an item from options");
return false;
}}
Select select = new Select(_element);
List<WebElement> selectedOptions = select.getAllSelectedOptions();
if(selectedOptions.size() > 0){
return true;
}else{
return false;
}