JQuery button each click, show/hide forms

Question

Guess I'm just starting out here, so might as well look for any kind of help since I'm quite frustrated with this novice question...

I have a button that shows a form I created, with 1 click, but the problem comes when I want to show another form that comes with another button.

What I want, basically is that buttonA shows formA, but when I click buttonB, I want to hide formA and show formB. Now what's happening is that it's overlaying formA and formB.

Here's my current code..

function runEffect() {
  $( "#effect" ).show( "drop");
};

function runEffect2() {
  $( "#effect2" ).show( "drop");
};


//callback function to bring a hidden box back
function hideEffect() {
    $( "#effect:visible" ).hide( "drop");

};

// set effect from select menu value

$( "#button" ).each(function(index) {
  $(this).click(function(){
  runEffect();
    });
});

$( "#button2" ).each(function(index) {
  $(this).click(function(){
  runEffect2();
    });
});

$( "#effect" ).hide();
$( "#effect2" ).hide();

I know this is easy, but I can't seem to find the answer to it.

Thanks!

Anujith · Accepted Answer · 2013-02-04 08:06:59Z

1

try this

function runEffect() {
  $( "#effect" ).show( "drop");
  $( "#effect2" ).hide( "drop");
};

function runEffect2() {
 $( "#effect2" ).show( "drop");
 $( "#effect" ).hide( "drop");
};

edited Feb 4, 2013 at 8:06

Anujith

9,3686 gold badges36 silver badges48 bronze badges

answered Feb 4, 2013 at 8:03

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user1801879 · Accepted Answer · 2013-02-04 08:04:23Z

0

$('#buttonB').click(funciton()(
$('#formA').hide();
$('#formB').show();
});

something like this?

answered Feb 4, 2013 at 8:04

user1801879

8222 gold badges9 silver badges22 bronze badges

Comments

Benz · Accepted Answer · 2013-02-04 08:19:00Z

0

I haven't tested it, but maybe you want to a more dynamic function. Button class must be something like "formButton" and the id like "form1Button", the form id then should be "form1" and so on..

(Form 2 would have a button with class "formButton", id like "form2Button" and form 2 needs id "form2"

$(".formButton").click(function(e) {
    e.preventDefault(); //prevent default action

    var id = $(this).attr('id');
    var formId = id.replace('Button', '');

    $('#' + formId).show(); 
    $('form').not(document.getElementById(formId)).hide();

});

When a formButton is clicked, the form will be shown. All other forms, wich do not have the requested ID, will be hidden.

answered Feb 4, 2013 at 8:19

Benz

2,33513 silver badges19 bronze badges

Collectives™ on Stack Overflow

JQuery button each click, show/hide forms

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related