[SOLUCIONADO] enviar dos data en javascript

[planmental]

Buenas a todos.

Vengo el día de hoy a pedirles ayuda ya que no es la primera vez que lo hago y siempre me han librado de más de un problema.

Tengo un problema, estoy haciendo un filtro múltiple de php pero tengo como intermediario un .js para enviar los datos de un php a otro php.

mi primer php es lo siguiente:

Código HTML:

<input type="text" placeholder="Busca un producto por: Nombre o Tipo" id="bs-prod"/>
 

Código PHP:

    $consulta=mysql_query("select remolque_id, alias from remolque order by remolque_id ASC");
        echo "<select name='bus' id='bus'>";
        echo "<option value=''>Seleccionar Cliente </option>";
        while ($fila=mysql_fetch_array($consulta)){
            echo "<option value='".$fila[0]."'>".utf8_encode($fila[1])."</option>";
        }
        echo "</select>"; 
   

De ahí escojo una opción y la envío al javascript:

Código Javascript:

$('#bs-prod').on('keyup',function(){
        var dato = $('#bs-prod').val();
        var url = 'php/busca_producto.php';
        $.ajax({
        type:'POST',
        url:url,
        data:'dato='+dato,
        success: function(datos){
            $('#agrega-registros').html(datos);
        }
    });
    return false;
    });
    
        $('#bus').on('change',function(){
        var dat = $('#bus').val();
        var url = 'php/busca_producto.php';
        $.ajax({
        type:'POST',
        url:url,
        data:'dat='+dat,
        success: function(datos){
            $('#agrega-registros').html(datos);
        }
    });
    return false;
    });
 

De ahí se envía al php que recibe las variables 'dato' y 'dat' pero no me filtra como quiero. Entonces lo que necesito es que en vez de que el javascript este separado en dos envíe solo una y mi plan es juntar "data:'dato='+dato" y "data:'dat='+dat" pero no se como hacerlo para que se envíe una sola funcion al segundo php.

Gracias por su atención

[Alexis88]

De plano te digo que cada vez que tengas scripts muy similares o iguales, crees una función que abstraiga las funcionalidades que tengan en común de tal forma que puedes reutilizar la función cuantas veces quieras. En este caso, la función tendría dos partes; la primera consistirá en la toma de los valores de ambos elementos, mientras que la segunda parte será la ejecución del método $.ajax(). Para enviar dos o más valores, puedes concatenarlos en la misma cadena de consulta:

Código Javascript:

data: "variable1=" + valor1 + "&variable2=" + valor2
 

O en un objeto literal:

Código Javascript:

data: {
    variable1: valor1,
    variable2: valor2
}
 

Un saludo

[planmental]

Buenas Alexis88.

En efecto hizo lo esperado, pero ahora tengo otro problema. Lo que pasa es que es un filtro en vivo lo que estoy haciendo y al momento en que la lista desplegable selecciono un valor no se actualiza el datagrid, sólo lo hace cuando uso el input.

El javascript es este:

Código Javascript:

$('#bs-prod').on('keyup',function(){
        var dato = $('#bs-prod').val();
        var dat = $('#bus').val();
        var url = 'php/busca_producto.php';
        $.ajax({
        type:'POST',
        url:url,
    data: "dato=" + dato + "&dat=" + dat,
        success: function(datos){
            $('#agrega-registros').html(datos);
        }
    });
    return false;
    });
 

Como ves hice lo que me dijiste

Pero tengo un problema y es con esta parte

Código Javascript:

$('#bs-prod').on('keyup',function(){
 

Necesito meter también

Código Javascript:

$('#bus').on('change',function(){
 

Pues el input funciona con keyup y el select funciona con change, entonces como puedo mezlcar esas dos partes.

PD: soy malo con javascript

[planmental]

Buenas.

Para comentarte que pude lograr lo que queria haciendo lo siguiente:

Código Javascript:

$('#input-cliente').on('keyup',function(){
        var dato = $('#input-cliente').val();
        var dat = $('#remolque').val();
        var url = 'php/busca_producto.php';
        $.ajax({
        type:'POST',
        url:url,
    data: "dato=" + dato + "&dat=" + dat,
        success: function(datos){
            $('#agrega-registros').html(datos);
        }
    });
    return false;
    });
    
        $('#remolque').on('change',function(){
        var dato = $('#input-cliente').val();
        var dat = $('#remolque').val();
        var url = 'php/busca_producto.php';
        $.ajax({
        type:'POST',
        url:url,
    data: "dato=" + dato + "&dat=" + dat,
        success: function(datos){
            $('#agrega-registros').html(datos);
        }
    });
    return false;
    });
 

El problema es que no se me hace muy profesional

Sabe alguien como simplificar lo anterior a algo con menos codigo?

Gracias

[Alexis88]

Iniciado por planmental

Sabe alguien como simplificar lo anterior a algo con menos codigo?

Iniciado por Alexis88

De plano te digo que cada vez que tengas scripts muy similares o iguales, crees una función que abstraiga las funcionalidades que tengan en común de tal forma que puedes reutilizar la función cuantas veces quieras.

Para que quede más claro:

Código Javascript:

function ejemplo(){
    //Instrucciones en común
}
 
$("elementoX").on("evento", ejemplo);
$("elementoY").on("otro evento", ejemplo);
 

Por cierto, ¿por qué pusiste ese return false?

[planmental]

Hola Alexis88.

Me ha venido de maravilla tu ayuda pues me has resuelto el problema


Con respecto al return false es que también estoy realizando unos js para insertar y actualizar datos en mysql y sólo copie y pegué y como no afectaban los dejé ahí

Y pues muchas gracias me ha servido tu ayuda y aquí el js final por si a alguien le sirve:

Código Javascript:

function filtro(){
    var dato = $('#input-cliente').val();
        var dat = $('#remolque').val();
        var url = 'php/busca_producto.php';
        $.ajax({
        type:'POST',
        url:url,
    data: "dato=" + dato + "&dat=" + dat,
        success: function(datos){
            $('#agrega-registros').html(datos);
        }
    });
}
    $("#input-cliente").on("keyup", filtro);
$("#remolque").on("change", filtro);
 

Saludos