Radio Buttons Not Staying True To Value

Radio Buttons Not Staying True To Value

I'm trying to input data into my database and none of the radio buttons
are sticking. No matter what I change them to they stay the same. They
initially go in just fine(The first of the selections by name).
<script type="text/javascript">
$(document).ready(function () {
$('#loadingstart').hide();
});
function walle() {
$('#loadingstart').show();
var product_id_array = $('#product_id_array').val();
var position = $('#position').val();
var URL = "./includes/user-course-settings.php"; /////post.php
will be equal the variable "comment"
$.post(URL,
{
walle: "post",
username1: username,
position1: position,
navpos1: navpos
},
function (data) {//parameter wall will be equal "post", name1
will be equal to the var "name" and comment1 will be equal to
the var "comment"
$("#startOver").prepend(data).show();// the result will be
placed above the the #result div
$('#loadingstart').hide();
});
}
</script>
I don't think there is anything specifically wrong with the MYSQLI as it
does go in initially no problem. The problem is no matter what I select,
the values retain the first choice automatically.
<div id="form">
<form>
<input type="hidden" id="product_id_array"
value="'.$product_id_array.'" />
<div class="separateFormInput">
<div class="radioFormQuestion">position</div>
<div class="leftyRadio">
<li>
<input type="radio" id="position" name="position"
value="left" checked="checked" />left</li>
<li>
<input type="radio" id="Radio1" name="position"
value="center">center</li>
<li>
<input type="radio" id="Radio2" name="position"
value="right">right</li>
</div>
<br />
<hr>
</div>
<div class="separateFormInput">
<div class="radioFormQuestion">Nav Position?</div>
<div class="leftyRadio">
<li>
<input type="radio" name="navpos" value="Left"
checked="checked" />Left</li>
<li>
<input type="radio" name="navpos"
value="Center">Center</li>
<li>
<input type="radio" name="navpos"
value="Right">Right</li>
</div>
<br />
<hr>
</div>
<!--submit form here-->
<div class="submit" id="textRight">
<input type="submit" name="button" id="button"
value="Submit" onclick="return false"
onmousedown="javascript:walle();" />
<img
src="https://www.mysite.com/images/loading.gif"
alt="" width="15" height="15" id="loadingstart"
/>
</div>
<div id="startOver" style="clear: both; font-weight: normal;
font-size: 12px;"></div>
</form>
</div>