Alter the button's color seamlessly while staying on the same page

Question

Alter the button's color seamlessly while staying on the same page

I have implemented a feature that allows me to change the category of photos without having to leave the page and it works perfectly.

My next goal is to create a button system where the pre-defined category of a photo is indicated by a button with a green background, while the other two categories have buttons with red backgrounds. When a user selects a different category, I want the corresponding button to turn green and the others to stay red. The green css class is c_on and the red css class is c_off.

How can I use JavaScript/ajax/jquery to set the right css class for each button?

I would appreciate any help. (Please note that the styles are correctly defined in my code, but I couldn't paste them here properly so I used a comment).

JS:

<script type="text/javascript">
$(function () {
$('form').on('submit', function (e) {
    $.ajax({
        type: 'post',
        url: "test_ajax_update_code.php",
        data: $(this).serialize(),
        });
    e.preventDefault();
    });
});
</script>

CSS:

.c_on {color: #000;background-color:#F00;}
.c_off {color: #000;background-color:#0F0;}

HTML:

<img src="myfoto1.jpg" width="500" height="333" border="0"><br>
            <form id="form1">
            <input name="num" type="hidden" value="1373" >
            <input name="shw" type="hidden" value="1" >
            <input type="submit" value="1" class="c_on">
            </form>
            &nbsp;&nbsp;&nbsp;
            <form id="form2">
            <input name="num" type="hidden" value="1373" >
            <input name="shw" type="hidden" value="2" >
            <input type="submit" value="2" class="c_off">
            </form>
            &nbsp;&nbsp;&nbsp;
            <form id="form3">
            <input name="num" type="hidden" value="1373" >
            <input name="shw" type="hidden" value="3" >
            <input type="submit" value="3" class="c_off">
            </form>
        <img src="myfoto2.jpg" width="500" height="333" border="0"><br>
            <form id="form1">
            <input name="num" type="hidden" value="1374" >
            <input name="shw" type="hidden" value="1" >
            <input type="submit" value="1" class="c_off">
            </form>
            &nbsp;&nbsp;&nbsp;
            <form id="form2">
            <input name="num" type="hidden" value="1374" >
            <input name="shw" type="hidden" value="2" >
            <input type="submit" value="2" class="c_on">
            </form>
            &nbsp;&nbsp;&nbsp;
            <form id="form3">
            <input name="num" type="hidden" value="1374" >
            <input name="shw" type="hidden" value="3" >
            <input type="submit" value="3" class="c_off">
            </form>

javascript jquery css forms

Answer 1

Answer №1

If you want to achieve this, you can follow these steps:

// Change all buttons to c_off state
$('input[type="submit"]').removeClass('c_on').addClass('c_off');

// Change the submitted button to c_on state
$(this).find('input[type="submit"]').removeClass('c_off').addClass('c_on');

With these changes, your code will appear like this:

$(function () {
    $('form').on('submit', function (e) {
        $.ajax({
            type: 'post',
            url: "test_ajax_update_code.php",
            data: $(this).serialize(),
        });

        // Change all buttons to c_off state
        $('input[type="submit"]').removeClass('c_on').addClass('c_off');

        // Change the submitted button to c_on state
        $(this).find('input[type="submit"]').removeClass('c_off').addClass('c_on');

        e.preventDefault();
    });
});

Answer 2

If you want to achieve this, you can follow these steps:

// Change all buttons to c_off state
$('input[type="submit"]').removeClass('c_on').addClass('c_off');

// Change the submitted button to c_on state
$(this).find('input[type="submit"]').removeClass('c_off').addClass('c_on');

With these changes, your code will appear like this:

$(function () {
    $('form').on('submit', function (e) {
        $.ajax({
            type: 'post',
            url: "test_ajax_update_code.php",
            data: $(this).serialize(),
        });

        // Change all buttons to c_off state
        $('input[type="submit"]').removeClass('c_on').addClass('c_off');

        // Change the submitted button to c_on state
        $(this).find('input[type="submit"]').removeClass('c_off').addClass('c_on');

        e.preventDefault();
    });
});

Answer 3

Answer №2

Understanding your point is a bit challenging, but by incorporating a couple of events and booleans, you should be able to accomplish something similar to this quite easily.

var flag_1 = false;

if (flag_1 === true) {
    //modify button styles
}

var element = getElement('div.image'); // just an example

element.addEventListener('click', function () {
    flag_1 = true;
}

And there wouldn't even be a need for ajax. For instance, you could submit when all flags are set to true.

Answer 4

Understanding your point is a bit challenging, but by incorporating a couple of events and booleans, you should be able to accomplish something similar to this quite easily.

var flag_1 = false;

if (flag_1 === true) {
    //modify button styles
}

var element = getElement('div.image'); // just an example

element.addEventListener('click', function () {
    flag_1 = true;
}

And there wouldn't even be a need for ajax. For instance, you could submit when all flags are set to true.

Answer 5

Answer №3

Hopefully this information proves to be beneficial

$('input:submit').on('click',function(){
   $('input:submit').removeClass('c_on').addClass('c_off');
   $(this).removeClass('c_off').addClass('c_on');
})

Answer 6

Hopefully this information proves to be beneficial

$('input:submit').on('click',function(){
   $('input:submit').removeClass('c_on').addClass('c_off');
   $(this).removeClass('c_off').addClass('c_on');
})

Answer 7

Answer №4

To implement functionality for toggling classes on buttons, you need to add a click event listener to each button. This event listener will remove the .c_on class from any button and apply it to the clicked button.

$('button').on('click', function () {
    $('.c_on').removeClass('c_on').addClass('c_off');
    $(this).removeClass('c_off').addClass('c_on');
});

Answer 8

To implement functionality for toggling classes on buttons, you need to add a click event listener to each button. This event listener will remove the .c_on class from any button and apply it to the clicked button.

$('button').on('click', function () {
    $('.c_on').removeClass('c_on').addClass('c_off');
    $(this).removeClass('c_off').addClass('c_on');
});

Answer 9

Answer №5

Give this approach a try and inspect the CSS for the appropriate color for the class.

UPDATE:

The id attribute must be unique. Therefore, I have updated the id of the forms to be represented by a class instead.
Additionally, I have included a new data-image property to distinguish between the different sets of buttons.

Revised Code snippets:

$(function() {
  $('form').on('click', 'input[type="submit"]', function(e) {
    $.ajax({
      type: 'post',
      url: "test_ajax_update_code.php",
      data: $(this).parent().serialize(),
    });
    var clicked = $(this),
      imageName = clicked.data("image");
    clicked.removeClass("c_off").addClass("c_on");
    $('input[type="submit"]').each(function() {
      var self = $(this);
      if (!clicked.is(self)) {
        if (self.hasClass("c_on") && imageName == self.data("image"))
          self.removeClass("c_on").addClass("c_off");
      }
    });
    e.preventDefault();
  });
});

.c_off {
  color: #000;
  background-color: #F00;
}
.c_on {
  color: #000;
  background-color: #0F0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<img src="myfoto1.jpg" width="500" height="333" border="0">
<br>
<form class="form1">
  <input name="num" type="hidden" value="1373">
  <input name="shw" type="hidden" value="1">
  <input type="submit" value="1" class="c_on" data-image="img1">
</form>
&nbsp;&nbsp;&nbsp;
<form class="form2">
  <input name="num" type="hidden" value="1373">
  <input name="shw" type="hidden" value="2">
  <input type="submit" value="2" class="c_off" data-image="img1">
</form>
&nbsp;&nbsp;&nbsp;
<form class="form3">
  <input name="num" type="hidden" value="1373">
  <input name="shw" type="hidden" value="3">
  <input type="submit" value="3" class="c_off" data-image="img1">
</form>
<img src="myfoto2.jpg" width="500" height="333" border="0">
<br>
<form class="form1">
  <input name="num" type="hidden" value="1374">
  <input name="shw" type="hidden" value="1">
  <input type="submit" value="1" class="c_off" data-image="img2">
</form>
&nbsp;&nbsp;&nbsp;
<form class="form2">
  <input name="num" type="hidden" value="1374">
  <input name="shw" type="hidden" value="2">
  <input type="submit" value="2" class="c_on" data-image="img2">
</form>
&nbsp;&nbsp;&nbsp;
<form class="form3">
  <input name="num" type="hidden" value="1374">
  <input name="shw" type="hidden" value="3">
  <input type="submit" value="3" class="c_off" data-image="img2">
</form>

Answer 10

Give this approach a try and inspect the CSS for the appropriate color for the class.

UPDATE:

The id attribute must be unique. Therefore, I have updated the id of the forms to be represented by a class instead.
Additionally, I have included a new data-image property to distinguish between the different sets of buttons.

Revised Code snippets:

$(function() {
  $('form').on('click', 'input[type="submit"]', function(e) {
    $.ajax({
      type: 'post',
      url: "test_ajax_update_code.php",
      data: $(this).parent().serialize(),
    });
    var clicked = $(this),
      imageName = clicked.data("image");
    clicked.removeClass("c_off").addClass("c_on");
    $('input[type="submit"]').each(function() {
      var self = $(this);
      if (!clicked.is(self)) {
        if (self.hasClass("c_on") && imageName == self.data("image"))
          self.removeClass("c_on").addClass("c_off");
      }
    });
    e.preventDefault();
  });
});

.c_off {
  color: #000;
  background-color: #F00;
}
.c_on {
  color: #000;
  background-color: #0F0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<img src="myfoto1.jpg" width="500" height="333" border="0">
<br>
<form class="form1">
  <input name="num" type="hidden" value="1373">
  <input name="shw" type="hidden" value="1">
  <input type="submit" value="1" class="c_on" data-image="img1">
</form>
&nbsp;&nbsp;&nbsp;
<form class="form2">
  <input name="num" type="hidden" value="1373">
  <input name="shw" type="hidden" value="2">
  <input type="submit" value="2" class="c_off" data-image="img1">
</form>
&nbsp;&nbsp;&nbsp;
<form class="form3">
  <input name="num" type="hidden" value="1373">
  <input name="shw" type="hidden" value="3">
  <input type="submit" value="3" class="c_off" data-image="img1">
</form>
<img src="myfoto2.jpg" width="500" height="333" border="0">
<br>
<form class="form1">
  <input name="num" type="hidden" value="1374">
  <input name="shw" type="hidden" value="1">
  <input type="submit" value="1" class="c_off" data-image="img2">
</form>
&nbsp;&nbsp;&nbsp;
<form class="form2">
  <input name="num" type="hidden" value="1374">
  <input name="shw" type="hidden" value="2">
  <input type="submit" value="2" class="c_on" data-image="img2">
</form>
&nbsp;&nbsp;&nbsp;
<form class="form3">
  <input name="num" type="hidden" value="1374">
  <input name="shw" type="hidden" value="3">
  <input type="submit" value="3" class="c_off" data-image="img2">
</form>

Alter the button's color seamlessly while staying on the same page

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Post request sent from jQuery to Node.js using the POST method

Preventing CSS shapes from overlapping with the next DIV

Safari causing issues with AJAX requests when using HTTPS

The placement of text appears to be incorrect when applying the float:left property in CSS

Accessing the camera or photo library in React Native does not require any permissions

css center arrow-aligned underline text

Edit data with modal form in Angular-UI

Instantaneous data refresh using Firebase Cloud Functions

When I hover over my divs, my span is positioned behind them

JavaScript: A guide to solving systems of equations

Troubleshooting problem with jQuery UI accordion and sortable feature

jQuery experiences compatibility issues with IE7, IE8, and IE9 while functioning smoothly on other web browsers

Retrieving data from NodeJS ExpressJS variables

I'm curious about using NextJS to fetch an API with a specific router ID. Can anyone provide guidance on how to achieve this and then render the data as HTML?

What is the most effective method for retrieving Key-Value Pairs from a disorganized String?

Identifying whether a webpage has integrated Google Analytics

Ignoring the partial view's click action

Alter appearance using various classes

The Javascript Image() function fails to load or render

Ways to move upward from a lower position