Question

I have a select field which also updates a text field when chosen with the price of that selected option. Any Ideas on why this wont work?

Html:

<label for="material1" class="select">Material:</label>
<select name="material" id="material1" data-native-menu="false" rel="price1">
<option>Select Material</option>
<option value="55 Bolt" rel="125,000.00">55 Bolt</option>
</select>
<label for="net1">Net Price:</label>
<input type="text" name="net" id="net1" rel="price1" value=""  />

JS:

<script type="text/javascript">
$("material1").change(function () {
   $(this).next("input[rel="+$(this).attr("rel")+"]").val($(this).val());
   $('#net1').textinput('refresh');

}).change();
</script>

Answer 1

Your main problem is here, and mgoeppner has some good suggestions too.

$(this).next("input[rel="+$(this).attr("rel")+"]").val($(this).val());

$(this).val() refers to the value of select which is null. You have to refer to the value of the selected option. Then next() won’t work because the input is not next to the select, there’s a label in between. You can use closest()

var value = $(this).find('option:selected').val();
$(this).closest("input[rel="+$(this).attr("rel")+"]").val(value);