unbind the initial click function on another button click

Question

I have a form which is initially hidden. There is two steps of click flow to reach the form. I need to reset the initial click action when the form close button is clicked.

Adding the sample code and demo.

Here goes the flow

Click on the Join Now text
Then click on the text Click here to open the form text
Then click on the close icon
There comes the pop up

What I now need to know is,

By clicking on Yes , the form needs to be reset and the screen should look like how it looked initially (Brand name box with join now text) and the initial click action of join now should be refreshed.

By clicking on No, it should remain on the same form.

   $(".button").click(function(e){
        e.preventDefault();
        $(this).hide();
        $(".slidethis").fadeIn(800).css("display","inline-block");
        $(".wrapper").css("display","block");
    });

  $(".seconddiv").hide();
    //forstdiv click 
    $(".firstdiv").click(function(){        
        $(this).hide();
        $(".seconddiv").show();
    });

    //Close button 
    $(".close_icon").click(function(){      
        $(".popup").show();
    });

Demo Here

P.S: I don't want to refresh the page by closing the form.

user_4364303 · Answer

Adding this code should do it. It's about reversing your steps:

$("input[value=Yes]").click(function(){
    //reset - reverse all the steps
    $(".button").show();
    $(".slidethis").fadeOut(800).css("display","none");
    $(".wrapper").css("display","inline-block");
    $(".popup").hide();
    $(".seconddiv").hide();
    $(".firstdiv").show();
});


$("input[value=No]").click(function(){
   $(".popup").hide();

});

Updated fiddle: https://jsfiddle.net/5353ntuf/5/

user_4281779 · Answer

Working fiddle.

You should add an event click on the both buttons Yes and No, so give them a common class , e.g confirm class:

Then add a condition to check which action you're going to perform, like :

//Confirm buttons
$("body").on("click", ".confirm", function() {
  $(".popup").hide();

  if ($(this).val() == 'No') 
  {
    $('form input').val(""); //Reset form
  } else {
    $(".seconddiv,.slidethis").hide();
    $(".firstdiv,.button").show();
    $(".wrapper").css("display", "inline-block");
  }
});

Hope this helps.

//slide open the main panel
$(".button").click(function(e) {
  e.preventDefault();
  $(this).hide();
  $(".slidethis").fadeIn(800).css("display", "inline-block");
  $(".wrapper").css("display", "block");
});

$(".seconddiv").hide();
//forstdiv click 
$(".firstdiv").click(function() {
  $(this).hide();
  $(".seconddiv").show();
});

//Close button 
$(".close_icon").click(function() {
  $(".popup").show();
});

//Confirm buttons
$("body").on("click", ".confirm", function() {
  $(".popup").hide();

  if ($(this).val() == 'No') {
    $('form input').val("");
  } else {
    $(".seconddiv,.slidethis").hide();
    $(".firstdiv,.button").show();
    $(".wrapper").css("display", "inline-block");
  }
});

.wrapper {
  background: #9ac366;
  display: inline-block;
}

.headcard {
  display: inline-block;
  text-align: center;
  padding: 3% 30px;
  float: left;
}

.slidethis {
  background: #b67fd8;
  padding: 20px 0;
  width: 70%;
  vertical-align: top;
  position: relative;
  height: 228px;
  display: none;
  position: relative
}

.firstdiv,
.seconddiv {
  width: 200px;
  border: #888 solid 2px;
  padding: 20px;
}

.close_icon {
  background: #333;
  color: #fff;
  padding: 4px;
  float: right;
  margin-top: -20px;
  text-decoration: none
}

.popup {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: #e4e4e4;
  text-align: center;
  padding-top: 5%;
  display: none
}




  
    Brand Name
    Join Now 
  

  
  

    
      Click here to open the form
    

    
      
        X
        
        
      
      
      
        Closing will clear the form data. Do you want ot close?

unbind the initial click function on another button click

2 Answers