Taking text from different inputs

Question

I need to get different text inputs, already tried and right for some, below a list of what worked.

lbl_DteHora_Reu
slc_Local_Reu
slc_Palavra_Reu
slc_QuebraGelo_Reu
slc_Louvor_Reu

HTML:

            <label class="item item-input widget uib_w_60 d-margins ajustes" data-uib="ionic/input" data-ver="0" ><span class="input-label">Data e Hora</span>
            <input type="datetime-local" id="lbl_DteHora_Reu">
        </label>
        <label class="item item-input item-select widget uib_w_67 d-margins" data-uib="ionic/select" data-ver="0">
            <div class="input-label">Local</div>
            <select id="slc_Local_Reu" class="slc_Reuniao">
                <option value="SO" selected="">--</option>
                <option value="OT">Outro</option>
            </select>
        </label>
        <input id="lbl_Endereco_Reu" type="text" placeholder="Digite o outro endereço">

        <label class="item item-input item-select widget uib_w_62 d-margins" data-uib="ionic/select" data-ver="0">
            <div class="input-label">Palavra</div>
            <select id="slc_Palavra_Reu" class="slc_Reuniao">
                <option value="SO" selected="">--</option>
                <option value="OT">Outro</option>
            </select>
        </label>
        <input id="lbl_Palavra_Reu" type="text" placeholder="Digite outra pessoa para palavra">

        <label class="item item-input item-select widget uib_w_63 d-margins" data-uib="ionic/select" data-ver="0">
            <div class="input-label">Quebra Gelo</div>
            <select id="slc_QuebraGelo_Reu" class="slc_Reuniao">
                <option value="SO" selected="">--</option>
                <option value="OT">Outro</option>
            </select>
        </label>
        <input id="lbl_QuebraGelo_Reu" type="text" placeholder="Digite outra pessoa para o quebra gelo">
        <label class="item item-input item-select widget uib_w_64 d-margins" data-uib="ionic/select" data-ver="0">
            <div class="input-label">Louvor</div>
            <select id="slc_Louvor_Reu" class="slc_Reuniao">
                <option value="SO" selected="">--</option>
                <option value="OT">Outro</option>
            </select>
        </label>
        <input id="lbl_Louvor_Reu" type="text" placeholder="Digite outra pessoa para o louvor">
        <label class="item item-input widget uib_w_65 d-margins ajustes_button" data-uib="ionic/textarea" data-ver="0">
            <textarea id="txt_Observacoes_Reu" placeholder="Observação" rows="10" wrap="hard"></textarea>
        </label>

Jquery:

        /* button  #btn_Salvar_Reuniao */
$(document).on("click", "#btn_Salvar_Reuniao", function(evt)
{
  var dtHora = $("#lbl_DteHora_Reu").val();
  var local = $("#slc_Local_Reu").val();
  var local_outro = $("#lbl_Endereco_Reu").val();
  var palavra = $("#slc_Palavra_Reu").val();
  var palavra_outro = $("#lbl_Palavra_Reu").val();
  var quebragelo = $("#slc_QuebraGelo_Reu").val();
  var quebragelo_outro = $("#lbl_QuebraGelo_Reu").val();
  var louvor = $("#slc_Louvor_Reu").val();
  var louvor_outro = $("#lbl_Louvor_Reu").val();
  var obs = $("textarea#txt_Observacoes_Reu").val();

  console.log(dtHora+","+local+",",+local_outro+",",+palavra+",",+palavra_outro+",",+
  quebragelo+",",+quebragelo_outro+",",+louvor+",",+louvor_outro+",",+   obs);

  if (local == "SO" || local_outro == "" || palavra == "SO" || palavra_outro == "" || quebragelo == "SO" || quebragelo_outro == "" || louvor== "SO" || louvor_outro == ""){
    alert("Não pode haver nenhum campo vazio");
  }else{
    alert("Pode cadastrar");
  }

});

My idea is when click leave on select outro it opens an input to be typed, it is working perfect until it is part, when I put a value in select it picks everything right, but when I leave in another it does not take the input data.

I made an example in the fiddle https://jsfiddle.net/#run&togetherjs=hpc2TmqAnv

The interesting thing is that when I select one of the other select options other than outro I take the correct value and the value of the field input regarding the same comes 0, but when I select another he informs NaN the same problem happens in textarea, if it has no content it informs 0 if add content it informs NaN

Answer 1

The error was something grotesque, the problem was in the console.log

console.log(dtHora+","+local+",",+local_outro+",",+palavra+",",+palavra_outro+",",+
  quebragelo+",",+quebragelo_outro+",",+louvor+",",+louvor_outro+",",+   obs);

I put , out of aspas, after taking them worked without further change.

the right thing to do:

console.log(dtHora+","+local+","+local_outro+","+palavra+","+palavra_outro+","+
  quebragelo+","+quebragelo_outro+","+louvor+","+louvor_outro+","+   obs);

Answer 2

As you noticed, you also had a syntax error console.log here

 console.log(dtHora+","+local+",",+local_outro+","
                                 ^^

There are better ways to write this and avoid these kinds of problems. So when writing

console.log(dtHora+","+local+","+local_outro+","+palavra+","+palavra_outro+","+  quebragelo+","+quebragelo_outro+","+louvor+","+louvor_outro+","+   obs);

you can write with ['a', 'b', 'c'].join('", "') and that way you separate the variables from the string that will join them. In your case it would look like this:

console.log([dtHora, local, local_outro, palavra, palavra_outro, quebragelo, quebragelo_outro, louvor, louvor_outro, obs].join('","'));

Another aspect, which can facilitate reading and code structure is to treat it in a more scalable way. So you could have the code this way:

// esta primeira linha/array é o unico sitio onde inseres conteúdo. 
// O resto são passos de processamento desta mesma array
var ids = ["#lbl_DteHora_Reu","#slc_Local_Reu","#lbl_Endereco_Reu","#slc_Palavra_Reu","#lbl_Palavra_Reu","#slc_QuebraGelo_Reu","#lbl_QuebraGelo_Reu","#slc_Louvor_Reu","#lbl_Louvor_Reu","textarea#txt_Observacoes_Reu"];
var elementos = ids.map($); // transformar uma array de ids em array de objetos jQuery (*nota 1)

// aqui é a mesma ideia que em cima só que transformando a array de elementos/objetos numa array com os seus valores
// a ideia de `.get()` é para o jQuery retornar uma array nativa e `join()` expliquei no inicio da resposta => para concatenar a array.
var string = elementos.map(function(){
    return $(this).val();
}).get().join('","');
console.log(string);

// O método filter remove elementos da array, fazendo-a mais pequena.
// Se no final não tiver removidos todos então há algun(s) vazios e o `length` vai dar positivo
var vazios = elementos.filter(function(){
    var value = $(this).val();
    return this.tagName.toLowerCase() == 'select' ? value == 'SO' : value == '';
}).length;

if (vazios ){
    alert("Não pode haver nenhum campo vazio");
}else{
    alert("Pode cadastrar");
}

This way you treat the values in a more programmatic way reducing the error margin.

Explanatory notes:

#1 - var elementos = ids.map($); will go through all the elements and for each do elementos[x] = $(id[x]). Ou seja a função.map(Function(id, index){passa para$` one id at a time.