Dynamically change input id with value - input type=range

Question

I'm making a phone gap query mobile iOS app for course evaluation at my uni. This app primary function will be a form that in it's original form uses radio buttons where each value also has a corresponding id - eg

<input name="q10" id="1" value="1" type="radio" />
<input name="q10" id="2" value="2" type="radio" />
<input name="q10" id="3" value="3" type="radio" />
<input name="q10" id="4" value="4" type="radio" />
<input name="q10" id="5" value="5" type="radio" />
<input name="q10" id="6" value="6" type="radio" />

But radio buttions aren't that intuitive on iOS devices so I'm using input type range instead. This works great for changing the value between 1 and 6 but the problem is that one only specifies one id for the whole input, not one id per value.

<input type="range" name="q10" id="q10" value="0" min="0" max="6"  />

Is there a way to change the id with the value? I think this should be doable through JavaScript but I lack the know-how. I also cannot change the way the database is set up (requiring both id and value) as this database belongs to the university's IT-department.

Answer 1

You can use the change event

<input type="range" onchange="this.id=this.value" name="q10" id="q10" value="0" min="0" max="6" />

Working example here - http://jsfiddle.net/aVHm8/

Note: I always feel uneasy about changing the ID of a DOM element .. perhaps you should investigate better options to resolve your issue

Answer 2

The database can't know what the id is unless you use JavaScript to send it to the server (standard form submission sends the name and the value ). In which case find the bit of JS that pulls out the ID and just send the value twice instead.