CODEWITHSUNDEEP
jqueryhtmlcss
Sukhpreet Singh Alang
Sukhpreet Singh Alang

Reputation: 37

Jquery button value toggle

I am new to jquery. I was trying to toggle the input field when a button is clicked. I also changed the value on the button. Now when I click the input field hides and value of button changes. I want the value to restore back when the button is clicked twice.

Does that makes sense?

Here is the code:

$(document).ready(function() {

  $('#submit').click(function() {
    $('#hello').toggle();
    $('#submit').val("I don't love you");
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="hello" type="text">
<input type="text">
<input type="text">
<input id="submit" type="button" value="love you"></button>

Upvotes: 0

Views: 1457

Answers (6)

fdomn-m
fdomn-m

Reputation: 28621

You can use :visible to determine if the item is currently shown or not. As you're using toggle, you can do this immediately with: 

$("#hello").is(":visible") ? "text on visible" : "text on hidden"

Updated snippet:

$(document).ready(function() {

  $('#submit').click(function() {
    $('#hello').toggle();
    $('#submit').val($('#hello').is(":visible") ? "I love you again" : "I don't love you");
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="hello" type="text">
<input type="text">
<input type="text">
<input id="submit" type="button" value="love you"></button>

Upvotes: 0

Sebastien Napo
Sebastien Napo

Reputation: 61

Maybe you can try this : 

    $(document).ready(function() {
      $('#submit').click(function() {
          $('#hello').toggle();
          if($('this').val() === "I don't love you"){
              $('this').val('I love you')
          } else {
              $('this').val("I don't love you");
          }
      });
  });

Upvotes: 0

Bartolomeu S. Gusella
Bartolomeu S. Gusella

Reputation: 139

<script>
$(document).ready(function(){

    var clicked = false;
    var msg1 = "love you";
    var msg2 = "love you, but not".

    $('#submit').click(function(){
        clicked = !clicked;
        $('#submit').val(clicked ? msg1 : msg2);
    });

});

</script>

Upvotes: 0

SoorajSethumadhavan
SoorajSethumadhavan

Reputation: 117

Please refer the documentation for .toggle() http://api.jquery.com/toggle/

.toggle() is used for displaying or hiding the matched elements, which is what its doing here.. State the expected functionality in the question

Upvotes: -1

Nate Anderson
Nate Anderson

Reputation: 690

a quick check of the the value of the text in the button will do the trick.

$(document).ready(function(){

$('#submit').click(function(){
$('#hello').toggle();
    var submitButton = $('#submit');
    if(submitButton.val() === 'I dont love you'){
      submitButton.val('love you');
    } else {
      submitButton.val('I dont love you');
    }
});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="hello" type="text" >
<input type="text">
<input type="text">
<input id="submit" type="button" value="love you"></button>

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53709

You could set data attributes with the 2 values you want to display and check the current value against one of them and toggle based on whether it matches or not.

  <input id="hello" type="text">
  <input type="text">
  <input type="text">
  <input id="submit" type="button" data-default="love you" data-alt="i dont love you" value="love you"></button>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script>
    $(document).ready(function() {
      var $submit = $("#submit"),
          def = $submit.data('default'),
          alt = $submit.data('alt');
      $submit.on("click", function() {
        $("#hello").toggle();
        ($submit.val() == def) ? $submit.val(alt) : $submit.val(def); 
      });
    });
  </script>

Upvotes: 2

Related Questions