Develop Reference

select the value on dropdown then display another box?

can anyone help me. i want to display reasons box if i select pending or incomplete job status.
DROPDOWN
<div class="form-group">
<label for="exampleFormControlSelect2">Job Status</label>
<select type="text" id="job_status" name="job_status" onchange="myFunction()">
<option value=''></option>
<option value="Doing">Doing</option>
<option value="Pending">Pending</option>
<option value="Incomplete">Incomplete</option>
<option value="Completed">Completed</option>
</select>
</div>
REASON BOX THAT I WANT TO APPEAR IF I SELECTED PENDING OR INCOMPLETE
<div class="form-group row">
<label for="reason" class="col-sm-2 col-form-label">Reason</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3">
</div>
</div>
THE SCRIPT
<script>
function myFunction() {
var x = document.getElementById("job_status").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
THANKS ALL

You just need to change the css of the input whenever you select those options using simple if else condition.
function myFunction() {
var x = document.getElementById("job_status").value;
if(x == 'Pending' || x == 'Incomplete'){
document.getElementById("reason").style.display = 'block';
}
else {
document.getElementById("reason").style.display = 'none';
}
}
#reason {
display:none;
}
<div class="form-group">
<label for="exampleFormControlSelect2">Job Status</label>
<select type="text" id="job_status" name="job_status" onchange="myFunction()">
<option selected disabled>Select Status</option>
<option value="Doing">Doing</option>
<option value="Pending">Pending</option>
<option value="Incomplete">Incomplete</option>
<option value="Completed">Completed</option>
</select>
</div>
<div id="reason" class="form-group row">
<label for="reason" class="col-sm-2 col-form-label">Reason</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3">
</div>
</div>

Disabling couple input area if dropdown equal to 1

I am stuck up with this on my php page. I can't disable 3 input area after selected dropdown
I Just want to disable irrelevant input areas if type of slider selected like 1 otherwise do nothing
HTML Code which will use for condition:
<div class="form-group">
<label for="slider_type">Slider Type</label>
<select name="slider_type" class="form-select" id="slider_type" required>
<option value="" disabled selected>Please Select</option>
<option value="1">Image</option>
<option value="2">Video</option>
</select>
</div>
HTML Code Which i want to disable if slider_type equal to 1
<label for="slider_title">Slider Title</label>
<input type="text" name="slider_title" id="slider_title" class="form-control round" placeholder="Slider Title" onchange="DisableSliderInputArea()" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_description">Slider Body</label>
<input type="text" name="slider_description" id="slider_description" class="form-control round" placeholder="Slider Body" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_button_link">Slider Button Link</label>
<input type="text" name="slider_button_link" id="slider_button_link" class="form-control round" placeholder="Slider Button Link" required>
</div>
</div>
I tried this JavaScript code lines for 1 input area but it's not worked
<script type="text/javascript">
function DisableSliderInputArea(){
if(document.getElementById("slider_type").value=="1"){
document.getElementById("slider_title").disabled = true;
} else {
document.getElementById("slider_title").disabled = false;
}
}
</script>
What's really wrong?

You almost have done all the job, one thing that was missing is the actual call of the function DisableSliderInputArea once your select box has changed its' value. You needed to add an event listener, so once user changes the selected option, your function will get triggered, and the textarea will be disabled or enabled.
Feel free to run the snippet below, and see how it works. I added comments on the lines you need to add in JS section.
function DisableSliderInputArea() {
if (document.getElementById("slider_type").value == "1") {
document.getElementById("slider_title").disabled = true;
} else {
document.getElementById("slider_title").disabled = false;
}
}
// Get the select out of the DOM and store in a local variable
const dropdown = document.getElementById("slider_type");
// Attach an event listener, so once the select changes
// its' value, this function will be called
dropdown.addEventListener("change", DisableSliderInputArea);
<div class="form-group">
<label for="slider_type">Slider Type</label>
<select name="slider_type" class="form-select" id="slider_type" required>
<option value="" disabled selected>Please Select</option>
<option value="1">Image</option>
<option value="2">Video</option>
</select>
</div>
<label for="slider_title">Slider Title</label>
<input type="text" name="slider_title" id="slider_title" class="form-control round" placeholder="Slider Title" onchange="DisableSliderInputArea()" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_description">Slider Body</label>
<input type="text" name="slider_description" id="slider_description" class="form-control round" placeholder="Slider Body" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_button_link">Slider Button Link</label>
<input type="text" name="slider_button_link" id="slider_button_link" class="form-control round" placeholder="Slider Button Link" required>
</div>
</div>

