CODEWITHSUNDEEP
javascripthtmlcss
user8991131
user8991131

Reputation:

Change text bold with button in form input

I'm having trouble changing the input in a form bold by clicking on the B link. It works if I change <input> to a <div>, but it won't work as an <input>. I have posted my code below. I am struggling to solve this issue. 

$('.bold_text').toggle(function() {
  $('#notes').css('font-weight', 'bold');
}, function() {
  $('#notes').css('font-weight', 'auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="bold_text">B</button>

<form action="" method="post">
  <input type="text" id="notes" name="notes" placeholder="Write your notes here...">
  <input class="save_button" type="submit" value="Save">
</form>

Upvotes: 0

Views: 77

Answers (1)

31piy
31piy

Reputation: 23859

You've misunderstood toggle(). You may want to create a class and toggle it using toggleClass() instead:

$('.bold_text').click(function() {
  $('#notes').toggleClass('bold');
});
.bold {
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="bold_text">B</button>

<form action="" method="post">
  <input type="text" id="notes" name="notes" placeholder="Write your notes here...">
  <input class="save_button" type="submit" value="Save">
</form>

Upvotes: 1

Related Questions