CODEWITHSUNDEEP
jqueryruby-on-railscss
marcamillion
marcamillion

Reputation: 33755

How do I let a button serve two different functions when it is clicked? - jQuery/CSS

You can see the implementation here: http://jsfiddle.net/Chandu/AdQfB/11/

If you click 'Register' the first time, you will see more fields.

What I want to happen is, when they click 'Submit' after they have clicked Register, it sends the info to the server.

The same would apply if they pressed 'Login' and filled out the username and password fields.

How do I achieve this?

I am using Rails on the back-end.

Thanks.

Upvotes: 0

Views: 117

Answers (3)

FatherStorm
FatherStorm

Reputation: 7183

add a class to the register button at the same time you are expanding the form. tie the submit action to that class. remove that class when removing the extra form elements, for the login, extend your "if($("#confirm_pw").is(":visible"))" with a else{ and implement your login submit there.

Upvotes: 0

Marcus Whybrow
Marcus Whybrow

Reputation: 19998

You could do this simply be checking what text the button contains:

$("input#register").click(function(e) {
    if (this.value == 'Register')
        // do one thing
    else if (this.value == 'Submit')
        // do another thing
});

Upvotes: 2

Nick Craver
Nick Craver

Reputation: 630389

Since it's a type="submit" button, you can use the default behavior and just remove your click handler, like this:

$("input#register").click(function(e) {
  $("input#f_name").slideDown().prepend("<br /><br />").css({"display": "block"});
  $("input#l_name").slideDown().css({"display": "block"});
  $("input#confirm_pw").slideDown().css({"display": "block"})
  $("input#register").val('Submit');
  $("input#login").css({ 'color' : '#567603' });
  e.preventDefault();
  $(this).unbind("click"); 
});

You can test it out here.

Upvotes: 2

Related Questions