you're almost done, just incorrectly putting onchange="DisableSliderInputArea()"
function DisableSliderInputArea(){
if(document.getElementById("slider_type").value=="1"){
document.getElementById("slider_title").disabled = true;
} else {
document.getElementById("slider_title").disabled = false;
}
}
<div class="form-group">
<label for="slider_type">Slider Type</label>
<select name="slider_type" class="form-select" id="slider_type" onchange="DisableSliderInputArea()" required>
<option value="" disabled selected>Please Select</option>
<option value="1">Image</option>
<option value="2">Video</option>
</select>
</div>
<label for="slider_title">Slider Title</label>
<input type="text" name="slider_title" id="slider_title" class="form-control round" placeholder="Slider Title" required>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_description">Slider Body</label>
<input type="text" name="slider_description" id="slider_description" class="form-control round" placeholder="Slider Body" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_button_link">Slider Button Link</label>
<input type="text" name="slider_button_link" id="slider_button_link" class="form-control round" placeholder="Slider Button Link" required>
</div>
</div>

What gets submitted to the database is just the entry of "other" and not what i typed in manually?

When i select the option value of "other" in my dropdown lis the form row below appears and allows me to type a manual cemetery but what gets submitted to the database is just the entry of "other" and not what i typed in manually?
<script>
function handleSelect() {
var selected = document.getElementById("mySelect").value;
var details = document.getElementById("other-details");
if (selected === "other") {
details.classList.remove("d-none");
details.classList.add("d-block");
} else {
details.classList.remove("d-block");
details.classList.add("d-none");
}
}
</script>
<div class="form-row">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<label class="control-label custom_label col-xs-12">Cemetery</label>
<select name="cemetery" class="form-control" id="mySelect" onchange="handleSelect();">
<option value="select" selected="selected">Select Cemetery</option>
<option value="Akatarawa">Akatarawa</option>
<option value="Taita">Taita</option>
<option value="Wainuiomata">Wainuiomata</option>
<option value="Whenua Tapu">Whenua Tapu</option>
<option value="Makara">Makara</option>
<option value="Karori">Karori</option>
<option value="St Johns">St Johns</option>
<option value="Awa Tapu">Awa Tapu</option>
<option value="Paraparaumu">Paraparaumu</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="form-row d-none" id="other-details">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<input type="text" id="other" class="form-control" name="" placeholder="Enter other Cemetery" />
</div>
</div>
</body>

Try setting name of the input to cemetery.
<input type="text" id="other" class="form-control" name="cemetery" placeholder="Enter other Cemetery" />
This may work, but not a good practise.
I suggest you to do something like following
HTML
<input type="text" id="other" class="form-control" name="other-cemetery" placeholder="Enter other Cemetery" />
PHP
if($_POST["cemetery"] == "other"){
$cemetery = $_POST["other-cemetery"];
}
Update: The first solution that I gave may not work in other cases. So add the following line to handleSelect() function. (Not selected case)
document.getElementById("other").value = document.getElementById("mySelect").value;

Thanks Dum, combining that link of JS and setting the Value of the "other" drop down to empty.
Example: <option value="">Other</option>
This has resolved my issue. Many thanks

JS : switch to funtion with dropdown binding

