CODEWITHSUNDEEP
jquery
sledgeweight
sledgeweight

Reputation: 8095

Combining 2 events on one element click Jquery

Currently I have a function that works by clicking one button to add a set of fields and one to remove them all for a form in adding attendees.

I'm having difficulties in adding the 3 lines in the white block that increments the number of attendees the same time the click is called and a set of fields is added to fill out.

I've tried creating a callback after 

 next.slideDown('slow'); to next.slideDown('slow', function(){ ... });

but to no success.

How would i combine these to events to one click?

http://jsfiddle.net/h76KR/1/

$(document).ready(function () {
    $('#div2, #div3, #div4').hide();
    $('#add').click(function () {
        var curr = $(".question:visible");
        var next = curr.next(".question");
        next.slideDown('slow');

var theTotal = 0;

theTotal = Number(theTotal) + Number($(this).val());

$('.noOfAttendees').text(Total number of attendees from your firm: "+theTotal");

    });
    $('#remove').click(function () {
        var prev = $(".question:visible");
        var remove = prev.next(".question");
        remove.slideUp();
    });
});

Upvotes: 1

Views: 253

Answers (2)

sledgeweight
sledgeweight

Reputation: 8095

Ok so I've found that I didn't need to combine it into a function, I've created the following below that works and resets it back to 1 on clicking the remove button. If anyone knows of a more efficient way of doing this please let me know, it's always good to improve ones logic and method.

http://jsfiddle.net/nYHNk/1/

$(document).ready(function (){
$('#div2, #div3, #div4').hide();
$('#add').click(function(){
     //code
    var curr = $(".question:visible");
    var next = curr.next(".question");
    next.show();

});

$('#remove').click(function(){
    var prev = $(".question:visible");
    var remove = prev.next(".question");
    remove.hide();
});    
});

var oneAtt = 1;
var theTotal = 1;
$('#add').click(function(){
theTotal = Number(theTotal) + Number($(this).val());
$('.total').text("Total: "+theTotal);        
});

$('.total').text("Total: "+theTotal);        

$('#remove').click(function (){
    theTotal = oneAtt;
   $('.total').text("Total: "+oneAtt); 
});

Upvotes: 0

Spork
Spork

Reputation: 1651

Exactly what you request would be something like this: http://jsfiddle.net/h76KR/3/

With a

var numEmployees = 1;

that you just increment and decrease as necessary, and then using 

function updateEmployees(){
     $(".noOfAttendees").html("There are "+numEmployees+" Attendees");   
}

to update the box.

Incidentally it would probably be much nicer to keep an empty, hidden, div with your employee information that you clone. You can then have infinite of such clones, instead of just four. Taking your example, try doing this:

var employeeDiv = $("#div1").clone();
$("#div1").append(employeeDiv);

and work from there.

Upvotes: 1

Related Questions