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
– Luan Brito
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?
– Marcelo
I don’t quite understand what you want to do now
– Luan Brito