0

Tenho um código simples em JS, e gostaria de analisar o console do navegador, porém assim que o código roda a função ele dá reload na página.

Código completo

HTML

<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
    <div class="col-lg-12">
        <h4>Novo Grupo</h4>
        <div class="ibox-content">
            <form id="formGrupo" method="get" class="form-horizontal">
                <div class="form-group">
                    <label class="col-sm-2 control-label">Nome do grupo</label>
                    <div class="col-sm-10">
                        <input style="color: #676a6c;" id="nomeGrupo" type="text" placeholder="Nome do Grupo" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Selecionar Parceiros</label>
                    <div class="col-sm-5">
                        <div class="list-group" id="selectable">
                            <a href="#" class="list-group-item">Parceiro 1</a>
                            <a href="#" class="list-group-item">Parceiro 2</a>
                            <a href="#" class="list-group-item">Parceiro 3</a>
                            <a href="#" class="list-group-item">Parceiro 4</a>
                            <a href="#" class="list-group-item">Parceiro 5</a>
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <div class="list-group" id="selectable">
                            <div class="lista-parceiros">
                                <div id="grupo-parceiros"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group"><label class="col-sm-2 control-label"></label>
                    <div class="col-sm-10">
                        <button type="submit" onclick="enviar()" class="btn btn-primary">Novo Grupo</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

JS

<script>

var nomeGrupo = document.getElementById('nomeGrupo');
var prcGrupo = document.getElementsByClassName("ui-selected");
var vetor = new Array();
var i;

function enviar() {
    for (i = 0; i <= prcGrupo.length; i++){
        vetor[i] = prcGrupo.value;
    }
    console.log(nomeGrupo);
    console.log(vetor.value);
    //alert('Nome do grupo: ' + nomeGrupo.value);
    //alert('Parceiros: ' + vetor);

    return alert(vetor.value);
}

4
  • Onde é chamada essa função? 29/11/2017 às 18:56
  • cara está incompleta sua pergunta, de onde vem o ID nomeGrupo? e aonde está declarada a classe ui-selected ? 29/11/2017 às 18:57
  • Em um botão <button type="submit" onclick="enviar()" class="btn btn-primary">Novo Grupo</button> 29/11/2017 às 18:58
  • esse submit que está fazendo o recarregamento, tente trocar o <a href="#" class="btn btn-primary">Novo grupo</a 29/11/2017 às 19:01

3 Respostas 3

0

O problema esta no seu button

troque isso:

<button type="submit" onclick="enviar()" class="btn btn-primary">Novo Grupo</button>

por isso:

<button type="button" onclick="enviar()" class="btn btn-primary">Novo Grupo</button>

o type submit, faz com que o click de um submit no seu formulário, assim dando o reload na página.

ou

Você pode inserir dentro da tag do seu formulário o atributo onsubmit="return false;" isso fará com que seu formulário não faça o submit

<form id="formGrupo" method="get" class="form-horizontal" onsubmit="return false;">
-1

Fiz algumas alterações e adicionei jquery ao seu código, teste para ver se é isso que precisa.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-lg-12">
            <h4>Novo Grupo</h4>
            <div class="ibox-content">
                <form id="formGrupo" method="get" class="form-horizontal" onsubmit="return false;">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Nome do grupo</label>
                        <div class="col-sm-10">
                            <input style="color: #676a6c;" id="nomeGrupo" type="text" placeholder="Nome do Grupo" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Selecionar Parceiros</label>
                        <div class="col-sm-5">
                            <div class="list-group" id="selectable">
                                <a href="#" class="list-group-item">Parceiro 1</a>
                                <a href="#" class="list-group-item">Parceiro 2</a>
                                <a href="#" class="list-group-item">Parceiro 3</a>
                                <a href="#" class="list-group-item">Parceiro 4</a>
                                <a href="#" class="list-group-item">Parceiro 5</a>
                            </div>
                        </div>
                        <div class="col-sm-5">
                            <div class="list-group" id="selectable">
                                <div class="lista-parceiros">
                                    <div id="grupo-parceiros"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group"><label class="col-sm-2 control-label"></label>
                        <div class="col-sm-10">
                            <button type="button" id="btnEnviar" class="btn btn-primary">Novo Grupo</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <script>

        $(document).ready(function(){
            $('.list-group-item').on('click', function(){
                console.log('oi');
                console.log($(this).hasClass('ui-selected'));
                if($(this).hasClass('ui-selected')) {
                    $(this).removeClass('ui-selected');
                }else{
                    console.log($(this));
                    $(this).addClass('ui-selected');
                }
            });

            $('#btnEnviar').on('click', function(){

                var nomeGrupo = $('#nomeGrupo');
                var prcGrupo = $(".ui-selected");
                var vetor = [];

                $.each(prcGrupo, function(){
                    vetor.push(this.text);
                });
                console.log(nomeGrupo);
                console.log(vetor);

                alert(vetor.join(','));


            });
        });
    </script>
-2

Pode trocar o <button> por <a href=""></a>

$('.btn-enviar').on('click', function(){
var nomeGrupo = document.getElementById('nomeGrupo');
var prcGrupo = document.getElementsByClassName("ui-selected");
var vetor = new Array();
var i;


    for (i = 0; i <= prcGrupo.length; i++){
        vetor[i] = prcGrupo.value;
    }
    console.log(nomeGrupo);
    console.log(vetor.value);
    //alert('Nome do grupo: ' + nomeGrupo.value);
    //alert('Parceiros: ' + vetor);

    return alert(vetor.value);

});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
    <div class="col-lg-12">
        <h4>Novo Grupo</h4>
        <div class="ibox-content">
            <form id="formGrupo" method="get" class="form-horizontal">
                <div class="form-group">
                    <label class="col-sm-2 control-label">Nome do grupo</label>
                    <div class="col-sm-10">
                        <input style="color: #676a6c;" id="nomeGrupo" type="text" placeholder="Nome do Grupo" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Selecionar Parceiros</label>
                    <div class="col-sm-5">
                        <div class="list-group" id="selectable">
                            <a href="#" class="list-group-item">Parceiro 1</a>
                            <a href="#" class="list-group-item">Parceiro 2</a>
                            <a href="#" class="list-group-item">Parceiro 3</a>
                            <a href="#" class="list-group-item">Parceiro 4</a>
                            <a href="#" class="list-group-item">Parceiro 5</a>
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <div class="list-group" id="selectable">
                            <div class="lista-parceiros">
                                <div id="grupo-parceiros"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group"><label class="col-sm-2 control-label"></label>
                    <div class="col-sm-10">
                        <a href="#" class="btn btn-primary btn-enviar">Novo Grupo</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .