For JS code to scan the console

Asked

Viewed 52 times

0

I have a simple code in JS, and would like to analyze the browser console, but as soon as the code runs the function it gives Reload on the page.

Complete code

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

javascript console

  • Where is this function called?

  • face is incomplete your question, where does the id name Group? and where is declared the class ui-Lected ?

  • On a button <button type="Submit" onclick="send()" class="btn btn-Primary">New Group</button>

  • this Ubmit that is doing the recharging, try to change the <a href="#" class="btn btn-primary">Novo grupo</a

3 answers

0


The problem is in your button

change this:

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

therefore: 

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

type Submit, causes the click of a Submit in your form, thus giving the Reload on the page.

or

You can enter the onsubmit="Return false;" attribute inside the tag of your form that will cause your form not to do Submit

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

-1

I made some changes and added jquery to your code, test to see if this is what you need.

<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

Can change the <button> for <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>

Browser other questions tagged javascript console

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