Convert a Select with 2 option HTML to 2 Buttons

Asked

Viewed 344 times

2

Context:

Daily access a site several times during the day, of which before effectively entering, besides informing user and password, I have to select the type of access between the 2 existing, I find it bad to have to keep selecting and then click on 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 to 2 buttons, a Administrator, another User, and log in automatically.

I know it is possible to do this via browser extensions, like Tampermonkey/Greasemonkey, manipulating the elements via JS, but specifically this modification I do not know.

Someone could help me, or give me some idea?

Additional detail:
I do not have access to the source code, I mean, I can not modify, only manipulate via browser.

javascript html html-select event-handler
  • 1

    I’ll give you a hint, but it’s up to you: On the first login, you let him select how to enter, then add a cookie and every time he enters, he’ll log in with that selected option, and you’ll display on the screen something like: You’ll enter as "User" (click here to change)... Something like that, so if the guy wants to change the login type, he just clicks on that link, you display the dropdown and it changes the login type.

  • 1

    Why don’t you validate the level after login? Wouldn’t it be easier? Here I have a similar situation, I have 3 levels of access, I check the level and then load the page referring to the user level.

  • 1

    I added an essential detail to the question: I don’t have access to the source code, that is, I can’t modify, only manipulate via browser. Thank you Diego and Rafael.

4 answers

2

Well, I hope I can still help.

with jQuery:

<html>
    <head>
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script type="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, don’t forget to evaluate.

  • +1 I understood how you did, but I can not modify the HTML of the page, it would have to be only with manipulation of the DOM of the page :/ .. Thank you!

1

You can create different conditions via GET.

Example: login.php? t=A

In the form, take this A and place it on a Hidden field, this way, the user does not need to fill in the select every time he enters.

I believe it is the simplest way. There are others, of course.

  • 1

    So @Maykel, I added an essential detail to the question: I don’t have access to the source code, I mean, I can’t modify, just manipulate via browser. If I had, aaa if I had kkk vlw

1

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

  1. just need to create the image of the company: /img/logo_empresa.png
  2. div de overlay with class: .layer_overlay
  3. The div where the exit button will appear: <div id="session_login"></div>

And put this script into 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>')
        }
});

  • I’ll test it tomorrow, and I’ll talk, but I like the code!

  • +1So Ivan, I can’t add any tag or class inside the HTML, I’d have to change the DOM :/ anyway Thank you.

0


What I was able to do was this, solving my problem, even if it is not in the best way, why the 2 buttons were below the login, but okay.

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>

Browser other questions tagged javascript html html-select event-handler

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