How to call an on change function already declared

Question

I have a radio, which changes the input according to the selected radio, but I would like it to be selected as soon as I load the page according to the value of the Session I pass to the html page. I’m changing the radios and making Trigger change but it doesn’t work, follow the code below.

HTML

<div class="divRadio">
     <input type="radio" name="porcentagemRadio" id="1" class="pg porcentagemRadio" value="1"/> Porcentagem
     <input type="radio" name="porcentagemRadio" id="2" class="pg porcentagemRadio" value="2"/> Valor absoluto
</div>
<div class="divPorcentagem"  id="porcentagem2">
     <label class="control-label porcentagem" for="porcentagem">Porcentagem: </label>
     <select name="porcentagem" id="porcentagemSelect" class="form-control porcent">
           <option value="">Selecione a Porcentagem</option>
           <option value="20">20%</option>
           <option value="10">10%</option>
           <option value="15">15%</option>
           <option value="30">30%</option>
           <option value="35">35%</option>
           <option value="40">40%</option>
           <option value="45">45%</option>
           <option value="50">50%</option>
     </select>
</div>
<div id="precoAbsoluto" class="divAbsoluto">
     <label for="preco2" class="control-label">Preço: </label>
     <input type="number" name="preco2" id="preco1" class="form-control absoluto">              
</div>
<div id="precoAbsoluto2" class="divAbsoluto2">
    <label for="preco" class="control-label">Preço: </label>
    <input type="number" name="preco" id="preco" readonly="true" class="form-control absoluto2">
</div>

JS

$(document).ready(function () {
    $("#porcentagem2").hide();
    $("#precoAbsoluto").hide();    
    $("#precoAbsoluto2").hide();    
    $('.porcentagemRadio').on('change',function () {
        $("#preco1").val("");
        $("#preco").val("");
        if($(this).val() === '1'){
            $("#porcentagem2").show();
            $("#precoAbsoluto").hide();
            $("#precoAbsoluto2").show();
        }
        if($(this).val() === '2'){
            $("#porcentagem2").hide();
            $("#precoAbsoluto").show();
            $("#precoAbsoluto2").

    document.getElementById(<?php echo $_SESSION['porcentagemRadio']; ?>).checked =  true;
    $(".porcentagemRadio").trigger("change"); 

Answer 1

Here was missing to put .hide():

$("#precoAbsoluto2").????

And also missed to close the second if with }.

Another thing is that the quotes to delimit the PHP variable in:

document.getElementById(<?php echo $_SESSION['porcentagemRadio']; ?>).checked =  true;

Seria:

document.getElementById('<?php echo $_SESSION['porcentagemRadio']; ?>').checked = true; 
                        ↑                                            ↑

Another problem is that the change event points to all elements with the class .porcentagemRadio. When firing Rigger, the event will call the number of times equal to the amount of elements that have the class .porcentagemRadio, that is to say, twice.

The right is to fire the change only in the checked element. Just add the :checked that will trigger the change only in the checked element:

$(".porcentagemRadio:checked").trigger("change");
                        ↑

Behold:

$(document).ready(function () {
    $("#porcentagem2").hide();
    $("#precoAbsoluto").hide();    
    $("#precoAbsoluto2").hide();    
    $('.porcentagemRadio').on('change',function () {
        $("#preco1").val("");
        $("#preco").val("");
        if($(this).val() === '1'){
            $("#porcentagem2").show();
            $("#precoAbsoluto").hide();
            $("#precoAbsoluto2").show();
        }
        if($(this).val() === '2'){
            $("#porcentagem2").hide();
            $("#precoAbsoluto").show();
            $("#precoAbsoluto2").hide();
        }
        });
    document.getElementById('1').checked =  true;
    $(".porcentagemRadio:checked").trigger("change");

        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divRadio">
     <input type="radio" name="porcentagemRadio" id="1" class="pg porcentagemRadio" value="1"/> Porcentagem
     <input type="radio" name="porcentagemRadio" id="2" class="pg porcentagemRadio" value="2"/> Valor absoluto
</div>
<div class="divPorcentagem"  id="porcentagem2">
     <label class="control-label porcentagem" for="porcentagem">Porcentagem: </label>
     <select name="porcentagem" id="porcentagemSelect" class="form-control porcent">
           <option value="">Selecione a Porcentagem</option>
           <option value="20">20%</option>
           <option value="10">10%</option>
           <option value="15">15%</option>
           <option value="30">30%</option>
           <option value="35">35%</option>
           <option value="40">40%</option>
           <option value="45">45%</option>
           <option value="50">50%</option>
     </select>
</div>
<div id="precoAbsoluto" class="divAbsoluto">
     <label for="preco2" class="control-label">Preço: </label>
     <input type="number" name="preco2" id="preco1" class="form-control absoluto">              
</div>
<div id="precoAbsoluto2" class="divAbsoluto2">
    <label for="preco" class="control-label">Preço: </label>
    <input type="number" name="preco" id="preco" readonly class="form-control absoluto2">
</div>

An Obs.: It is not very recommended to use numbers like id of elements, as you report this MDN documentation on the attribute id.