Get input value with jquery mobile

Asked

Viewed 265 times

1

I’m trying to get the value of one input and a textarea with jquery mobile and add the values within a div using append() It’s just not working? someone can tell me where I’m going wrong?

The input and the textarea are within a panel and I want to add the values set in it content of the main page.

//Html da pagina principal que está dentro de data-role="page" e o id dessa page é id="index"
<section data-role="content">
        <h3>Todas as tarefas</h3>
        <div class="list">

        </div>
    </section>

//Inicio do Panel
<div data-role="panel" id="mypanel" data-display="overlay">
        <h4>Nova Tarefa</h4>
        <label for="tarefa">Adicionar Tarefas</label>
        <input type="text" id="tarefa" placeholder="Remédio, Mercado e etc...">
        <label for="detalhe">Detalhes</label>
        <textarea id="detalhe" cols="1" rows="1" placeholder="Exemplo: tomar remédio 'x', comprar leite e etc..."></textarea>
        <button type="button" id="btn" data-icon="check">Salvar</button>
    </div>

$( document ).on( "#index", function() {
    var nextId = 1;
    $("#btn").click(function() {
        var tarefa = $('input#tarefa').val(); //já tentei input[id=tarefa] e (#tarefa).
        var detalhe = $('textarea#detalhe').val(); //já tentei input[id=detalhe] e (#detalhe).
        nextId++;
        var content = "<div class='item" + nextId "'>" + tarefa + '</div>';
        $('.list').append(content);
    });
});
jquery jquery-mobile

  • $( document ).on( "#index", function() {? what is the idea of this line?

  • so I searched the document has to start with this command just as jquery starts with $(document). ready()

  • It won’t be $(document).on("pageinit", "#index", function() { or $( document ).on("pagecreate", "#index", function() { ? you can test?

  • Sergio, I tried both and it didn’t work, if you can take a look at the code I appreciate. https://github.com/Alkun/lembrete-app

  • 1

    Where are you running/loading that code? I don’t see in HTML the code or <script src="...` calling this code... https://github.com/Alkun/lembrete-app/blob/master/index.html#L8-L9

  • 1

    Thanks for the help, the code worked with the line $(document).on("pageinit", "#principal", function() { and I had forgotten to load my Js code.

Show 1 more comment

1 answer

1


The method .on() needs a event in the first argument. The event that triggers this function callback in the element #index, changes the code to:

$(document).on('pageinit', '#index', function(){

Another thing you need to include is the file .js where that code is to be loaded. Your code:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width-device-width, initial-scale=1,"/>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   <title>minha app</title>
</head>

lacks <script src="js/meuJs.js"></script>, Join that after line the mobyle jQuery.

Browser other questions tagged jquery jquery-mobile

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