Replace html class value based on value in a form

Using Django
1

Hi,

I have a form which i would like to apply badges to the fields based upon the answers provide.
So if the value provided is Yes, then the css class is changed to success or warning for this line

<span class="badge badge-soft-warning">Warning</span>


<div class="col-sm-6">
     <label class="form-label" for="project-tier-entry-level-label">Does the project land in our Tiered entry levels?</label>                   
       <span class="badge badge-soft-success" id="project-tier-entry-level-status">Success</span>
        <select class="form-control" name="choices-single-no-sorting" id="project-tier-entry-level">
                   <option>Yes/No</option>
                    <option>Yes</option>
                     <option>No</option>
         </select>
</div>

I dont know how to tell Python to look for a value in a different html element.

Thanks

Tom

2

Are you saying that you want to change the page when the value is provided (same page, not form submission - requires JavaScript) or are you asking for how to change something when the page is being rendered by the template engine before it’s being sent to the browser?

3

Hi Ken, Thanks for the reply.

I realise now that this would need JavaScript as i want to value to update once the field is updated. So if yes is selected it would go green, if no was select then it would be red.

Im looking at the JavaScript code now. Hopefully should be fairly easy.

Thanks

Tom

4

Hi Ken,

I know this is not a JavaScript forum, but you seem to know your stuff, so before i dart off to the JS forums, can you see what im doing wrong here:

function changeBadgeColour() {
    var p_status = document.getElementById("project-tier-entry-level"); 
    
    p_status_value = p_status.value.trim();
    
    if (p_status_value === "Yes") {
        document.getElementsByClassName('project-tier-entry-level-status')[0].innerHTML = "badge badge-soft-success";
    }
    else {
        document.getElementsByClassName("project-tier-entry-level-status")[0].innerHTML = "badge badge-soft-info";
    }

}

I assume i need to set a trigger on the dropdown list to execute this JS function to?

<span class="badge badge-soft-success" id="project-tier-entry-level-status" onchange="changeBadgeColour">Success</span>