Change visibility of an INPUT with PHP?

Navigation
0
Hello, I have the following code, in it a Javascript function causes that when selected a certain value, the display of the input tag is changed, leaving it visible. It also has a PHP code, so that when the user submits the data, with some data missing, it does not lose what has already been typed. But after submitting, the input tag goes back to hiding, even though it has the value OTHER selected, does anyone have any idea how to keep it showing the tag after submitting 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 the 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"; 
    }
    
asked by anonymous 12.01.2018 / 18:51

1 answer

1

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

What you can do is to simulate the onchange event when reloading the page simply by using: 

document.addEventListener('DOMContentLoaded', mostraCampo);

So you execute the logic of your function without having to change the field again

Example:

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

No Trigger 

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 above mentioned line of code, the browser executes the onchange of my Select as soon as the document is loaded causing the Square background to turn 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>
    
12.01.2018 / 19:24
Component Vue is not pushing on the props Ruby on Rails - Upload files