Pass select / option to variable

0

I finally decided to do the consultation in a forum, since I no longer find a way to solve the doubt I have.

I am trying to pass the chosen option of a select / option to fields that are hidden and that are autocompleted.

I've read a lot, and I've been through both JS and AJAX and php, but I can not make it work. The Case is this.

I currently have this:

 <td><select  class="form-control2" name="origen" id="idorigen">
    <option value="0">Seleccione</option>
        <?php
        while($dato = mysql_fetch_array($sql)) {
            echo '<option value="'.$dato['db_nombre'].'"> '.$dato['db_nombre'].' </option>';
        }
        ?>
        </select> </td> 
        <button onclick="mostrar()">Buscar</button>

<div id="flotante" style="display:none;" class="row"  value="idorigen">
<?php
?>
<input type=text class="form-control2" id="valueanterior" value="">
</div>



<script languague="javascript">
    function mostrar() {
        var e = document.getElementById("idorigen");

        var value = e.options[e.selectedIndex].value;


       document.getElementById("valueanterior").value = value;


        div = document.getElementById('flotante');
        div.style.display = '';


    }

    function cerrar() {
        div = document.getElementById('flotante');
        div.style.display = 'none';
    }

This shows me the option chosen as id = valueanterior. However in the floating div, I need to have the variable valueanterior to be able to perform a mysql query and get the user data, password, server, etc using this variable.

I have not found the way to do it or a better way. Try using Post, however when using post, the page refreshes and the floating div disappears, appears only when you press search, then reloads the page and disappears, for this reason it does not work for me. If someone can give me a hand it would be great. Sorry if it is not well explained, it is the first time I write in a forum and I really do not handle much. Thanks and regards

    
asked by Lusag silva 18.04.2018 в 22:12
source

2 answers

0

Starting from your select you could use the onchange event:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select_id" onchange="miFuncion($(this).val());">
<option selected disabled>seleccione:</option>
<option value="valor_1">opcion 1</option>
<option value="valor_2">opcion 2</option>
</select>
<input type="text" id="valor_select">
<script>
function miFuncion(select_id){
$("#valor_select").val(select_id);
}
</script>

in this case I use Jquery I leave the link where you probe: link

    
answered by 18.04.2018 в 22:26
0

I did not understand your writing friend, but maybe the onChange event will help you, I added that event to your code, which executes a function (very basic, it can be generalized in many other ways) that will insert the selection in the element with id that you choose.

function mostrar() {
        var e = document.getElementById("idorigen");

        var value = e.options[e.selectedIndex].value;


       document.getElementById("valueanterior").value = value;


        div = document.getElementById('flotante');
        div.style.display = '';


    }

    function cerrar() {
        div = document.getElementById('flotante');
        div.style.display = 'none';
    }
    
    function insertData(elementChanged,elementId){
      document.getElementById(elementId).value = elementChanged.value;
    }
<td><select  class="form-control2" name="origen" id="idorigen" onChange='insertData(this,"valueanterior")'>
    <option selected disabled>Seleccione</option>
    <option value="dato1">dato1</option>
    <option value="dato2">dato2</option>
        </select> </td> 
        <button onclick="mostrar()">Buscar</button>

<div id="flotante" class="row"  value="idorigen">
<input type=text class="form-control2" id="valueanterior" value="">
</div>
    
answered by 18.04.2018 в 23:25