I have this function that choose the options of selection depends on other select
how can I add to another function
<HTML>
<select name="ddlPassport" class="val1" id="ddlPassport" style="width: 26%" onchange = "ShowHideDiv()">
<option value="">- Pavement Type -</option>
<option value="Flexible Pavement (Asphalt)">Flexible Pavement (Asphalt)</option>
<option value="Rigid Pavement (Concrete)">Rigid Pavement (Concrete)</option>
</select><br>
<select name="pavedist" id="pavdistrees" style="width: 26%">
<option value="">- Distress selections - </option>
</select><br> </div>
<script>
$(document).ready(function() {$("#ddlPassport").change(function() { var val = $(this).val(); if (val == "Flexible Pavement (Asphalt)") { $("#pavdistrees").html("<option value='t'>- Asphalt Distress -</option><option value='Longitudinal -Cracking-'>Longitudinal -Cracking-</option><option value='Transverse -Cracking-'>Transverse -Cracking-</option><option value='Alligator -Cracking-'>Alligator -Cracking-</option><option value='Block -Cracking-'>Block -Cracking-</option><option value='Edge -Cracking-'>Edge -Cracking-</option><option value='Reflection -Cracking-'>Reflection -Cracking-</option><option value='Rutting -Surface deformation-'>Rutting -Surface deformation-</option><option value='Shoving -Surface deformation-'>Shoving -Surface deformation-</option><option value='Polishing-Surface Distress-'>Polishing-Surface Distress-</option><option value='Raveling -Surface Distress-'>Raveling -Surface Distress-</option><option value='Flushing -Surface Distress-'>Flushing -Surface Distress-</option><option value='Patches'>Patches</option><option value='Potholes'>Potholes</option>");} else if (val == "Rigid Pavement (Concrete)") { $("#pavdistrees").html("<option value='t'>- Concrete Distress -</option><option value='Joint Seal Damage -Joint Problems-'>Joint Seal Damage -Joint Problems-</option><option value='Joint/Corner Spall -Joint Problems-'>Joint/Corner Spall -Joint Problems-</option><option value='Mid panel -Cracking-'>Mid panel -Cracking-</option><option value='Corner Break -Cracking-'>Corner Break -Cracking-</option><option value='Shattered Slab -Cracking-'>Shattered Slab -Cracking-</option><option value='Patching -Surface Distress-'>Patching -Surface Distress-</option><option value='Faulting -Surface Distress-'>Faulting -Surface Distress-</option>");} });});
</script>
<input type="button" value="Add" onclick="addRow()">
<div id="content">
</div>
</HTML>
<script>
function ShowHideDiv() {
var ddlPassport = document.getElementById("ddlPassport");
var dvPassport = document.getElementById("dvPassport");
dvPassport.style.display = ddlPassport.value == "Flexible Pavement (Asphalt)" ? "block" : "none";
var dvPasspor = document.getElementById("dvPasspor");
dvPasspor.style.display = ddlPassport.value == "Rigid Pavement (Concrete)" ? "block" : "none";
}
function addRow () {
document.querySelector('#content').insertAdjacentHTML(
'afterbegin',
`<div class="row">
<input type="text" name="name" value="" />
<input type="text" name="value" value="" />
<label><input type="checkbox" name="check" value="1" />Checked?</label>
<input type="button" value="-" onclick="removeRow(this)">
</div>`
)
}
function removeRow (input) {
input.parentNode.remove()
}
</script>
How can add this ```$(document).ready(function() {
into function addrow ???
Lucasl
August 25, 2019, 5:34pm
2
Not entirely sure what you are trying to do, mainly confused by why it seems like you have two separate <script>
sections.
Typically, when using document.onready type functions you would only need one and could call whatever other functions you want to trigger when the DOM loads from inside that.
So w/ jQuery you’d do something like:
$( document ).ready(function() {
// Some code
addRow()
anyOtherFunction()
});
when I doing what u said is not working for all functions
Lucasl
August 26, 2019, 2:43am
4
Is it throwing an error or just not running? also, do you have multiple <script>
blocks on the page? I’m not sure if that could mess with things.
no it isn’t run at all
no another script … just script in the code up there
Lucasl
August 26, 2019, 7:16pm
6
In your original post you had two codeblocks with two seperate script tags?
Gave it 10 mins trying to debug - few things I noticed:
if you are gonna use jQuery functions, make sure you import it before using. jQuery functions are generally any code you see that starts with $()
pattern, cdn import would look like this in head:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Indenting code for readability will help
look up html shell to get baseline structure for html page structure http://htmlshell.com/
Here is ex with addRow function being called in the document ready fn:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<select name="ddlPassport" class="val1" id="ddlPassport" style="width: 26%" onchange="ShowHideDiv()">
<option value="">- Pavement Type -</option>
<option value="Flexible Pavement (Asphalt)">Flexible Pavement (Asphalt)</option>
<option value="Rigid Pavement (Concrete)">Rigid Pavement (Concrete)</option>
</select><br>
<select name="pavedist" id="pavdistrees" style="width: 26%">
<option value="">- Distress selections - </option>
</select><br> </div>
<script>
$(document).ready(function () {
addRow()
$("#ddlPassport").change(function () {
var val = $(this).val();
if (val == "Flexible Pavement (Asphalt)") {
$("#pavdistrees").html("<option value='t'>- Asphalt Distress -</option><option value='Longitudinal -Cracking-'>Longitudinal -Cracking-</option><option value='Transverse -Cracking-'>Transverse -Cracking-</option><option value='Alligator -Cracking-'>Alligator -Cracking-</option><option value='Block -Cracking-'>Block -Cracking-</option><option value='Edge -Cracking-'>Edge -Cracking-</option><option value='Reflection -Cracking-'>Reflection -Cracking-</option><option value='Rutting -Surface deformation-'>Rutting -Surface deformation-</option><option value='Shoving -Surface deformation-'>Shoving -Surface deformation-</option><option value='Polishing-Surface Distress-'>Polishing-Surface Distress-</option><option value='Raveling -Surface Distress-'>Raveling -Surface Distress-</option><option value='Flushing -Surface Distress-'>Flushing -Surface Distress-</option><option value='Patches'>Patches</option><option value='Potholes'>Potholes</option>");
} else if (val == "Rigid Pavement (Concrete)") {
$("#pavdistrees").html("<option value='t'>- Concrete Distress -</option><option value='Joint Seal Damage -Joint Problems-'>Joint Seal Damage -Joint Problems-</option><option value='Joint/Corner Spall -Joint Problems-'>Joint/Corner Spall -Joint Problems-</option><option value='Mid panel -Cracking-'>Mid panel -Cracking-</option><option value='Corner Break -Cracking-'>Corner Break -Cracking-</option><option value='Shattered Slab -Cracking-'>Shattered Slab -Cracking-</option><option value='Patching -Surface Distress-'>Patching -Surface Distress-</option><option value='Faulting -Surface Distress-'>Faulting -Surface Distress-</option>");
}
});
});
function ShowHideDiv() {
var ddlPassport = document.getElementById("ddlPassport");
var dvPassport = document.getElementById("dvPassport");
dvPassport.style.display = ddlPassport.value == "Flexible Pavement (Asphalt)" ? "block" : "none";
var dvPasspor = document.getElementById("dvPasspor");
dvPasspor.style.display = ddlPassport.value == "Rigid Pavement (Concrete)" ? "block" : "none";
}
function addRow() {
console.log('addRow')
document.querySelector('#content').insertAdjacentHTML(
'afterbegin',
`<div class="row">
<input type="text" name="name" value="" />
<input type="text" name="value" value="" />
<label><input type="checkbox" name="check" value="1" />Checked?</label>
<input type="button" value="-" onclick="removeRow(this)">
</div>`
)
}
function removeRow(input) {
input.parentNode.remove()
}
</script>
<input type="button" value="Add" onclick="addRow()">
<div id="content">
</div>
</body>
</html>
first of all I want to thank u for trying to help me
but I think I couldn’t reach the idea I want
Now I want if user choose for example (Asphalt) each time press Add button only appear Asphalt selection
function addRow() {
console.log('addRow')
document.querySelector('#content').insertAdjacentHTML(
'afterbegin',
`<div class="row">
<select name="pavedist" id="pavdistrees" style="width: 26%">
<option value="">- Distress selections - </option>
</select><br> </div>
<input type="button" value="-" onclick="removeRow(this)">
</div>`
)
}
function removeRow(input) {
input.parentNode.remove()
}