How to change CSS styling with jQuery based on form submission?

Question

I am trying to change the CSS of a webpage based on form inputs using jQuery and regular JS. I am having a very difficult time with this and can't find the right solution. I was trying out the JavaScript and jQuery with the red radio button, but included all HTML for good measure. I have spent hours rewriting the code and am stuck. Please help.

HTML

    <!--Form that  user fills out to change css styling of the page-->
    <form id="cssStyling">

    
      <label for="fontChange">Choose a font:</label>
      
      <select id="fontChange" name="fontChange">
      
        <option value="Times">Times</option>
        
        <option value="Georgia">Georgia</option>
        
        <option value="Helvetica">Helvetica</option>
        
        <option value="Verdana">Verdana</option>
        
      </select>
      
      <br><br>
      
      
      <p>What color should the paragraph font be?</p>
      
        <!--red radio button-->
      
        <input type="radio" id="red" name="colorP" value='red' required>
                        
        <label for="red" > Red</label>
                        
                        
        <!--blue radio button-->
                        
        <input type="radio" id="blue" name="colorP" value="blue">
                        
        <label for="blue" > Blue</label>
                        
                        
        <!--green radio button-->
                        
        <input type="radio" id="green" name="colorP" value="green">
                        
        <label for="green"> Green</label>
      
      
        <br><br>
        
        <p>Which page elements should have borders?</p>
                            
        <!--Checkbox and label for h1-->
                    
        <input type="checkbox" id="heading1" name="elements">
                    
        <label for="heading1">h1 element</label>
                    
                    
        <!--Checkbox and label for h2-->
                    
        <input type="checkbox" id="heading2" name="elements" value="heading2">
                    
        <label for="heading2">h2 element</label>
                    
                    
        <!--Checkbox and label for p-->
                    
        <input type="checkbox" id="paragraphs" name="elements">
                    
        <label for="paragraphs">p element</label>
        
        <br><br>
                    



        <input type="submit" value="Click to submit styling changes" />
        
    </form>
    
    <!--End form-->

<h1>I am h1</h1>

<p>I am p</p>

<h2>I am h2</h2>

JavaScript

$(function() {
 $('#cssStyling').on('submit', function(evnt) {
  evnt.preventDefault();

    var n = $("select").val();
    // If the value is less than 7, add a red border
    if (n == "red") {
        $("p").css("color", "red");
    }
   });
 });

Answer 1

in regular js (so simple)
and with the help of css variables...

const gSection = document.querySelector('section#page')
  ,   myForm   = document.forms.cssStyling
  ,   xFont = 
        { Times    : "'Times New Roman', Times, serif"
        , Courier  : "'Courier New', Courier, monospace"
        , Helvetica: "Arial, Helvetica, sans-serif" 
        }
  ;
HTMLElement.prototype.setClass = function (cls, add)
  { 
  if (add ) this.classList.add(cls)
  else      this.classList.remove(cls)
  }
myForm.onsubmit = e =>
  {
  e.preventDefault()  // disable submit

  gSection.style.setProperty('--colorP',  myForm.colorP.value )
  gSection.style.setProperty('--fontx', xFont[myForm.fontChange.value] )

  gSection.setClass('doBorder_H1', myForm.heading1.checked )
  gSection.setClass('doBorder_H2', myForm.heading2.checked )
  gSection.setClass('doBorder_P', myForm.paragraphs.checked )
  }

section#page  {
  --fontx : Times;
  --colorP: black;
  }
section#page p {
  color : var(--colorP);
  }
section#page h1,
section#page h2,
section#page p {
  font-family: var(--fontx);
  }
.doBorder_H1 h1,
.doBorder_H2 h2,
.doBorder_P p  { border: 1px solid #27667a; }

<form name="cssStyling">
  <label>Choose a font:</label>
  <select name="fontChange">
    <option value="Times">Times</option>
    <option value="Courier">Courier</option>
    <option value="Helvetica">Helvetica</option>
  </select>
  <br><br>
  <p>What color should the paragraph font be?</p>
  <label> <input type="radio"  name="colorP" value='red'   required> Red   </label>
  <label> <input type="radio"  name="colorP" value='blue'  required> Blue  </label>
  <label> <input type="radio"  name="colorP" value='green' required> Green </label>
  <br><br>
  <p>Which page elements should have borders?</p>
  <label> <input type="checkbox" name="heading1"   > h1 element </label>
  <label> <input type="checkbox" name="heading2"   > h2 element </label>
  <label> <input type="checkbox" name="paragraphs" > p element  </label>
  <br><br>
  <button type="submit">Click to submit styling changes</button>
</form>

<section id="page" class="" >
  <h1>I am h1</h1>
  <p>I am p</p>
  <h2>I am h2</h2>
</section>

Answer 2

To check the values inside the radio buttons you can use:

$('input[name="<RADIO_BUTTON_NAME>"]:checked').val();

$(function() {
  $('#cssStyling').on('submit', function(event) {
    event.preventDefault();
    

    var n = $('input[name="colorP"]:checked').val();
    
    // If the value is less than 7, add a red border
    if (n == "red") {
      $("p").css("color", "red");
    }else if (n == "blue") {
      $("p").css("color", "blue");
    }if (n == "green") {
      $("p").css("color", "green");
    }
    
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Form that  user fills out to change css styling of the page-->
<form id="cssStyling">


  <label for="fontChange">Choose a font:</label>

  <select id="fontChange" name="fontChange">

    <option value="Times">Times</option>

    <option value="Georgia">Georgia</option>

    <option value="Helvetica">Helvetica</option>

    <option value="Verdana">Verdana</option>

  </select>

  <br><br>


  <p>What color should the paragraph font be?</p>

  <!--red radio button-->

  <input type="radio" id="red" name="colorP" value='red' required>

  <label for="red"> Red</label>


  <!--blue radio button-->

  <input type="radio" id="blue" name="colorP" value="blue">

  <label for="blue"> Blue</label>


  <!--green radio button-->

  <input type="radio" id="green" name="colorP" value="green">

  <label for="green"> Green</label>


  <br><br>

  <p>Which page elements should have borders?</p>

  <!--Checkbox and label for h1-->

  <input type="checkbox" id="heading1" name="elements">

  <label for="heading1">h1 element</label>


  <!--Checkbox and label for h2-->

  <input type="checkbox" id="heading2" name="elements" value="heading2">

  <label for="heading2">h2 element</label>


  <!--Checkbox and label for p-->

  <input type="checkbox" id="paragraphs" name="elements">

  <label for="paragraphs">p element</label>

  <br><br>




  <input type="submit" value="Click to submit styling changes" />

</form>

<!--End form-->

<h1>I am h1</h1>

<p>I am p</p>

<h2>I am h2</h2>

For more knowledge on how to get values from forms with Jquery : https://medium.com/@bruce.sarah.a/getting-form-values-with-jquery-7d456cb82080