将<a href=…>onclick</a>转换<a href=…>为按钮</a>

Question

I'm following along with a jquery tutorial that gets initialized with a standard href text link. I have everything working. As the final step, I want to remove the text link and replace it with a button using its click event. Here is my code as it exists right now:

//this is the line that I want to replace with a button    
<a href="#login-box" class="login-window">Log In</a> 

// notice how that previous line somehow invokes this next section.
// this is the part that I don't understand how to do with a button
<div id="login-box" class="login-popup"> 
    <a href="#" class="close">
        <img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" />
    </a>

    <form method="post" class="signin" action="#">
        <fieldset class='textbox'>
            <label class="username">
                <span>Username:</span>
                <input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
            </label>
            <label class="password">
                <span>Password</span>
                <input id="password" name="password" value="" type="password" placeholder="Password">
            </label>

            <button class="submit button" type="button">Sign in</button>
            <p><a class="forgot" href="#">Forgot your password?</a></p>        
        </fieldset>    
    </form>
</div>

So, I set up a very simple button, but I have no idea what to put in the onclick event handler. If this were a simple URL link, no problem. I would just write a jquery function (or even just a js function). But in the context of this code, I have no idea how to invoke it.

<div id='login'>
    <button id='login-form' onclick="???"></button>
</div>

I'm a little out of my depth with this one. Can someone point me in the right direction? Thanks!

EDIT: There seems to be some confusion with what I am trying to accomplish, so let me explain. In the existing code, the href on the first line somehow invokes the code contained in the div with the id="login-box" on the next line. I want to achieve the same effect, just with a button instead of a text-based href. Unfortunately, I have never seen code written this way. It works correctly with the href, but I would prefer a button for aesthetic purposes.

I tried this, but there is no response, other than from the console:

$('#login-form').on('click',function(){
    console.log("here");
    location.href='#login-box';
});

Let me be clear: I know how to write a button that takes a user to a new web page. This is not taking a user to a new web page. It's a callback to the same html code invoking a different section of it. That's why it is confusing.

Answer 1

If you want to open a link on button click then try,

<button id='login-form'>Button</button>

Code would be,

$('#login-form').on('click',function(){
    location.href='your url goes here';
});

And if you want it to open in a new target then try,

$('#login-form').on('click',function(){
    window.open('your url goes here', '_blank');
});

Live Demo

Answer 2

Try something like this in Jquery:

$('#login-form').on('click', function(event)) {
   event.preventDefault();
  $(this).parent().append("<button id="replace">Your code for replace this element</button>");
  $(this).remove();
}

If you want to atach an event for the new html element added, you can do this:

  $('#login-form').on('click', 'replace', function(event) {});

If this reponse is not ok, you can explain more what you really want to do (I want to remove the text link -> id of the text link, and add the button ...).

If you want to send the form, when you click on some element.

$('#somelement').on('click', function(event) {
    event.preventDefault();
    $("form").first().submit();
}):

Answer 3

I figured it out after finally finding this question

The way to do it is this:

$('#login-form').on('click',function(){
    $("#login-box").show();
});