Como capturar el valor de un select o input text para enviarlo por ajax

publicado por: Anonymous

Buenos días estoy intentando capturar el valor de un select que esta fuera de un formulario para enviarlo a una BD, con un ejemplo que me dieron en este sitio logre enviar 3 parámetros pero el del select siempre envía el primer item y no el que selecciono entonces intente enviar lo que selecciono a un input text pero me lo envía vació, este es el código con el que capturo lo del select en un input.

<script type="text/javascript">

        function selecOp()
        {
        var op=document.getElementById("no_conformidad");
        var tt=document.getElementById("text");
        if (op.selectedIndex==0)tt.value="";
        if (op.selectedIndex==1)tt.value="MESA-1";
        if (op.selectedIndex==2)tt.value="MESA-2";
        if (op.selectedIndex==3)tt.value="MESA-3";
        if (op.selectedIndex==4)tt.value="MESA-4";
        if (op.selectedIndex==5)tt.value="MESA-5";
        if (op.selectedIndex==6)tt.value="MESA-6";
        }
          var mesa=document.getElementById("text");
        </script>
        <select name="no_conformidad" id="no_conformidad" onchange="selecOp()">
        <option>Selecciona una mesa</option>
        <option>MESA-1</option>
        <option>MESA-2</option>
        <option>MESA-3</option>
        <option>MESA-4</option>
        <option>MESA-5</option>
        <option>MESA-6</option></select>
        <input type="text" name="text" id="text" size="4">

y con este lo envio por ajax

   <script>
  <script>
     $(document).on('ready',function(){
        //var mesa=document.getElementById("text").value;
            mesa = document.getElementById("text").value//obtener valor del 
      input

            var item = $('#it1').val();
           var precio = $('#it2').val();
       $('#boton1').click(function(){
         var url = "enviar.php";
         $.ajax({
            type: "POST",
            url: url,
            data:{mesa:mesa,item:item,precio:precio},
            success: function(data)
            {
            //  $('#resp').html(data);
            }
          });
          alert(mesa);
            return false;
       });
     });
     </script>

solución

Para obtener un valor de un select puedes usar event.target.value y pasarlo como parámetro en la función change() o obtener su valor usando document.getElementById("no_conformidad").value espero te ayude saludos.

NOTA: Para obtener los valores de un select tienes que agregar value="valor del select" lo que esta dentro del html <option value="MESA-1">—>MESA-1</option> es lo que ve el usuario.

_x000D_

_x000D_

var valorEnvio = ""_x000D_
_x000D_
function selecOp(valor){_x000D_
  document.getElementById("valorDeSelect").value = valor//declararle el valor del select al input_x000D_
}_x000D_
_x000D_
function obtenerValor(){_x000D_
  valor = document.getElementById("valorDeSelect").value//obtener valor del input_x000D_
  valorEnvio = valor //declarar valor a la variable a usar en el ajax_x000D_
  console.log(valorEnvio)_x000D_
  _x000D_
_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<select name="no_conformidad" id="no_conformidad" onchange="selecOp(event.target.value)">_x000D_
        <option value="Selecciona una mesa">Selecciona una mesa</option>_x000D_
        <option value="MESA-1">MESA-1</option>_x000D_
        <option value="MESA-2">MESA-2</option>_x000D_
        <option value="MESA-3">MESA-3</option>_x000D_
        <option value="MESA-4">MESA-4</option>_x000D_
        <option value="MESA-5">MESA-5</option>_x000D_
        <option value="MESA-6">MESA-6</option></select>_x000D_
        <input id="valorDeSelect" type="text" name="" value="">_x000D_
        _x000D_
        <br>_x000D_
        _x000D_
        <button onclick="obtenerValor()" type="button" name="button">Obtener valor del Input</button>

_x000D_

_x000D_

_x000D_

Solución al problema de obtener datos

Tienes que cambiar la obtención de los datos y ponerlo dentro del evento click
al estar afuera no va a encontrar los datos.

<script>
 <script>
 $(document).on('ready',function(){
    //var mesa=document.getElementById("text").value;

   $('#boton1').click(function(){
    mesa = document.getElementById("text").value//obtener valor del input


       var item = $('#it1').val();
       var precio = $('#it2').val();
     var url = "enviar.php";
     $.ajax({
        type: "POST",
        url: url,
        data:{mesa:mesa,item:item,precio:precio},
        success: function(data)
        {
        //  $('#resp').html(data);
        }
      });
      alert(mesa);
        return false;
   });
 });
 </script>
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *