take input values

Asked

Viewed 1,330 times

1

I needed to create a code to generate inputs dynamically, below is the code: HTML

<div id="divProdutoBase" style="display:none;">
    Telefone: <input type="text" id="produto[]" name="produto[]" ng-model="telefones" />

    <input type="button" value="Remover" onclick="produtoList.remove(this.parentNode)" />
</div>

<h1>Formulário</h1>
<div id="divProdutoList">
</div>
<input type="button" value="Adicionar Produto" onclick="produtoList.insert()" />

<input type="button" value="fones" ng-click="fones()" />

JS

<script>
// fora do fiddle, você pode trocar a linha abaixo por "var produtoList = {"
var produtoList = {
    'init': function () {
        this.divProdutoList = document.getElementById('divProdutoList');
        this.divProdutoBase = document.getElementById('divProdutoBase');
    },

    'insert': function () {
        var newDiv = this.divProdutoBase.cloneNode(true);
        newDiv.style.display = '';
        console.log('newDiv => ', newDiv);
        this.divProdutoList.appendChild(newDiv);
    },

    'remove': function (el) {
        el.parentNode.removeChild(el);
    }
};
produtoList.init();

is working all right, my doubt is how to pick up input values, I tried to use the following method:

  $scope.fones = function () {
    var fff = document.getElementById('produto[]').value;
    alert(fff);
    alert(JSON.stringify(fff));
}

but it didn’t work

javascript html angularjs input

  • Cade o Angularjs ?

  • Has any response helped solve the problem and can address similar questions from other users? If so, make sure to mark the answer as accepted. To do this just click on the left side of it (below the indicator of up and down votes).

1 answer

1

If you are using angular, as the last snippet of code posted in the question suggests, the value will be in the variable used in ng-model. Then it would look like this:

$scope.fones = function () {
  var fff = $scope.telefones;
  alert(fff);
  alert(JSON.stringify(fff));
}

EDIT 1

Apparently the way below your code will work correctly:

<!DOCTYPE html>
<html lang="">
  <head>
    <title>Teste</title>
  </head>
  <body id="body">
        Produto: <input type="text" id="produto[]" name="produto[]"/>
        Valor: <input type="text" name="valor[]" />
        <input type="button" value="Remover" onclick="produtoList.remove(this.parentNode)" />
    <form>
        <h1>Formulário</h1>
        <div id="divProdutoList">
        </div>
        <input type="button" value="Adicionar Produto" onclick="produtoList.insert()" />
        <input type="button" value="Testar" onclick="produtoList.teste()" />
    </form>

    <script type="text/javascript">
      produtoList = {
          'init': function()
          {
              this.divProdutoList = document.getElementById('divProdutoList');
              this.divProdutoBase = document.getElementById('divProdutoBase');
          },

          'insert': function()
          {
              var newDiv = this.divProdutoBase.cloneNode(true);
              newDiv.style.display = '';
              console.log('newDiv => ', newDiv);
              this.divProdutoList.appendChild(newDiv);
          },

          'remove': function(el)
          {
              el.parentNode.removeChild(el);
          },
          'teste': function()
          {
            alert(document.getElementById("produto[]").value);
          }
      };
      produtoList.init();
    </script>
  </body>
</html>

  • So Sorack, in the view I did it {{phones}}, but when filling in the input, nothing appears, had tried this method q you said, but it didn’t work, axo q the angular is not picking up the values, so I tried to pick up the values with JS, but did not give.

  • You can put the full example in a Fiddler so we can diagnose the problem?

  • Sorack, this is the first time you’ve put in Fiddler, I don’t know how to put the controller code, so put it with js, help me please:https://jsfiddle.net/kpgtoe6d/

  • So, to post in Fiddler you have to put the full content of the file. For example: in html you have to have the imports and everything, got?

  • got it, it’s me using an angular theme, and it’s confusing the Imports, but with the code q posted, it’s already generating the fields.

  • I have this example here tb, http://jsfiddle.net/andersondanilo/7JPrW/, if you can get the data with JS in it.

  • So, it is that the fields will appear but the angular will not work without the module structure and everything. But I already see how to do here

  • Take a look at Edit 1

  • Let’s go continue this discussion in chat.

Show 4 more comments

Browser other questions tagged javascript html angularjs input

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