How to capture the value of a select or input text to send it by ajax

Question

How to capture the value of a select or input text to send it by ajax

Navigation

#1 by (0 votes)

0

Good morning I am trying to capture the value of a select that is outside of a form to send it to a BD, with an example that I was given on this site I managed to send 3 parameters but the select always sends the first item and not the one I select then try to send what I select to input text but send it to me empty, this is the code with which I capture the select in a 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">

and with this I sent it by 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>

javascript ajax

asked by juan perez 17.12.2017 в 16:26

source

1 answer

Problem with isValid () View Google Maps on Xamarin Android

score 0 · Accepted Answer

To get a value of select you can use event.target.value and pass it as a parameter in the function change() or get its value using document.getElementById("no_conformidad").value I hope you help greetings.

NOTE: To obtain the values of a select you have to add value="valor del select" what is inside the html <option value="MESA-1"> ---> MESA-1 </option> is what see the user.

var valorEnvio = ""

function selecOp(valor){
  document.getElementById("valorDeSelect").value = valor//declararle el valor del select al input
}

function obtenerValor(){
  valor = document.getElementById("valorDeSelect").value//obtener valor del input
  valorEnvio = valor //declarar valor a la variable a usar en el ajax
  console.log(valorEnvio)
  

}

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

Solution to the problem of getting data

You have to change the obtaining of the data and put it inside the event click when you are outside you will not find the data.

<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>