Entrar Ainda não tem acesso?
5
respostas

Pegando os valores de um input tipo select.

por João Elias Maccari
| 46.4k xp | 26 posts

Bom dia pessoal. Paralelo ao programa desenvolvido no curso básico de JS, que seria uma tabela com informações adicionadas pelo usuário através de um form, estou criando um outro, na qual tem uma diferença no formulário. No caso , dois dos imputs são do tipo select. Eu até consigo fazer os dados aparecerem na tabela, o problema é na hora de fazer os cálculos(apenas uma soma da quantidade total)... Antes fiz o teste usando um input de texto e deu certo, mas agora com o select não da mais. O código do JS está dividido em dois arquivos, na parte do formulário eu consigo extrair o valor, mas não consigo passar para o arquivo que faz o calculo.

Pois quando chega no momento da validação dos dados não consigo passar o que está nos options do select pro programa validar e fazer o processamento. Não está dando nenhum erro de console, só que o fluxo passa direto pelas condicionais sem processar a conta.

Outro problema é que a validação dos campos parou de funcionar, não fica mais vermelho caso o campo fique em branco

Vou deixar o código pra ver se alguém me da uma luz, obrigado!!

5 respostas
por João Elias Maccari
| 46.4k xp | 26 posts
        <main>
            <section class="container">
                <h2>lista vendas</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Cliente</th>
                            <th>Quantidade</th>
                            <th>Tipo</th>
                            <th>Total R$</th>
                            <th>Quem recebeu</th>
                        </tr>
                    </thead>
                    <tbody id="tabela-vendas">
                        <tr class="venda" id="primeira-venda">  
                            <td class="info-cliente">jose</td>
                            <td class="info-qtd">5</td>
                            <td class="info-tipo">6 Furos</td>
                            <td class="info-total">7.000</td>
                            <td class="info-socio">João</td>
                        </tr>
                        <tr class="venda" id="segunda-venda">  
                            <td class="info-cliente">Nara</td>
                            <td class="info-qtd">5</td>
                            <td class="info-tipo">6 Furos</td>
                            <td class="info-total">4.000</td>
                            <td class="info-socio">joao</td>
                        </tr>
                        <tr class="venda" id="terceira-venda">  
                            <td class="info-cliente">Felipe</td>
                            <td class="info-qtd">20</td>
                            <td class="info-tipo">9 Furos</td>
                            <td class="info-total">12.000</td>
                            <td class="info-socio">socio01</td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </main>

       <!-- ... -->
            <section class="container">
                <h2 id="titulo-form">Adicionar nova venda</h2>
                <form id="form-adiciona">
                    <div class="grupo">
                        <label for="cliente">Cliente:</label>
                        <input id="cliente" name="cliente" type="text" placeholder="digite o nome do cliente" class="campo">
                    </div>
                    <div class="grupo">
                        <label for="quantidade">Quantidade:</label>
                        <input id="quantidade" name="quantidade" type="text" placeholder="digite a quantidade de tijolos" class="campo campo-medio">
                    </div>
                    <div class="grupo">
                        <label for="tipo">Tipo:</label>
                        <select id="tipo" name="tipo" type="text" placeholder="digite o tipo do priduto" class="campo campo-medio" onchange="getTipo()">
                            <option  >Selecione o tipo</option>
                            <option name="6f" value="6f">Tijolos 6 furos</option>
                            <option name="9f"  value="9f">Tijolos 9 furos</option>
                            <option name="8f" value="8f">Tijolos 8 furos</option>
                            <option name="tavela" value="tavela">Tavela</option>
                        </select>
                    </div>
                    <div class="grupo">
                        <label for="total">Total R$:</label>
                        <input id="total" type="text" placeholder="digite o total em R$" class="campo campo-medio">
                    </div>
                    <div class="grupo">
                        <label for="socio">Quem recebeu:</label>
                        <select id="socio" name="socio" type="text" placeholder="digite quem recebeu" class="campo campo-medio" onchange="getSocio()">
                            <option value="entrada">sócio</option>
                            <option  value="socio01">Sócio 01</option>
                            <option  value="socio02">sócio 02</option>


                        </select>
                    </div>


                    <button id="adicionar-venda" class="botao bto-principal">Adicionar nova venda</button>
                </form>
        </section>

    </div>
por João Elias Maccari
| 46.4k xp | 26 posts

JS formulário

let tipo ;
let socio;

let btnAdd = document.querySelector('#adicionar-venda')
btnAdd.addEventListener("click", function(event) {
    event.preventDefault()



    var form = document.querySelector('#form-adiciona')

    let cliente = form.cliente.value;
    let quantidade = form.quantidade.value;
    let tipoProd = tipo
    let total =  form.total.value;
    let socioRecebe = socio


    console.log(cliente);
    console.log(quantidade);
    console.log(tipoProd);
    console.log(total);
    console.log(socioRecebe);

    var vendaTr = document.createElement("tr")

    var clienteTd = document.createElement("td")
    var quantidadeTd = document.createElement("td")
    var tipoTd =  document.createElement("td")
    var totalTd = document.createElement("td")
    var socioTd = document.createElement("td")

    clienteTd.textContent = cliente
    quantidadeTd.textContent = quantidade
    tipoTd.textContent = tipo
    totalTd.textContent = total
    socioTd.textContent = socio

    vendaTr.appendChild(clienteTd)
    vendaTr.appendChild(quantidadeTd)
    vendaTr.appendChild(tipoTd)
    vendaTr.appendChild(totalTd)
    vendaTr.appendChild(socioTd)


    var tabela = document.querySelector('#tabela-vendas')
    tabela.appendChild(vendaTr);
})

