I have some <script type="text/javascript"> functions in the <head> of my site and i have segments of the site that are obtained through PHP require, those functions apply to various things some that are already on the same file the functions are in and others that are obtained through require, the functions work properly in those segments that are already on the <body> right from the start but do not work in those that are obtained through the require.
I tried relocating the at the end of the to see if it was a issue with the loading order of the elements but it made no difference the functions still dont work.
As always any kind of help is greatly appreacited and thanks for your time.
As per request below is the code
The below code resides in the <head>:
<script type="text/javascript">
function showHide() {
var radioDel = document.getElementById("radDel");
var radioRet = document.getElementById("radRet");
if (radioDel.checked) {
document.getElementById("dir").style.display = "flex";
document.getElementById("diaEn").style.display = "flex";
document.getElementById("direccion").required = true;
document.getElementById("radRet").required = false;
}
if (radioRet.checked) {
document.getElementById("dir").style.display = "none";
document.getElementById("diaEn").style.display = "none";
document.getElementById("direccion").required = false;
document.getElementById("radDel").required = false;
}
}
</script>
The below code resides in the <body> and the fucntions work in it:
<fieldset class="form-group">
<div class="row">
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" name="radios" id="radRet" type="radio" value="Retira" onclick="showHide()" required>
<label for="radRet" class="form-check-label font-weight-bold">Retiro personalmente</label>
</div>
<div class="form-check">
<input class="form-check-input" name="radios" id="radDel" type="radio" value="Delivery" onclick="showHide()" required>
<label for="radDel" class="form-check-label font-weight-bold">Entrega</label>
<small id="diaEn" class="form-text text-muted" style="display:none;">Todas las entregas se hacen con Rappi</small>
</div>
</div>
</div>
</fieldset>
The below code is obtained through <?php require $_SERVER['DOCUMENT_ROOT'].'/php/fieldset.php'; ?> and the functions do not work in it:
<fieldset class="form-group">
<div class="row">
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" name="radios" id="radRet" type="radio" value="Retira" onclick="showHide()" required>
<label for="radRet" class="form-check-label font-weight-bold">Retiro personalmente</label>
</div>
<div class="form-check">
<input class="form-check-input" name="radios" id="radDel" type="radio" value="Delivery" onclick="showHide()" required>
<label for="radDel" class="form-check-label font-weight-bold">Entrega</label>
<small id="diaEn" class="form-text text-muted" style="display:none;">Todas las entregas se hacen con Rappi</small>
</div>
</div>
</div>
</fieldset>
Your IDs radRet and radDel are being duplicated.
showHide(id1, id2)