CODEWITHSUNDEEP
jqueryforms
Sam Allen
Sam Allen

Reputation: 589

jQuery toggle value on button click

I'm trying to get a button to toggle a value of either 1 or 0 in a form field

<input type="text" name="website" id="websiteForm" value="0">   

<span class="btn btn-outline-primary" id="websiteBtn" onClick="websiteBtn()">Website</span>

<script>
function websiteBtn(){
    $('#websiteBtn').toggleClass('btn-outline-primary');
    $('#websiteBtn').toggleClass('btn-primary');
}
</script>

The default value in field is 0, but when the button is pressed i want it tpo give the field a value of 1. And if it is pressed again, give it a value of 0 again.

Upvotes: 0

Views: 92

Answers (5)

Elnaz
Elnaz

Reputation: 2890

You can just use the classes except for deciding based on text-Box value:

  1. Toggle classes on btn click.
  2. Since the classes are changed after document ready, use $(document).on('eventName', 'selector', function () {});
  3. Set the value of text box, based on the current class.

 $(function () {
    $('#websiteBtn').on('click', function () {
        $('#websiteBtn').toggleClass('btn-outline-primary');
        $('#websiteBtn').toggleClass('btn-primary');
    });

    $(document).on('click', '.btn-outline-primary', function () {
        $('#websiteForm').val(0);
    });

    $(document).on('click', '.btn-primary', function () {
        $('#websiteForm').val(1);
    });
});
   

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="website" id="websiteForm" value="0">   

<span class="btn btn-outline-primary" id="websiteBtn">Website</span>

Upvotes: 0

flx
flx

Reputation: 1578

The code you want to run would kinda look like this:

function websiteBtn(){
    $('#websiteBtn').toggleClass('btn-outline-primary');
    $('#websiteBtn').toggleClass('btn-primary');
}

var $websiteBtn = $("#websiteBtn");
var $website = $("#website");

$websiteBtn.on("click", function() {
    if ($website.val() == 0) {
        $website.val(1);
    } else {
        $website.val(0);
    }

});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="website" id="website" value="0">   

<span class="btn btn-outline-primary" id="websiteBtn" onClick="websiteBtn()">Website</span>

Upvotes: 0

Kannan K
Kannan K

Reputation: 4461

Try this:

<input type="text" name="website" id="websiteForm" value="0">   

<span class="btn btn-outline-primary" id="websiteBtn" 
onClick="websiteBtn()">Website</span>

<script>
  function websiteBtn(){
   if($('#websiteForm').val() == '0'){
     $('#websiteForm').val('1');
    } else if($('#websiteForm').val() == '1'){
     $('#websiteForm').val('0');
    }
  }
</script>

Upvotes: 1

Devesh
Devesh

Reputation: 4550

You can simply check the condition 

if ($("#websiteForm").val() == 0)
   $("#websiteForm").val('1');
else
   $("#websiteForm").val('0');

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

Firstly, you should use unobtrusive event handlers instead of the outdated and flawed on* event attributes.

To solve your actual issue you can retrieve the current value and update it using a ternary expression, like this:

$(function() {
  $('#websiteBtn').click(function() {
    $(this).toggleClass('btn-outline-primary btn-primary');
    $('#websiteForm').val(function(i, v) {
      return v == '0' ? '1' : '0';
    });
  });
});
.btn-outline-primary { color: #666; } 
.btn-primary { color: #C00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="website" id="websiteForm" value="0">
<span class="btn btn-outline-primary" id="websiteBtn">Website</span>

Upvotes: 2

Related Questions