Change css of selected inputs when form submitted

JavaScript
1

Hi everyone,

could someone please help me with this form?

Next to each checkbox or radio button is a word such as banana or eggplant. I’d like to apply a CSS style to those words once the form has been submitted. Only those that have been selected must be styled.

Trying various things without success:

<script type="text/javascript">
$(function() {
$("#foodform").submit(function() {
$("input").change(function() {
   if($(this).is(":checked")) {
   $(this).addClass("someclass");
    }
});
});	
});
</script>

<form id="foodform" action="" method="post">

<input type="checkbox" class="fruits" name="fruits[]" value="banana">banana
<input type="checkbox" class="fruits" name="fruits[]" value="kiwi">kiwi
<input type="checkbox" class="fruits" name="fruits[]" value="strawberry">strawberry

<input type="radio" class="veg" name="veg[]" value="squash">squash
<input type="radio" class="veg" name="veg[]" value="eggplant">eggplant
<input type="radio" class="veg" name="veg[]" value="kale">kale

<input type="submit" name="send" id="send" value="submit">
</form>

Thank you for any assistance!

2

Hi RedBishop,

You can do it like this:

$("#foodform").submit(function(e) {
    e.preventDefault();
    $(":checked").addClass("someClass");
});

HTH

3

Hi Pullo,

thanks a lot for helping me. How are you keeping?

$(function() {
$("#foodform").submit(function(e) {
    e.preventDefault();
    $(":checked").addClass("someClass");
});
});

I tried the above code but nothing happens when I press ‘submit’ - I can’t submit the form.

Do you know what I’m doing wrong?

Thank you!

4

Hi RedBishop,

All good here :slight_smile:

Yeah, the e.preventDefault(); prevents the form’s default submit action from taking place (I though you would be using ajax).

If you are submitting the form in the normal way and a page refresh is taking place, then it would be easier to use PHP to add the class to the respective elements on the page that the form submits to.

<input type="checkbox" class="fruits <?php if($_POST['fruits'] == 'banana' ){ echo 'some class' } ?>" name="fruits[]" value="banana">banana

Or something like that.

5

Hi Pullo,

All good here

Great to hear!

I tried it with PHP but for some reason it wasn’t working. I’m using a foreach loop to create the form inputs dynamically and the IF condition was most likely wrong. The CSS styled all of the inputs instead of only the selected ones. Using the fruits array as an example, do you know how I can write the IF condition?

Thanks a lot.

6

Hi,

You can do it like this:

<?php
  function checkFruits($fruit){
    if(in_array($fruit, $_POST['fruits'])){
      return "someClass";
    }
  }

  function checkVeg($veg){
    if(in_array($veg, $_POST['veg'])){
      return "someOtherClass";
    }
  }
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Fruit and veg</title>  
    <style>
    .someClass{
      /* Add styling here m*/
    }
    </style>
  </head>
  <body>
    <form id="foodform" action="" method="post"> 
      <input type="checkbox" class="fruits <?php echo checkFruits('banana') ?>" name="fruits[]" value="banana">banana 
      <input type="checkbox" class="fruits <?php echo checkFruits('kiwi') ?>" name="fruits[]" value="kiwi">kiwi 
      <input type="checkbox" class="fruits <?php echo checkFruits('strawberry') ?>" name="fruits[]" value="strawberry">strawberry 
           
      <input type="radio" class="veg <?php echo checkVeg('squash') ?>" name="veg[]" value="squash">squash 
      <input type="radio" class="veg <?php echo checkVeg('eggplant') ?>" name="veg[]" value="eggplant">eggplant 
      <input type="radio" class="veg <?php echo checkVeg('kale') ?>" name="veg[]" value="kale">kale    
           
      <input type="submit" name="send" id="send" value="submit"> 
    </form> 
  </body>
</html>

I’m sure that checkFruits() and checkVeg() can be combined into one function, but I just wanted to illustrate the idea.

7

Hey Pullo,

thank you very much for the example. :slight_smile: I will try it out later and get back to you.

Thanks!

8

Hey Pullo,

so I tried the code but I ended up using my own version because I couldn’t get it to work with my dynamically-generated inputs. I think I was getting some undefined function errors. But thanks a lot for the example, I’m still trying to wrap my head around functions in general.

Hope you have a great day.