CODEWITHSUNDEEP
htmlformsselect
donchanger
donchanger

Reputation: 51

HTML Form Modifying Submitted Data

I have a form that is generated by server code. The resulting HTML creates a item with all choices disabled except one.

Sometimes the selected item is submitted fine; other times, by the same user, the text of the option seems altered.

<select name='var100a'>
<option  disabled ></option>
<option  disabled >AB</option>
<option  disabled >XY</option>
<option  SELECTED >CU</option>
<option  disabled >MN</option>
<option  disabled >EG</option>
<option  disabled >RO</option>
<option  disabled >SC</option>
<option  disabled >TS</option>
<option  disabled >CF</option>
<option  disabled >AK</option>
<option  disabled >NY</option>
<option  disabled >WF</option>
</select>

One user submitted related forms eight times in a 40 minute time span. Five of the times, the item was submitted incorrectly as UC and the other three times correctly as CU. I don't think there is anything important different on the eight forms, and overall we've collected thousands of these forms and haven't seen anything similar.

The user device was Chrome on Android 10.

I can't figure out what is causing this - any feedback would be very helpful.

Upvotes: 0

Views: 41

Answers (2)

donchanger
donchanger

Reputation: 51

Appreciate the feedback.

We think we have a cause, and solution, and are posting for future reference.

It seems that Chrome is trying to translate a Spanish page into Spanish. It doesn't change very much content since the page is already in Spanish - but it is translating dropdown entries.

We had to make two changes to the html - adding the generic translate='no' to the html tag and also added a Chrome-specific meta tag

<meta name="google" content="notranslate">

but these seem to have fixed our issue.

With more testing, it seems that translate does not touch read-only or hidden items, just dropdowns. Seems like a very bad, and very dangerous, thing to do.

Admittedly, we could also be explicit about the value tag on our options to separate the display from the submission but it did not occur to us to worry about this and certainly if I was building a translation tool I would translate only display text and not submitted text, which could (and did) break many things.

Short answer: prevent translation and/or be explict about dropdown values.

Upvotes: 0

mplungjan
mplungjan

Reputation: 178375

I do not know of anything that could invent stuff when you send it, however there are many good reasons to have a value on each option

option:disabled {
  color: gray;
}
<select name='var100a'>
  <option value="" disabled></option>
  <option value="AB" disabled>AB</option>
  <option value="XY" disabled>XY</option>
  <option value="CU" SELECTED>CU</option>
  <option value="MN" disabled>MN</option>
  <option value="EG" disabled>EG</option>
  <option value="RO" disabled>RO</option>
  <option value="SC" disabled>SC</option>
  <option value="TS" disabled>TS</option>
  <option value="CF" disabled>CF</option>
  <option value="AK" disabled>AK</option>
  <option value="NY" disabled>NY</option>
  <option value="WF" disabled>WF</option>
</select>

Perhaps using an optgroup is a better solution:

option:disabled {
  color: gray;
}
<select name="var100a">
  <option value="CU" selected>CU</option>
  <optgroup label="Unavailable">
    <option value="AB" disabled>AB</option>
    <option value="XY" disabled>XY</option>
    <option value="MN" disabled>MN</option>
  </optgroup>
</select>

But an even better solution is to not have a select at all if the user cannot change anything

.fake-select {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  color: #ccc;
  font-family: sans-serif;
  font-size: 16px;
  text-align: center;
  width: 100px;
}
<div class="fake-select">CU ▼</div>
<input type="hidden" name="var100a" value="CU" />

Upvotes: 0

Related Questions