function getSocio(){
    let inputSelectSocio = document.getElementById('socio');
    let op = inputSelectSocio.options[inputSelectSocio.selectedIndex].text

    let opValor = document.getElementsByClassName('info-tipo')
    opValor.value = op

    socio = op
    return socio;
}



function getTipo(){
    let inputSelect = document.getElementById('tipo');
    let op = inputSelect.options[inputSelect.selectedIndex].text

    let opValor = document.getElementsByClassName('info-tipo')
    opValor.value = op


    tipo = op

    return tipo;


}
por João Elias Maccari
| 46.4k xp | 26 posts

JS calculo / validação

var vendas = document.querySelectorAll('.venda');
let somaTot6f = 0;
let somaTot9f = 0;
let somaTot8f = 0;
let somaTavela = 0;
let somaTot = 0;






for (let i = 0; i<vendas.length; i++) {

    let venda = vendas[i]

    //tag de celula da tabela
    let tdNome = venda.querySelector(".info-cliente");
    let tdQt = venda.querySelector('.info-qtd');
    let tdTipo = venda.querySelector('.info-tipo')
    let tdSocio = venda.querySelector('.info-socio')
    let tdTotal = venda.querySelector('.info-total')



    //tag valor da celula
    let nome = tdNome.textContent
    let quantidade = Number(tdQt.textContent)
    let tipo = tdTipo.textContent
    let total = tdTotal.textContent
    let socio = tdSocio.textContent

    console.log(tipo);

    let campoEhValido = true 

    if (quantidade <= 0 ) {
        campoEhValido = false
        tdQt.textContent = "Insira um valor correto"
        venda.classList.add("campo-invalido")
    }

    if (nome == "") {
        venda.classList.add("campo-invalido")
        tdNome.textContent = "Insira um nome"

    }

    if (tipo == "") {
        venda.classList.add("campo-invalido")
        tdTipo.textContent = "Insira um tipo"

    }

    if (total == "") {
        venda.classList.add("campo-invalido")
        tdTotal.innerHTML = "Insira o total"
    }

    if (socio == "") {
        venda.classList.add("campo-invalido")
        tdSocio.textContent = "Insira um nome"
    }


    if(tipo == '6 furos') {
            somaTot6f += quantidade

        } else if (tipo == "9 furos") {

            somaTot9f += quantidade

        }else if (tipo =="8 furos"){

            somaTot8f =+ quantidade

        }else if (tipo == "tavela") {

            somaTavela =+ quantidade
        }

        console.log(somaTot6f);
}
por João Elias Maccari
| 46.4k xp | 26 posts

CSS

*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color: grey;
}

header{
    height: 3em;
    background-color: #333;
    margin-bottom: 1em;
    color: white;
}

header .titulo{
    font-size: 2em;
    display: inline-block;
    vertical-align: middle;


}

header h2{

}

header .container:before{
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.main_container{

    width: 100vw;
    height: 100vh;
    position: relative;
}

.container{
    width: 60%;
    height: 100%;
    margin: 0 auto;
}

section{
    margin: 2em 0;
    overflow: hidden;
}

section h2{
    font-size: 2em;
    display: block;
    padding-bottom: 10px;
    border-bottom: 1px solid #fff;
    margin-bottom: 20px; 
}

table{

    box-shadow: 0 5px 30px darkgrey;
    width: 100%;
    table-layout: fixed;

}

table, th, td{
    border: 1px solid black;
    border-collapse: collapse ;
}

th, td{
    text-align: center;
    width: 21%;
   padding: 15px; 
}

tr, td{
    cursor: pointer;
}

th{
    font-weight: bold;
    text-align: center;
}

label{
    color: #555;
    display: block;
    margin-bottom: .2em;
}

.campo{
    margin: 0;
    padding-bottom: 1em;
    width: 100%;
    border: 1px solid #ccc;
    padding: .7em;
    width: 100%;
}

.campo-medio{
    display: inline-block;
    padding-right: .5em;
}

.grupo{
    width: 32%;
    display: inline-block;
    padding: 10px 0px;
}

button{
    padding: .5em 2em;
    border: 0;
    border-bottom: 3px solid;
    font-size: 1.2em;
    cursor: pointer;
    margin: 0;
    margin-top: -3px;
    color: #fff;
    background-color:#0c8cd3;
    border-color: #04324c;
    width: 20%;
    display: block;
    clear: both;
    margin: 10px 0px;

}

button:active{
    margin-top:0px;
    border: 0;
}

button[disabled=disabled], button:disabled {
    background-color: gray;
    border-color: darkgray;

}

.adicionar-venda{
    margin-top: 30px;
}

.campo-invalido{
    border: 1px solid red;
}

.paciente-invalido{
    background-color:lightcoral;
}

.campo-invalido{
    background-color: lightcoral;
}
por GABRIEL DUPLA
| 683.4k xp | 1662 posts
Pessoa Monitora Fórum Ops

Opa João, tudo bem?

Sinto muito pela demora em obter uma resposta.

Poderia por gentileza em enviar o seu projeto completo? Dessa forma posso analisar o seu código na totalidade e simular o problema para ajudá-lo de forma mais assertiva.

Você pode compartilhar o link do seu projeto via Github.

Fico à disposição.

Tenha um bom dia e bons estudos.