Change the visibility of an INPUT with PHP?

Question

Hello, I have the following code below, in it a Javascript function makes that when selected certain value, the tag display inputis changed, leaving it visible. It also has a PHP code, so that when the user submits the data, with some data missing, he does not miss what has already been typed. But after Submit, the tag input back to hide, even with the OTHER value selected, someone has some idea of how to keep showing the tag after Ubmit with missing data?

<div class="form-group">                
     <label> Value <br />
       <select class="form-group" name="value" placeholder="<?php $set1 = escape(Input::get('value')); ?>" id="value" onchange="mostraCampo(this.value);">
        <option></option>
        <option value="value1" <?php if ($set1 == "value1") {echo "selected='selected'";} ?>>value1</option>
        <option value="value2" <?php if ($set1 == "value2") {echo "selected='selected'";} ?>>value2</option>
        <option value="value3" <?php if ($set1 == "value3") {echo "selected='selected'";} ?>>value3</option>
        <option value="value4" <?php if ($set1 == "value4") {echo "selected='selected'";} ?>>value4</option>
        <option value="value5" <?php if ($set1 == "value5") {echo "selected='selected'";} ?>>value5</option>
        <option value="NENHUMA" <?php if ($set1 == "NENHUMA") {echo "selected='selected'";} ?>>NENHUMA</option>
        <option value="OUTRA" <?php if ($set1 == "OUTRA") {echo "selected='selected'";} ?>>OUTRA</option>
       </select>
     <input type="text" class="form-control" name="outrainst" value="<?php echo escape(Input::get('outrainst')); ?>" id="outrainst" style="display: none;">
    </label>

</div>

This is Javascript to show the tag input:

    function mostraCampo(obj) {
      var select = document.getElementById('value');
      var txt = document.getElementById("outrainst");
      txt.style.display = (select.value == 'OUTRA' || $set1 == 'OUTRA') 
          ? "block"
          : "none"; 
    }

Answer 1

If you reload the page when returns the missing data, your <select> back to its original state, even if you mark it as selected.

What you can do is simulate the event of onchange when reload the page simply using:

document.addEventListener('DOMContentLoaded', mostraCampo);

So, you run the logic of your function without needing to change the field again

Example:

In the example below, note that when loading the page, even with the Red Background option Javascript does not execute the onchange:

Trigger-free

function mostraCampo() {
    var select = document.getElementById('slcTeste');
    var resultado =  document.getElementById('resultado');
    resultado.style.backgroundColor = (select.value == 'vermelho') ?
      "red" :
      "white";
}

#resultado{
    width: 100px;
    height: 100px;
    margin: 30px;
    background-color: white;
}

<select id="slcTeste" onchange="mostraCampo()">
    <option value="vermelho">Fundo Vermelho</option>
    <option value="nenhum">Nenhum</option>
</select>

<div id="resultado"></div>

Now adding the cited line of code, the browser executes the onchange from my Select as soon as the document is loaded causing the Square Background to Red

With Trigger

document.addEventListener('DOMContentLoaded', mostraCampo);


function mostraCampo() {
    var select = document.getElementById('slcTeste');
    var resultado =  document.getElementById('resultado');
    resultado.style.backgroundColor = (select.value == 'vermelho') ?
      "red" :
      "white";
}

#resultado{
    width: 100px;
    height: 100px;
    margin: 30px;
    background-color: white;
}

<select id="slcTeste" onchange="mostraCampo()">
    <option value="vermelho">Fundo Vermelho</option>
    <option value="nenhum">Nenhum</option>
</select>

<div id="resultado"></div>