Hello i want to use tinymce and mathlatex in form with select option field where i can select math or text i tried to use this code :
$("#type_c").change(function()
{
var opt = $(this).val();
var conte = document.getElementsByName('content');
var text = document.getElementsByClassName('tox-tinymce');
var maths = document.getElementsByClassName('matheditor-wrapper-math');
switch (opt) {
case "1":
if(maths){
$(".matheditor-wrapper-math" ).remove();
tiny();
}else{
tiny()
}
break;
case "2":
if (text){
$(".tox-tinymce" ).remove();
math()
}else{
math()
}
break;
}
});
and html code :
<div class="form-group">
<label for="">Question</label>
<input type="text"
class="form-control" name="questionn" id="question" aria-describedby="helpId" placeholder="">
<small id="helpId" class="form-text text-muted">add the question</small>
</div>
<div class="form-group">
<label for="">select the type</label>
<select class="form-control" name="type" id="type">
<option value="1">QE</option>
<option value="2">Tache</option>
<option value="3">Liste</option>
</select>
</div>
<div class="form-group">
<label for="">content type</label>
<select class="form-control" name="type_c" id="type_c">
<option value="">Select the type content</option>
<option value="1">Text</option>
<option value="2">Latex</option>
</select>
</div>
<div class="form-group">
<label for="">content</label>
<textarea class="form-control" name="content" id="content" rows="3"></textarea>
</div>
<input type="hidden" name="m_id" value={{$m_id->id}}>
<button type="submit" class="btn btn-primary">Submit</button>
it working when you get the best choice at the first time but when i want to switch options , i got errors or the nothing display.
please could you help me to fix that

Try to use hide and show to hide your elements instead of removing them.
$(".matheditor-wrapper-math" ).hide();
// or
$(".matheditor-wrapper-math" ).show();

Unable to compare values in dropdown box and textfield in JavaScript

Please have a look at my below code
javascript
<script>
$(document).ready(function () { // Help for the HTML4 version.
$('select[name=brandTxtSelect]').change(function () {
if($(this).val()=="Select")
{
document.getElementById('brandTxt').readOnly = false;
document.getElementById("brandTxt").style.display = "block";
}
else
{
document.getElementById('brandTxt').readOnly = true;
document.getElementById("brandTxt").style.display = "none";
$('input[name=brandTxt]').val($(this).val());
}
});
});
</script>
HTML
<div class="form-group">
<label class="col-md-4 control-label" for="brandTxt">Brand</label>
<div class="col-md-4">
<select name="brandTxtSelect" class="form-control input-md">
<option value="">Select</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<!-- <input id="textinput" name="brandTxt" type="text" placeholder="Type Drug Brand" class="form-control input-md" > -->
</div>
<div class="col-md-4">
<input type="text" id="brandTxt" name="brandTxt" class="form-control input-md">
</div>
</div>
I am trying to make the textfield visible and enabled when "Select" is selected from the dropdown box. Unfortunately it seems always the else part is getting fired. I must be doing something wrong in JavaScript, please advice.

Your value for "Select" is not select, is "".
Change:
<option value="">Select</option>
for:
<option value="Select">Select</option>

The val() function would return the value of the selected <option>, not the caption.
Since the actual value of the first <option> is an empty string (""), you can simply try this instead:
if(!$(this).val())
Alternatively, if you'll omit the value attribute altogether, it will automatically consider the caption ("Select") as the value instead.
See val()

Your code is funny :D
You forgot, that the value of Select is empty, so the calue-check has to be fonde with an empty string.
$('select[name=brandTxtSelect]').change(function () {
if($(this).val()==""){
document.getElementById('brandTxt').readOnly = false;
document.getElementById("brandTxt").style.display = "block";
} else {
document.getElementById('brandTxt').readOnly = true;
document.getElementById("brandTxt").style.display = "none";
$('input[name=brandTxt]').val($(this).val());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-md-4 control-label" for="brandTxt">Brand</label>
<div class="col-md-4">
<select name="brandTxtSelect" class="form-control input-md">
<option value="">Select</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<!-- <input id="textinput" name="brandTxt" type="text" placeholder="Type Drug Brand" class="form-control input-md" > -->
</div>
<div class="col-md-4">
<input type="text" id="brandTxt" name="brandTxt" class="form-control input-md">
</div>
</div>

$('select[name=brandTxtSelect]').change(function () {
if($(this).val()==""){
document.getElementById('brandTxt').readOnly = false;
document.getElementById("brandTxt").style.display = "block";
} else {
document.getElementById('brandTxt').readOnly = true;
document.getElementById("brandTxt").style.display = "none";
$('input[name=brandTxt]').val($(this).val());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="brandTxtSelect" class="form-control input-md">
<option value="">Select</option>
<option value="Other">Other</option>
<option value="Option">Options</option>
</select>
<input type="text" id="brandTxt" name="brandTxt" class="form-control input-md">
Try It Once