Convert a Select with 2 option in HTML to 2 buttons

Question

Convert a Select with 2 option in HTML to 2 buttons

Navigation

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

2

Context:

Daily access to a website several times during the day, which before actually entering, in addition to informing user and password, I have to select the type of access between the existing 2, I think it is bad to have to select and then click enter .

Code:

    <select>
       <option value="A">Administrador</option>
       <option value="U">Usuário</option>
    </select>
    
    <br><br>
    <!-- Login -->

    <input name="login" type="submit" value="LOGIN">

Need:

I would like to modify, if possible, this login for 2 buttons, one Administrator , another User , and so log in automatically.

I know it's possible to do this via browser extensions, such as Tampermonkey / Greasemonkey, manipulating the elements via JS, but specifically this modification I do not know.

Could someone help me, or give some idea?

Additional detail :
I do not have access to the source code, that is, I can not modify, just manipulate via browser.

javascript html html-select

asked by anonymous 31.03.2016 / 15:54

4 answers

2

Well, I still hope I can help.

With jQuery:

<html>
    <head>
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script><scripttype="text/javascript">
            $(document).ready(function(){
                $(".btn").click(function(){
                    $("#tipoLogin").val($(this).attr("name"));
                    $( "#formLogin" ).submit(); 
                });
            });
        </script>
    </head>
    <body>
        <form id="formLogin">
            <select name="tipoLogin" id="tipoLogin">
               <option value="A">Administrador</option>
               <option value="U">Usuário</option>
            </select>

            <br><br>
            <!-- Login -->

            <input type="text" name="user" />
            <input type="text" name="pass" />

            <br><br>

            <input class="btn" name="A" type="button" value="LOGIN with Administrator">
            <input class="btn" name="U" type="button" value="LOGIN with User">
        </form>
    </body>
</html>

If it helps, do not forget to rate it.

31.03.2016 / 18:59

1

You can create different conditions via GET.

Example: login.php? t = A

In form, get this A and put it in a hidden field, so the user does not have to fill in the select every time he logs in.

I believe it to be the simplest form. There are others, of course.

31.03.2016 / 15:56

1

I have this example with javascript session that opens a modal in which I use the fancybox library and < a Bootstrap :

just need to create the company image: /img/logo_empresa.png

Overlay div with class: .layer_overlay

The div where the exit button will appear: <div id="session_login"></div>

And put this script in HTML:

$(document).ready(function() {
  $('.layer_overlay').hide();
    if (!$.prototype.fancybox) {
        $('<script></script>', {
            type: 'text/javascript',
            src: 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js'
        }).appendTo('head');
        $('<link/>', {
            rel: 'stylesheet',
            type: 'text/css',
            href: 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css'
        }).appendTo('head');
    }

    var modalLogin = {

            pagina_atual:'index',
            pg_adm:'administrador',
            pg_user:'usuario',

            tiposLogin : {
                A:'Administrador',
                U:'Usuário'
            },

            viewModal : function() {

                var content = '<div id="hello" class="col-xs-12 col-md-12 col-sm-12 login-box">\
                         <img src="/img/logo_empresa.png" border="0" class="text-center responsive-image">\
                         <h1 class="page-heading">Selecione o tipo de acesso:</h1>\
                             <ul class="acessos">\
                               <li><a href="javascript:void(0);" id="A" data-adm="'+modalLogin.tiposLogin.A+'" class="session_select">Administrador</a></li>\
                               <li><a href="javascript:void(0);" id="U" data-adm="'+modalLogin.tiposLogin.U+'" class="session_select">Usuário</a></li>\
                             </ul>\
                      </div>';
                        $.fancybox.open([
                            {
                                type: 'inline',
                                autoScale: true,
                                minHeight: 30,
                                content: content,
                                closeBtn:false
                            }
                        ], {
                            padding: 0
                        });
                         $('.layer_overlay').show();
            },
            mySession : function() {
                return localStorage.getItem('login')
            },
            setSession : function(login) {
                if (login == null) {
                    localStorage.setItem('login', null);
                    localStorage.removeItem('login');
                    localStorage.clear();
                } else {
                    localStorage.setItem('login', login);
                    $('#session_login').html('<a href="javascript:void(0)" id="reset_session">Sair ('+localStorage.getItem('login')+')</a>')
                }
            },
            closeModal : function() {
                $('.fancybox-wrap').remove();
                $('.layer_overlay').fadeOut('slow');
            }
        }


    $(document).on('click','#reset_session', function() {
        $('#session_login').html('');
        modalLogin.setSession(null);
        window.location.reload();
    });

    if (localStorage.getItem('login') == 'null' || localStorage.getItem('login') == null || localStorage.getItem('login') == undefined || !localStorage.getItem('login')) {
            if (!!$.prototype.fancybox) {
                modalLogin.viewModal();
                $(document).on('click','.session_select', function() {
                    var login = $(this).data('login');
                      modalLogin.setSession(login);
                    if (login == modalLogin.tiposLogin.A) {
                        window.location.href=modalLogin.pg_adm;
                    } else if (login == modalLogin.tiposLogin.U) {
                        window.location.href=modalLogin.pg_user;
                    } else {
                        modalLogin.closeModal();
                    }
                });
            }
        } else {
            $('#session_login').html('<a href="javascript:void(0)" id="reset_session">Sair (Olá '+localStorage.getItem('adm')+'!)</a>')
        }
});

31.03.2016 / 21:30

"Syntax error: missing 'semicolon'" in MySQL procedure Is there any way to configure Laravel 4 to use namespaces?

score 0 · Accepted Answer

What I was able to do was solving my problem, even if it was not in the best way, because the 2 buttons were below the login, but that's fine.

function addElement(parentTag, elementTag, html) {
    // Adds an element to the document
    var p = document.getElementsByTagName(parentTag)[0];
    var newElement = document.createElement(elementTag);
    newElement.innerHTML = html;
    p.appendChild(newElement);
};

function removeQuery(query) {
    // Removes an element from the document
    var element = document.querySelector(query);
    element.parentNode.removeChild(element);
}

function addButton(elementName,value) {

  
    var html = '<button style="top: 0;" type="button" value="'+value+'" /> '+elementName+'</button>';
    addElement('body', 'div', html);
}

removeQuery('select');
addButton('Administrador','A');
addButton('Usuário','U');

<select>
 <option value="A">Administrador</option>
 <option value="U">Usuário</option>
</select>
    
<br><br>
<!-- Login -->

<input name="login" type="submit" value="LOGIN"><br><br>