Develop Reference

Show Div/Hide if one of the select options from optgroup is selected Javascript

I'm trying to modify and example from this same page but its not working as I want.
I have two groups in a select, and I want chose any option from one of the second group "Unique" and if you select any option from that group show Div, else show nothing.
the html:
<div class="form-floating mb-3 mt-3">
<table>
<tr>
<td><input class="form-control input-lg email" type="email"
name="mail[]" required />
</td>
<td>
<select class="form-select" name="skills[]" required>
<optgroup Class="unique" label="Common">
<option value="Extraction">Extraction</option>
<option value="Hunting">Hunting</option>
<option value="Farming">Farming</option>
</optgroup>
<optgroup class="unique" label="Unique">
<option value="Diplomacy">Diplomacy</option>
<option value="Survival">Survival</option>
</optgroup>
</select>
</td>
<td>
</tr>
</table>
</div>
<div class="mt-5 extras" id="mydiv">
<h4 class="text-dark">Check</h4>
Increased through making items, sewing and cooking.<br>
<input class="form-check-input" type="checkbox" name="checkpoint"
checked required/>
</div>
the Js:
function showDiv(divId, element)
{
document.getElementById(divId).style.display = element.value ==
'Diplomacy' || 'Survival' ? 'block' : 'none';
}
css :
.extras{
display: none;
}

You can access the optgroup by finding the selected option, using closest() to find the enclosing optgroup tag, then accessing it's label attribute
function doSomething(element) {
// get optgroup
let optgroup = element.options[element.options.selectedIndex].closest('optgroup').getAttribute('label')
console.log(optgroup)
if (optgroup == 'Unique') {
console.log("do something ...")
}
}
.extras {
display: none;
}
<div class="form-floating mb-3 mt-3">
<table>
<tr>
<td><input class="form-control input-lg email" type="email" name="mail[]" required />
</td>
<td>
<select class="form-select" name="skills[]" onchange='doSomething(this)' required>
<optgroup Class="unique" label="Common">
<option value="Extraction">Extraction</option>
<option value="Hunting">Hunting</option>
<option value="Farming">Farming</option>
</optgroup>
<optgroup class="unique" label="Unique">
<option value="Diplomacy">Diplomacy</option>
<option value="Survival">Survival</option>
</optgroup>
</select>
</td>
<td>
</tr>
</table>
</div>
<div class="mt-5 extras" id="mydiv">
<h4 class="text-dark">Check</h4>
Increased through making items, sewing and cooking.<br>
<input class="form-check-input" type="checkbox" name="checkpoint" checked required/>
</div>

javascript function not working in form

Hope you all are fine . I have a problem my javascript function is not being called i dont know why
I am very confused why the function is not calling I used this same flow in my another form too that was also working fine but here Its a mess
Kinldy have a look on code and help me
Thanks
javascript:
function checkPriceValidation(){
var flight=document.getElementById('flightno').value;
var type=document.getElementById('type').value;
var price=document.getElementById('price').value;
if(flight==="volvo"){
alert("Please select flight number !!");
return false;
}
else if(type==="default"){
alert("Please select type!!");
return false;
}
else if(price===""){
alert("Please select the price !!");
return false;
}
return false;
}
html :
<form
class=""
method="post"
onsubmit="return javascript:checkPriceValidation();"
action="<%=response.encodeURL(request.getContextPath()+"/FillList")%>"
>
<div style="color:red;font-size:18px ">${error}</div>
<% session.setAttribute("error", "");%>
<table>
<tr>
<td>
<div class="form-control" style="width: auto">
<select style="color: black" name="flightno" >
<option value="volvo">Select Flight</option>
<%
ArrayList<FlightClass> list;
list = (ArrayList<FlightClass>) request.getSession().getAttribute("list");
for (FlightClass post : list) {
%>
<option><%=post.getID()%></option>
<% } %>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-control" style="width: auto">
<select style="color: black" name="type">
<option value="default">Select Type</option>
<option>Economy</option>
<option>Business</option>
<option>First Class</option>
</select>
</div>
</td>
<td>
<input
type="number"
min="0"
step="1"
class="form-control"
name="price"
id="price"
placeholder="Price"
/>
</td>
</tr>
</table>
<br/>
<button input-type="submit" value="Submit" class="btn btn-lg btn-primary" >SET</button>
</form>

