Taking text of the different inputs

Question

Taking text of the different inputs

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

I need to get different input text, I have already tried and right for some, below a list of those that 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 to click to leave in the select outro it open an input to be typed, it is working perfect until it is part, when I put a value in the select it picks everything right, but when I leave in another it does not get the input data.

I made an example in fiddle link

The interesting thing is that when I select one of the other options of the select other than outro I get the correct value and the value of the input field is 0 , but when I select another it it says NaN % the same problem happens in textarea, if it does not have content it informs 0 if it adds content it informs NaN

javascript jquery

asked by anonymous 29.09.2015 / 14:03

2 answers

3

The error was somewhat 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 it has worked, it did not change any more.

Correct:

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

29.09.2015 / 15:16

Conditionals and Flow Control (Codecademy Python 9/15) How to improve comparison and string concatenation C #

score 1 · Accepted Answer

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 such problems. So instead of writing

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

You can type with ['a', 'b', 'c'].join('", "') and in this way separates 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 that can make reading and code structure easier is to handle it in a more scalable way. So you could have the code like this:

// 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");
}

In this way you treat the values in a more programmatic way, reducing the margin of error.

Explanatory notes:

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