JSFiddle - React, Tailwind, and code Playground

by chayacooper

HTML

<br/>
<p>The user toggles between fields labeled class="textbox_toggle" (which display the values fetced from the database) and fields labeled class="input_field" (input fields where the user can enter/update their answers). The values shown in this code have been generated by the relevant php (for example <?php echo $row['style_ranking_1']; ?>)</p><br/>

<p>If the user has already ranked the styles they selected, then #style_row2 is displayed (choices ranked in order of preference). If they haven't ranked their style preferences yet #style_row1 is displayed, which shows them the styles they've chosen ("personal_styles") and asks them to rank them.</p><br/>  

<p>In this example, the user has previously chosen 3 values for "personal_styles": Chic, Casual, Classic, and ranked them in that order ("style_ranking_1" = Chic), and therefore #style_row2 should be displayed. If they hadn't ranked their "personal_styles" yet, then "style_ranking_1" would equal either Null or be empty and #style_row1 should be displayed.</p><br/>

<p>Where the php echo's <i>$row['style_ranking_1']</i> it displays <i>'Chic'</i>. In the HTML this is represented in 2 places: <i><span class="customer_data_field textbox_toggle">Chic</span></i> and <i>selected="selected" value="Chic"</i>. The user should therefore be shown row 2, but row 1 is displayed.</p><br/><br/>

<table cellpadding="0" cellspacing="0"> 
    
<tr id=style_row1 > 
    
    <td class="profile_label" >Your Personal Style: (Row 1) </td>
    
     <td class="account_fields" name="personal_styles">
        <span class="customer_data_field textbox_toggle">Casual, Chic, Classic</span> 
        <span class="input_field account_fields">
             <select name="personal_styles">          
             <option selected="selected" value="Casual, Chic, Classic">Casual, Chic, Classic</option>                             
             <option value="Bohemian" >Bohemian</option>
             <option value="Casual">Casual</option>         ...

CSS

#style_row1, #style_row2 {display:none;}

JavaScript

$(document).ready(function () {   
    
    $("#style_row1, #style_row2").hide();    
    if( $("[name=style_ranking_1]").val() === "Null" || $("[name=style_ranking_1]").val() === "")      
    {$("#style_row1").show();}     
    else {$("#style_row2").show()};
});