Take form <option> values from ajax

Asked

Viewed 44 times

0

I’m generating the selects form by PHP from the database, thus:

$sql = "SELECT atributos.id AS id_atributos, atributos.nome AS nome_atributos, atributos.id_produto AS id_produto_atributos,
    atributos_tipos.id AS id_atributos_tipos, atributos_tipos.nome AS nome_atributos_tipos
        FROM atributos
        INNER JOIN atributos_tipos
        ON atributos.id = atributos_tipos.id_atributo and atributos.id_produto = ".$_GET['id_produto']."
        ORDER BY nome_atributos, nome_atributos_tipos";

$query = $mysqli->query( $sql )or die( $mysqli->error );

echo ''.PHP_EOL;

$prev_cat = '';
while( $dados = $query->fetch_object() )
{
    if( $prev_cat!=$dados->nome_atributos )
    {
        if( $prev_cat!='' ) echo "\t".'</select> '.PHP_EOL.''.PHP_EOL;

        echo '<strong>'.$dados->nome_atributos.'</strong>'.PHP_EOL."\t".'<select name="'.$dados->nome_atributos.'" id="'.$dados->nome_atributos.'"> '.PHP_EOL;
        $prev_cat = $dados->nome_atributos;
    }
    echo "\t\t".'<option value='.$dados->nome_atributos_tipos.'>'.$dados->nome_atributos_tipos.'</option>'.PHP_EOL;
}
echo "\t".'</select>'.PHP_EOL.''.PHP_EOL.'';

It generates the selects correctly, my question is: How would AJAX bring to PHP these two dynamic generated selects?

Html

<form id="selecionar_empresa_form_1" class="formAjax formAjax2" data-formid="1" method="post" enctype="multipart/form-data">

<input type="hidden" name="selecionar_empresa" id="selecionar_empresa_1" value="1">
<input type="hidden" name="i" value="1" class="i">   
<input type="hidden" name="id" id="id_1" value="1">
<input type="hidden" name="acao" id="acao1" value="add">
<input type="hidden" name="preco" id="preco1" value="2500">
<input type="hidden" name="id_cliente" id="id_cliente1" value="114">
<input type="hidden" name="key_compra" id="idUsuario1" value="3e4pfieujh3a7uyd82vd">

<div class="resultado_empresa_selecionada_1 atributos_produtos">

<strong>Cores</strong>
    <select name="Cores" id="Cores"> 
        <option value="Azul">Azul</option>
        <option value="Branca">Branca</option>
        <option value="Preta">Preta</option>
    </select> 

<strong>Tamanho</strong>
    <select name="Tamanho" id="Tamanho"> 
        <option value="Grande">Grande</option>
        <option value="Media">Media</option>
        <option value="Pequena">Pequena</option>
    </select>

    <button type="submit" class="add-to-cart btn  btn-warning"><i class="fas fa-cart-plus"></i> Adicionar Carrinho</button>

</div>
</form>

Ajax

//Executa em cada form:
$('.formAjax').on("submit",function() {

    // Pegar o ID do formulário para depois:
    //Captura o elemento que sofreu o evento de "submit"
    const formDetails = $(this);

    var formID=formDetails.data("formid");

    //Remove a palavra quitar_ e deixa somente "debitoX"
 $('.resultado_empresa_selecionada_'+formID).html('<img src="imagens/Ellipsis-1s-66px.gif">');

$.ajax({
     type: "post",
     url: "add.php",
     data: formDetails.serialize(),
     success: function(data) {
         //Faz alguma coisa

         $('.resultado_empresa_selecionada_'+formID).html(data); 


$('.resultado_empresa_selecionada_'+formID).fadeIn('slow').html(data);
$('.resultado_empresa_selecionada2_'+formID).fadeIn('slow').html(data);
     },
     complete: function() {
         $.ajax({
             type: "POST",
             url: 'count_carrinho.php',
             data: formDetails.serialize(),

             success: function(data) {
                 // Inserting html into the result div
                 $('.contar_carrinho').html(data);

             },
             error: function(jqXHR, text, error) {
                 // Displaying if there are any errors
                 $('.contar_carrinho').html(error);

             }
         });
});

I managed to run AJAX for each select so, but now how do I get PHP to take the values of the select from the form?

<?php


$mysqli = new mysqli('mysql.claqui.com','claqui','Bodywawa4145', 'claqui');






    $sql = "SELECT atributos.id AS id_atributos, atributos.nome AS nome_atributos, atributos.id_produto AS id_produto_atributos,
        atributos_tipos.id AS id_atributos_tipos, atributos_tipos.nome AS nome_atributos_tipos
            FROM atributos
            INNER JOIN atributos_tipos
            ON atributos.id = atributos_tipos.id_atributo and atributos.id_produto = ".$_GET['id_produto']."
            ORDER BY nome_atributos, nome_atributos_tipos";

    $query = $mysqli->query( $sql )or die( $mysqli->error );

    echo ''.PHP_EOL;

    $prev_cat = '';
    while( $dados = $query->fetch_object() )
    {
        if( $prev_cat!=$dados->nome_atributos )
        {
            if( $prev_cat!='' ) echo "\t".'</select></div></form> '.PHP_EOL.''.PHP_EOL;

            echo '<strong>'.$dados->nome_atributos.'</strong>'.PHP_EOL."\t".'<div class="resultado_atributo_'.$dados->nome_atributos.'" ">  <form class="atributo_vai" data-formid_atributos="'.$dados->nome_atributos.'" method="post" enctype="multipart/form-data">
            <select name="'.$dados->nome_atributos.'" class="atributo_vai34"> '.PHP_EOL;
            $prev_cat = $dados->nome_atributos;
        }
        echo "\t\t".'<option value='.$dados->nome_atributos_tipos.'>'.$dados->nome_atributos_tipos.'</option>'.PHP_EOL;
    }
    echo "\t".'</select></div></form>'.PHP_EOL.''.PHP_EOL.'';

    ?>

Ajax

$(".atributo_vai").on("change", "select", function() { 

    // Pegar o ID do formulário para depois:
    //Captura o elemento que sofreu o evento de "submit"
    const formDetails_atributos = $(this).closest(".atributo_vai");


    var formid_atributos=formDetails_atributos.data("formid_atributos");

    $('.resultado_atributo_'+formid_atributos).html('<img src="imagens/Ellipsis-1s-66px.gif">');


                $.ajax({
                    url: 'add_atributo.php',
                    //url: '/xcommerce/public/purchastotal/'+$(this).val(),
                    type: 'POST',
                     data: formDetails_atributos.serialize(),
        success: function (data) {
            console.log(data)
            // Inserting html into the result div
            $('.resultado_atributo_'+formid_atributos).html(data);
            $('.resultado_atributo_'+formid_atributos).fadeIn('slow').html(data);
        },
                    error: function (xhr) {
                        alert("Something went wrong, please try again");
                    }
                });


        });
  • put to call the ajax when you click the select options, look about the property .change jquery and try to implement

  • Thanks @Luanbrito worked, is running Ajax in each select of the form, how I get these values of seletct with in PHP? Since selects are generated from Mysql?

  • I don’t quite understand what you want to do now

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.