In your onsubmit attribute, you should just use return checkPriceValidation(). Try out the code below and see the difference
function submitThis(){
alert('Hi there');
return false;
}
<form onsubmit="return javascript:submitThis()">
<button>This form will be submitted</button>
</form>
<form onsubmit="return submitThis()">
<button>This form will not be submitted</button>
</form>

Display:none does not seem to be working all html elements

I am trying to make this part of the form disappear by putting it in a div and the id = loan
To troubleshoot I put TESTTEXT1 in after the div element, and it does what I want (disappears when user clicks a radio button),However TESTTEST2 and beyond does not seem to be affected by the user's action. Does anyone know why this could be?
HTML:
<header>
<script>
function checkA(){
document.getElementById('loan').style.display='none';
document.getElementById('assigned').style.display='block';
}
function checkL(){
document.getElementById('assigned').style.display='none';
document.getElementById('loan').style.display='block';
}
</script>
</header>
<body>
<table>
<td>
<input type="radio" onclick='checkA()' name="toloan" id="0" value="0"/> <label for="0">To assign</label>
<input type="radio" onclick='checkL()' name="toloan" id="1" value="1"/> <label for="1">To loan</label>
</td>
<div id="loan">
TESTTEXT1
<tr>
<th>
<label for="borrowing_month">Borrowing date</label>
</th>
<td>
<select name="borrowing_month" id="borrowing_month">
<option value ='1' selected="selected">
TEST
</option>
</select>
<select name="borrowing_day" id="borrowing_day">
<option value="2" selected="selected">
</select>
<select name="borrowing_year" id="borrowing_year">
<option value="3" selected="selected">
</select>
</td>
</tr>
<tr>
<th>
<label for="return_month">Return date</label>
</th>
<td>
<select name="return_month" id="return_month">
<option value="4" selected="selected">
</option>
</select>
<select name="return_day" id="return_day">
<option value="5" selected="selected">
</select>
<select name="return_year" id="return_year">
<option value="6" selected="selected">
</select>
</td>
</tr>
</div>
</table>
</body>
OK I tried to remove all the php as requested.

Let it be known that you can not use div elements inside table-wrappers. If you wish to use the div element to add CSS to only part of a table. It is better to add a ID to the table head/row/data or just make a new table altogether for that specific part of the table.

As #DanielBeck points out, there is no table-wrapper, so I would try changing the <div id="loan"> to <table id="loan">.
You'll have to change the closing tag from </div> to </table>, of course, and it will change your javascript a little:
function checkA() {
document.getElementById('loan').style.display = 'none';
document.getElementById('assigned').style.display = 'table';
}
function checkL() {
document.getElementById('assigned').style.display = 'none';
document.getElementById('loan').style.display = 'table';
}

Hide/show the same div

I am trying to hide various div elements, but I want to make it dynamic so if I unselect then it shows back up in the browser. This is easy enough with show/hide, but my problem is that I need to show/hide some of the same fields. It works on the first selection, but then the second run it won't do anything because it thinks it should show it as per the '.show()' in the first run.
Can anyone point me in the right direction?
Thanks
S.
<script>
$(document).ready(function(){
$('#nat').on('change', function() {
if ( this.value == 'no_nat')
{
$("#field25").hide();
$("#field26").hide();
}
else
{
$("#field25").show();
$("#field26").show();
}
});
});
</script>
<script>
$(document).ready(function(){
$('#nat2').on('change', function() {
if ( this.value == 'no_nat')
{
$("#field25").hide();
$("#field26").hide();
}
else
{
$("#field25").show();
$("#field26").show();
}
});
});
</script>
HTML like this:
<div class="form-row">
<label>
<span>Test1</span>
<select name="field1" id="nat">
<option value="" selected="selected"></option>
<option VALUE="no_nat">1</option>
<option VALUE="nat">2</option>
</select>
</label>
</div>
<div class="form-row">
<label>
<span>Test2</span>
<select name="field2" id="nat2">
<option value="" selected="selected"></option>
<option VALUE="no_nat">1</option>
<option VALUE="nat">2</option>
</select>
</label>
</div>
<div class="form-row" id='field25'>
<label>
<span>Test3</span>
<input name="field25" type="text">
</input>
</label>
</div>
<div class="form-row" id='field26'>
<label>
<span>Test4</span>
<input name="field26" type="text">
</input>
</label>
</div>

