Pre-populate text field in cloudpages form, if left at same value, use that

Question

I've set up a form in Marketing Cloud. It pre-populates the fields from a data extension with people's details, opening the form with

http://web.form.com/updatepref?PID=pidgoeshere

It populates three fields called Subject_1, Subject_2 and Subject_3 like this

SET @Subject1 = Lookup("tblSubjectLookup", "Subj_Name", "Subj_Code", @Subject1)
SET @Subject2 = Lookup("tblSubjectLookup", "Subj_Name", "Subj_Code", @Subject2)
SET @Subject3 = Lookup("tblSubjectLookup", "Subj_Name", "Subj_Code", @Subject3)

It allows people, among other things, to update their subject preferences. So if they've already chosen "Biology" as their Subject 1, it will populate the field (which has a picklist) with 'Biology', like this

<div class="form-item">
    <label for="Subject_1">* Subject of interest 1</label>
    <select id="Subject_1" name="Subject_1" required="" required>
        <option value="%%=v(@Subject1)=%%" disabled="" selected="">%%=v(@Subject1)=%%</option>
        <option value="Biology"   >Biology</option>
        <option value="Chemistry"   >Chemistry</option>
        <option value="Physics"   >Physics</option>
    </select>

So when the form opens they see the subjects they have chosen.

If they want to change these subjects, they can choose another. The form goes to a handler which runs an UpdateDE query and updates it with their new choices. Works great!

The only problem is if they've opened this form to change some other details, but want to leave Subjects as is - if they don't touch it, the UpdateDE query recognizes their 'choice' on these form fields as a blank value, and overwrites their existing subject preferences with a blank value.

Is there any way to get around this? Or to actually choose from the picklist which value they have, rather than creating an extra option value from the variable containing their preference?

Answer 1

If you're already using jQuery on your page, then you can write client-side JavaScript with AMPScript to set the value of the drop-down once the page has loaded:

 <script>
  $(document).ready(function() {

    %%[ if not empty(@Subject1) then ]%%
          $("#Subject_1").val("%%=v(@Subject1)=%%");
    %%[ endif ]%%

  }
</script>