how to toggle input value on button click

Question

I have a button and an input field. When I click the button, I want the input field to be populated with some text. And when click the button again, I want the populated text to disappear or become Null.

When I checked online, I could only find links to toggle classes from elements in the list.

How do I achieve this with jQuery?

This is my code so far. I am able to populate the input field with the required value. But I am not able to remove the value when I click the button again.

<button type="button" class="btn btn-outline-primary" id="test-button" data-toggle="button" aria pressed="false" autocomplete="off">
    Click Me
</button>
<input type="text" name="test-input" id="test-input" value="">


<script type="text/javascript">
  $('#test-button').click(function()
    {
      $('#test-input').val("Value Populated");
    }
  )
</script>

Kiran Shinde · Accepted Answer · 2020-06-11 06:46:19Z

2

Like this?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-outline-primary" id="test-button" data-toggle="button" aria pressed="false" autocomplete="off">
    Click Me
</button>
<input type="text" name="test-input" id="test-input" value="">


<script type="text/javascript">
  $('#test-button').click(function()
    {
      const $testInput = $('#test-input');
      if (!$('#test-input').val().length) {
        $('#test-input').val("Value Populated");
      } else {
        $('#test-input').val("");
      }
      
    }
  )
</script>

answered Jun 11, 2020 at 6:46

Kiran Shinde

6,0326 gold badges30 silver badges45 bronze badges

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

1 Comment

AlwaysConfused Over a year ago

Posted the same time. :)

XYZ · Accepted Answer · 2020-06-11 06:49:31Z

You can check if the value exists and remove the value if it exists. Try it like this

  $('#test-button').click(function()
    { 
    if($('#test-input').val() != "Value Populated"){
     $('#test-input').val("Value Populated");
    }else{
    $('#test-input').val("");
    }
     
      
    }
  )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-outline-primary" id="test-button" data-toggle="button" aria pressed="false" autocomplete="off">
    Click Me
</button>
<input type="text" name="test-input" id="test-input" value="">

Another option is set a data attribute to the input when the value is set.This will help you to reset even if the input is changed

 $('#test-button').click(function()
    {
      let valueSet =  $('#test-input').attr('data-set');
      if(valueSet  ==1){
        $('#test-input').attr('data-set','0').val("");
      }else{
        $('#test-input').attr('data-set','1').val("Value Populated");
      }
      
    }
  )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-outline-primary" id="test-button" data-toggle="button" aria pressed="false" autocomplete="off">
    Click Me
</button>
<input type="text" name="test-input" id="test-input" value="">

djcaesar9114 · Accepted Answer · 2020-06-11 06:45:14Z

0

Just check if you have something as value:

$(document).ready(function() {
  $('#test-button').on('click',function() {
    if ($('#test-input').val()) {
      $('#test-input').val("")
    } else {
      $('#test-input').val("Value Populated")
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-outline-primary" id="test-button" data-toggle="button" aria pressed="false" autocomplete="off">
    Click Me
</button>
<input type="text" name="test-input" id="test-input" value="">

answered Jun 11, 2020 at 6:45

djcaesar9114

2,1472 gold badges30 silver badges51 bronze badges

Comments

AlwaysConfused · Accepted Answer · 2020-06-11 06:48:40Z

0

You can check if there is a value in your input "test-input", if not add text otherwise remove text -

<script type="text/javascript">
 $('#test-button').click(function()
  {
     if ($('#test-input').val == '' || $('#test-input').val == null) {
       $('#test-input').val("Value Populated");
     } else {
       $('#test-input').val("");
     }
  }
)
</script>enter code here

answered Jun 11, 2020 at 6:48

AlwaysConfused

4784 silver badges13 bronze badges

Collectives™ on Stack Overflow

how to toggle input value on button click

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related