You don't need to define $(document).ready twice. Try this:
<script>
$(document).ready(function(){
$('#nat').on('change', function() {
if ( this.value == 'no_nat')
{
$("#field25").hide();
$("#field26").hide();
}
else
{
$("#field25").show();
$("#field26").show();
}
});
$('#nat2').on('change', function() {
if ( this.value == 'no_nat')
{
$("#field25").hide();
$("#field26").hide();
}
else
{
$("#field25").show();
$("#field26").show();
}
});
});
</script>
See fiddle https://jsfiddle.net/r2m9s8gx/

You can try to have a single handler like
$(document).ready(function() {
$('select[name="field1"], select[name="field2"]').on('change', function() {
var state = $('select[name="field1"]').val() == 'no_nat' || $('select[name="field2"]').val() == 'no_nat';
$("#field25, #field26").toggle(state);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-row">
<label>
<span>Test1</span>
<select name="field1">
<option value="" selected="selected"></option>
<option VALUE="no_nat">1</option>
<option VALUE="nat">2</option>
</select>
</label>
</div>
<div class="form-row">
<label>
<span>Test2</span>
<select name="field2" type="text">
<option value="" selected="selected"></option>
<option VALUE="no_nat">1</option>
<option VALUE="nat">2</option>
</select>
</label>
</div>
<div class="form-row" id='field25'>
<label>
<span>Test3</span>
<input name="field25" type="text" />
</label>
</div>
<div class="form-row" id='field26'>
<label>
<span>Test4</span>
<input name="field26" type="text" />
</label>
</div>

try
$(this).val() === 'no_nat'
or
$('#nat').val() === 'no_nat'

how to change the label text present inside a div? and how to change the dropdown to a textbox?

i am having the following html
<div class="field">
<label for="approval_approvers_attributes_0_approver_type">Approver</label>
<select class="form-control appr_type" id="approval_approvers_attributes_0_approver_type" name="approval[approvers_attributes][0][approver_type]" onchange="$.fn.myFunc(this);">
<option selected="selected" value="Role">Role</option>
<option value="Specific User">Specific User</option>
</select>
</br>
</br>
</div>
<div class="field" class="role">
<label for="approval_approvers_attributes_0_approver_value">Role</label>
<select class="form-control appr_type" id="approval_approvers_attributes_0_approver_value" name="approval[approvers_attributes][0][approver_value]">
<option value="hr manager">hr manager</option>
<option selected="selected" value="reporting manager">reporting manager</option>
</select>
<input id="approval_approvers_attributes_0__destroy" name="approval[approvers_attributes][0][_destroy]" type="hidden" value="false" /><a class=" remove_nested_fields" data-association="approvers" href="javascript:void(0)">Remove</a>
</br>
</br>
</div>
and the followng js function definition:
$.fn.myFunc = function (button) {
var id = $(button).attr('id');
id = button.id;
$(button).next().label.text("specific user");
}
the call to this above Jquery function is made in the first div. this function is called when the dropdown in the first div is changed. in this function i want the label text to be changed to "specific user" which is present in the second div, when the user selects "specific user". and accordingly i want to change the dropdown which is present in the second div to textbox, to enter the specific user name. how can i do that?

You need to change your code like,
<div class="field" class="role">
<label for="approval_approvers_attributes_0_approver_value">Role</label>
<select class="form-control appr_type" id="approval_approvers_attributes_0_approver_value" name="approval[approvers_attributes][0][approver_value]">
<option value="hr manager">hr manager</option>
<option selected="selected" value="reporting manager">reporting manager</option>
</select>
<input type="text" class="inpt_specific_user" style="display:none"/>
<input id="approval_approvers_attributes_0__destroy" name="approval[approvers_attributes][0][_destroy]" type="hidden" value="false" /><a class=" remove_nested_fields" data-association="approvers" href="javascript:void(0)">Remove</a>
</br>
</br>
</div>
<script>
$.fn.myFunc = function (button) {
var id = $(button).attr('id');
id = button.id;
var $nextDiv = $(button).closest('div.field') // get closest parent field
.next('div.field') // get next parent field
$nextDiv.find('label') // find label
.text(button.value); //change text, this.value so that it will be dynamic for both the values
$nextDiv.find('select.appr_type,input.inpt_specific_user')
.toggle(); // toggle select/input =>hide/show
}
</script>
$.fn.myFunc = function(button) {
var id = $(button).attr('id');
id = button.id;
var $nextDiv = $(button).closest('div.field') // get closest parent field
.next('div.field') // get next parent field
$nextDiv.find('label') // find label
.text(button.value); //change text, this.value so that it will be dynamic for both the values
$nextDiv.find('select.appr_type,input.inpt_specific_user')
.toggle(); // toggle select/input =>hide/show
}
$('#approval_approvers_attributes_0_approver_type').on('change', function() {
$.fn.myFunc(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field">
<label for="approval_approvers_attributes_0_approver_type">Approver</label>
<select class="form-control appr_type" id="approval_approvers_attributes_0_approver_type" name="approval[approvers_attributes][0][approver_type]" onchange="">
<option selected="selected" value="Role">Role</option>
<option value="Specific User">Specific User</option>
</select>
</br>
</br>
</div>
<div class="field" class="role">
<label for="approval_approvers_attributes_0_approver_value">Role</label>
<select class="form-control appr_type" id="approval_approvers_attributes_0_approver_value" name="approval[approvers_attributes][0][approver_value]">
<option value="hr manager">hr manager</option>
<option selected="selected" value="reporting manager">reporting manager</option>
</select>
<input type="text" class="inpt_specific_user" style="display:none" />
<input id="approval_approvers_attributes_0__destroy" name="approval[approvers_attributes][0][_destroy]" type="hidden" value="false" /><a class=" remove_nested_fields" data-association="approvers" href="javascript:void(0)">Remove</a>
</br>
</br>
</div>
Updated, code without using extra element and using replaceWith()
$.fn.myFunc = function(button) {
var id = $(button).attr('id');
id = button.id;
var $nextDiv = $(button).closest('div.field') // get closest parent field
.next('div.field') // get next parent field
$nextDiv.find('label') // find label
.text(button.value); //change text, this.value so that it will be dynamic for both the values
var $el = null;
if (button.value != 'Role') {
$nextDiv.find('select.appr_type').replaceWith('<input type="text" class="form-control appr_type" id="approval_approvers_attributes_0_approver_value" name="approval[approvers_attributes][0][approver_value]" />');
} else {
$nextDiv.find('input.appr_type').replaceWith('<select class="form-control appr_type" id="approval_approvers_attributes_0_approver_value" name="approval[approvers_attributes][0][approver_value]">\
<option value="hr manager">hr manager</option>\
<option selected="selected" value="reporting manager">reporting manager</option>\
</select>');
}
}
$('#approval_approvers_attributes_0_approver_type').on('change', function() {
$.fn.myFunc(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field">
<label for="approval_approvers_attributes_0_approver_type">Approver</label>
<select class="form-control appr_type" id="approval_approvers_attributes_0_approver_type" name="approval[approvers_attributes][0][approver_type]" onchange="">
<option selected="selected" value="Role">Role</option>
<option value="Specific User">Specific User</option>
</select>
</br>
</br>
</div>
<div class="field" class="role">
<label for="approval_approvers_attributes_0_approver_value">Role</label>
<select class="form-control appr_type" id="approval_approvers_attributes_0_approver_value" name="approval[approvers_attributes][0][approver_value]">
<option value="hr manager">hr manager</option>
<option selected="selected" value="reporting manager">reporting manager</option>
</select>
<input id="approval_approvers_attributes_0__destroy" name="approval[approvers_attributes][0][_destroy]" type="hidden" value="false" /><a class=" remove_nested_fields" data-association="approvers" href="javascript:void(0)">Remove</a>
</br>
</br>
</div>