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>

How can i disable a input field with a dynamic select?

I want to create a dynamic select element where if I choose a certain option and a specific text input field is disabled.
Here is my HTML:
<div class="form-group col-md-2">
<label for="">Tipo de Compra</label>
<select name="" class="form-control" id="tipoCompra" required>
<option value="">Tipo de compra </option>
<option value="Nacional">Nacional</option>
<option value="Exterior">Exterior</option>
</select>
</div>
If the user selects the option "Nacional" I want to make the following input field disabled so they can't enter any value.
<div class="form-group col-md-2">
<label for="fob">Costo Fob</label>
<input type="number" step="00.01" id="fob" name="fob" disabled="false" class="form-control" onchange="Todas();" onkeyup="Todas();" required>
</div>
I'm using JavaScript for my functions and some Jquery, but I don't know how to create a function for this.
This is my function:
function TipoCompra(){
var tipoCompra = document.getElementById('tipoCompra').value;
console.log(tipoCompra);
var fob = document.getElementById('fob');
if (tipoCompra == 'Nacional'){
fob.disable = true;
} else {
fob.disable = false;
}
}
But i dont know how to change the disabled property.

You need to check change of your select with change function of jQuery
https://api.jquery.com/change/
And check the value of your select.
Then use prop function to disabled your element.
https://api.jquery.com/prop/
$('#fob').prop('disabled', true);
$("select[name='test']").change(function() {
let selectVal = $(this).val();
if (selectVal == 'Nacional') {
$('#fob').prop('disabled', false);
} else {
$('#fob').prop('disabled', true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-2">
<label for="">Tipo de Compra</label>
<select name="test" class="form-control" required>
<option value="">Tipo de compra </option>
<option value="Nacional">Nacional</option>
<option value="Exterior">Exterior</option>
</select>
</div>
<div class="form-group col-md-2 costo">
<label for="fob">Costo Fob</label>
<input type="number" step="00.01" id="fob" name="fob" class="form-control" onchange="Todas();" onkeyup="Todas();" required>
</div>

HTML
<div class="form-group col-md-2">
<label for="">Tipo de Compra</label>
<select name="" id="myList"class="form-control" required onchange="disable()">
<option value="">Tipo de compra </option>
<option value="Nacional">Nacional</option>
<option value="Exterior">Exterior</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="fob">Costo Fob</label>
<input type="number" step="00.01" id="fob" name="fob" class="form-control" onchange="Todas();" onkeyup="Todas();" required>
</div>
JS
function disable(){
if(document.getElementById('myList').value == 'Nacional'){
document.getElementById('fob').disabled = true
}
else{
document.getElementById('fob').disabled = false
}
}

Based on your update with your JavaScript there's a few changes you need to make:
Assuming you want to inline the JavaScript function for onchange like your other functions
This should include onChange="TipoCompra()":
//<select name="" class="form-control" id="tipoCompra" required>
<select name="" class="form-control" id="tipoCompra" onChange="TipoCompra()" required>
This should be disabled:
//fob.disable = true;
fob.disabled = true;
disabled="false" is invalid in your input:
//<input type="number" step="00.01" id="fob" name="fob" disabled="false" class="form-control" onchange="Todas();" onkeyup="Todas();" required>
<input type="number" step="00.01" id="fob" name="fob" class="form-control" onchange="Todas();" onkeyup="Todas();" required>
http://www.w3.org/TR/html5/infrastructure.html#boolean-attribute
A number of attributes are boolean attributes. The presence of a
boolean attribute on an element represents the true value, and the
absence of the attribute represents the false value.
The values "true" and "false" are not allowed on boolean attributes.
To represent a false value, the attribute has to be omitted
altogether.
Functional example. Note: I removed the calls to the Todas(); function since it wasn't included with your question.
function TipoCompra(){
var tipoCompra = document.getElementById('tipoCompra').value;
console.log(tipoCompra);
var fob = document.getElementById('fob');
if (tipoCompra == 'Nacional'){
fob.disabled = true;
} else {
fob.disabled = false;
}
}
<div class="form-group col-md-2">
<label for="">Tipo de Compra</label>
<select name="" class="form-control" id="tipoCompra" onChange="TipoCompra()" required>
<option value="">Tipo de compra </option>
<option value="Nacional">Nacional</option>
<option value="Exterior">Exterior</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="fob">Costo Fob</label>
<input type="number" step="00.01" id="fob" name="fob" class="form-control" required>
</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

Calculate price selects to a textarea with a button

I want bring the value of the label "precio" in the selects, make the sum of this values and put into the textarea "cuenta" after click the button "añadir al pedido".
The label "value" of the selects it's saved in the textarea "pedido"
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
<script>
function calcular(){
var cuenta=0.00:
$('#pedido').val($('#pedido').val()+"\n"+$('#Pizzas option:selected').text());
var newPrice=cuenta;
var newPrice+=parseFloat($(this).find('#Pizzas option:selected').attr('precio'));
$('#pedido').val($('#pedido').val()+"\n"+$('#Bebidas option:selected').text());
var newPrice+=parseFloat($(this).find('#Bebidas option:selected').attr('precio'));
$("#cuenta").html(newPrice);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="Pizzas" name="Pizzas" class="form-control" >
<?php
<option value="<?php echo $datos[0];?>" precio="<?php echo $datos[1];?>"><?php echo $datos[0];?></option>
<?php
}
?>
</select>
<select id="Bebidas" name="Bebidas" class="form-control" >
<?php
<option value="<?php echo $datos[0];?>" precio="<?php echo $datos[1];?>"><?php echo $datos[0];?></option>
<?php
}
?>
</select>
<div class="col-12">
<div style="padding-left:20px;">
<textarea name="pedido" class="form-control" id="pedido" cols="30" rows="10" placeholder="Pedido" ></textarea>
</div>
</div>
<div class="col-12 col-lg-6">
<div style="padding-left:10px;">
<input type="text" name="cuenta" id="cuenta" class="form-control" placeholder="Cuenta" required >
</div>
</div>
<button name="añadir" type="button" class="btn btn-primary p-3 px-xl-4 py-xl-3" onclick="calcular();"><span></span> Añadir al Pedido</button>

Check this out.
When you pick any item in select list the select element gets the value of the selected item. Also you shouldn't change textarea inner html, you have to change its value.
There is some nuance of how does js engine works.
+"123" it is the same as parseInt("123"). Event better because parseInt is going to drop the reminder, but +"12.3" return 12.3.
If you wrap your select lists in form you can add the require attribute to them and then check that any of items has been chosen.
let allOrdersTotalSumm = 0
let form = document.querySelector('#order-form')
let pizas = document.querySelector('#Pizzas')
let drinks = document.querySelector('#Drinks')
let priceArea = document.querySelector('#cuenta')
let selectedArea = document.querySelector('#pedido')
document.querySelector('#calc').addEventListener('click', calcTotalSum, false)
function calcTotalSum() {
// Check that items are picked
if (!form.reportValidity()) {
return false
}
let totalSum = +pizas.value + +pizas.value
let selectedPiza = pizas.options.item(pizas.options.selectedIndex)
let selectedDrink = drinks.options.item(drinks.options.selectedIndex)
selectedArea.value += `${selectedPiza.textContent} with ${selectedDrink.textContent}.Total: ${totalSum}\n`
allOrdersTotalSumm += totalSum
priceArea.value = allOrdersTotalSumm
// Reset lists to make a new order
form.reset()
}
<div style="margin-bottom:10px;">
<form id="order-form">
<select id="Pizzas" name="Pizzas" class="form-control" data-title="" required>
<option value="" selected>Please chose your pizza</option>
<option value="10">Cheesy pizzza</option>
<option value="12">Cheesy chizz pizzza</option>
<option value="15">Cheesy beacon cheees pizzza</option>
</select>
<select id="Drinks" name="Drinks" class="form-control" data-title="" required>
<option value="" selected>Please chose your drink</option>
<option value="7">Coke</option>
<option value="9">Pepsi</option>
<option value="12">Milkis</option>
</select>
</form>
</div>
<div style="margin-bottom:10px;">
<textarea name="pedido" class="form-control" id="pedido" cols="60" rows="10" placeholder="Pedido"></textarea>
</div>
<input type="text" name="cuenta" id="cuenta" class="form-control" placeholder="Cuenta" required>
<button id="calc" name="añadir" type="submit">Añadir al Pedido</button>

Based on your description, i think this is what you want.
Just tell me if i got wrong, and tell me if it's what you expected.
Hope it help.
function calcular() {
let total = parseInt($('#Pizzas').val()) + parseInt($('#Bebidas').val());
$('#cuenta').val(total);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label>Select 1</label>
<select id="Pizzas" name="Pizzas" class="form-control" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<label>Select 2</label>
<select id="Bebidas" name="Bebidas" class="form-control" required>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<br><br>
<input type="text" name="cuenta" id="cuenta" class="form-control" placeholder="Cuenta" required>
<button name="añadir" type="button" class="btn btn-primary p-3 px-xl-4 py-xl-3" onclick="calcular();"><span></span> Añadir al Pedido</button>

Check if all values are unique in a div using jquery

I have select box which no select generates number of textboxes in a div.
Now there are three field
display_name[], user_name[], and user_password[]
The code for that is :
<select name="license" id="dropdown" class="form-control" required="required">
<option value="default" >Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
$("#dropdown").change(function() {
var selVal = $(this).val();
$("#pttuserdiv").html('');
if(selVal > 0) {
for(var i = 1; i<= selVal; i++) {
$("#pttuserdiv").append(`
<div class="col-sm-3 col-sm-offset-1">
<div class="form-group label-floating">
<label class="control-label">Display Name</label>
<input type="text" class="form-control" name="display_name[]" required >
</div>
</div>
<div class="col-sm-3 col-sm-offset-1">
<div class="form-group label-floating">
<label class="control-label">Username</label>
<input type="text" class="form-control validateLocation" name="user_name[]" id="user_name" required >
</div>
</div>
<div class="col-sm-3 col-sm-offset-1">
<div class="form-group label-floating">
<label class="control-label">Password</label>
<input type="password" class="form-control" name="user_password[]" required >
</div>
</div>`);
}
}
});
});
</script>
<div class="row">
<div id="pttuserdiv">
</div>
</div>
Now I want the user_name[] field to be unique.
How do I do that ?
I want to display error or alert if user input same username again in user_name[].

Try the following approach
Bind keyup event and check user's input for the current input box.
Check if the current input value is same as other username values
If yes, then highlight the input box.
Demo
$(document).ready(function() {
$("#dropdown").change(function() {
var selVal = $(this).val();
$("#pttuserdiv").html('');
if (selVal > 0) {
for (var i = 1; i <= selVal; i++) {
$("#pttuserdiv").append('<div class="col-sm-3 col-sm-offset-1"><div class="form-group label-floating"><label class="control-label">Display Name</label><input type="text" class="form-control" name="display_name[]" required ></div></div><div class="col-sm-3 col-sm-offset-1"><div class="form-group label-floating"><label class="control-label">Username</label><input type="text" class="form-control validateLocation" name="user_name[]" id="user_name" required ></div></div> <div class="col-sm-3 col-sm-offset-1"><div class="form-group label-floating"><label class="control-label">Password</label><input type="password" class="form-control" name="user_password[]" required ></div></div>');
}
$( "[name='user_name[]']" ).off( "keyup" );
$( "[name='user_name[]']" ).on( "keyup", function(){
var isFound = false;
var value = $(this).val();
$( "[name='user_name[]']" ).not(this).each( function(){
if ( this.value == value )
{
isFound = true;
}
});
$(this).toggleClass( "highlight", isFound );
});
}
});
});
.highlight
{
border-color : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="license" id="dropdown" class="form-control" required="required">
<option value="default" >Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<script type="text/javascript">
</script>
<div class="row">
<div id="pttuserdiv">
</div>
</div>
Note - Id doesn't play any role in my code, but as a good practice keep the ids of all elements unique.