CODEWITHSUNDEEP
javascripthtmlnode.jsexpressejs
Shalom Mathew
Shalom Mathew

Reputation: 295

how to dynamically render the selected option of an input in ejs

i have a select input, the user selects an option and sends it to the database, in the browser i want the user to see the option they selected from the database

ejs

    <div class="form-group col-sm-6" style="width: 50%;">
        <label for=""> Defualt Font Weight</label>

        <select name="account_font_weight" class="form-control" id='ddlProperty' style="height: 48px; 
        font-size:1.3em;">
            <option disabled="" readonly="">Choose font weight </option>
            <option value="light">Light</option>
            <option value="normal">Normal</option>
            <option value="bold">Bold</option>
        </select>
    </div>

with 

<%=branding_font_weight %>

i can get the value of what the user selected previously, i want to know how to render it as his selected option when he refreshes the browser

Upvotes: 0

Views: 1015

Answers (2)

CodeLearner
CodeLearner

Reputation: 36

Use EJS Format like this

      <option value="light"  <%  if(branding_font_weight == "light"){ %>selected <% } 
       %> > light <option> 
      // USE THIS CODE FOR YOUR SOLUTION 

       <div class="form-group col-sm-6" style="width: 50%;">
       <label for=""> Defualt Font Weight</label>
       <select name="account_font_weight" class="form-control" id='ddlProperty' 
        style="height: 48px;font-size:1.3em;">
        <option disabled="" readonly="">Choose font weight </option>
        <option value="light"  <%  if(branding_font_weight == "light"){ 
        %>selected <% } %>  >Light</option>
        <option value="normal"  <%  if(branding_font_weight == "normal"){ 
        %>selected <% } %> >Normal</option>
        <option value="bold" <%  if(branding_font_weight == "bold"){ 
        %>selected <% } %> >Bold</option>
       </select>
       </div>

Upvotes: 2

Devolux
Devolux

Reputation: 164

I think you should use localStorage to store the selected option and get it back with the same functionality when you reload the browser.

Upvotes: 0

Related Questions