Jquery button value toggle

Question

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>

I don't know if this is the solution, but you are using <input> and </button> on the submit input — Will
– Will, Commented Jul 11, 2017 at 14:25
@freedomn-m "button is clicked twice." what does that mean?? — Chandra Shekhar
– Chandra Shekhar, Commented Jul 11, 2017 at 14:28
People, it is just a typo on the #submit element. Open with input and close with button — Will
– Will, Commented Jul 11, 2017 at 14:30
@ChandraShekhar click the button - wait - click the button. It's clicked twice. It's a standard show/hide functionality where you want to show/hide an input when clicking on a button, but updating the button caption. — fdomn-m
– fdomn-m, Commented Jul 11, 2017 at 14:30

Michael Coker · Accepted Answer · 2017-07-11 14:28:49Z

2

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>

answered Jul 11, 2017 at 14:28

Michael Coker

53.8k5 gold badges69 silver badges66 bronze badges

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

4 Comments

Sukhpreet Singh Alang Over a year ago

Thanks! Michael.. Is it just jquery .. or some other framework...find it a bit different. Never saw this concept of using data default/alt. but it is interesting.

Michael Coker Over a year ago

@SukhpreetSinghAlang it isn't jquery or any framework. It's just simple HTML. developer.mozilla.org/en-US/docs/Learn/HTML/Howto/… You can access the data attributes that are in your HTML with CSS and Javascript (jquery is just a javascript library - isn't necessary, but makes it easier). This is definitely a better approach than hard coding your text in the javascript, like the answer you chose.

Sukhpreet Singh Alang Over a year ago

Thanks for the info on this. Its just that I tried that answer first. And I really did not knew about the data approach. But I understand now. It is cool. Thanks again!

Michael Coker Over a year ago

@SukhpreetSinghAlang cool you're welcome. Just in general, and I'm not encouraging you to change your answer or anything, but you should choose the answer that is the best solution to your problem. Not necessarily the first. Just whichever solves your problem best. And a second consideration would be which solution is objectively the best - meaning, when people find this post in the future, the "best" answer that would work for most people might be considered so that it's at the top when people find this looking for help with a problem similar to yours.

Nate Anderson · Accepted Answer · 2017-07-11 14:29:19Z

0

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>

answered Jul 11, 2017 at 14:29

Nate Anderson

6904 silver badges20 bronze badges

Comments

Bartolomeu S. Gusella · Accepted Answer · 2017-07-11 14:30:07Z

0

<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>

answered Jul 11, 2017 at 14:30

Bartolomeu S. Gusella

1397 bronze badges

Comments

Sebastien Napo · Accepted Answer · 2017-07-11 14:30:14Z

0

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");
          }
      });
  });

answered Jul 11, 2017 at 14:30

Sebastien Napo

6111 bronze badges

Comments

fdomn-m · Accepted Answer · 2017-07-11 14:40:57Z

0

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>

edited Jul 11, 2017 at 14:40

answered Jul 11, 2017 at 14:28

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

1 Comment

Sukhpreet Singh Alang Over a year ago

Lovely... Freedom.. Thanks for the solution

SoorajSethumadhavan · Accepted Answer · 2017-07-11 14:29:20Z

-1

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

answered Jul 11, 2017 at 14:29

SoorajSethumadhavan

1177 bronze badges

2 Comments

fdomn-m Over a year ago

As stated clearly in the question: "value of button changes. I want the value to restore back when the button is clicked twice."

fdomn-m Over a year ago

This is not an answer: You should ask a question in the comments for clarification.

Collectives™ on Stack Overflow

Jquery button value toggle

6 Answers 6

4 Comments

Comments

Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related