Dynamically Updated Form Fields

Programatically adjust the values of hidden inputs with JavaScript/jQuery.

by david_i_smith

HTML

<hgroup>
    <h1>Dynamically Updated Form Fields</h1>
    <h2>Programatically adjust the values of hidden inputs with JavaScript/jQuery.</h2>
</hgroup>
<form class="form">
	<select name="item_number" class="selection">
		<option value="TEST1000" data-price="15">1,000 &mdash; &dollar;15</option>
		<option value="TEST5000" data-price="20">5,000  &mdash; &dollar;20</option>
	</select>
	<input type="submit" value="BUY NOW" />
	<input type="hidden" name="item_name" value="">
	<input type="hidden" name="amount" value="">
</form>
<form class="form">
	<select name="item_number" class="selection">
		<option value="TEST1000" data-price="15">1,000 &mdash; &dollar;15</option>
		<option value="TEST5000" data-price="20">5,000  &mdash; &dollar;20</option>
	</select>
	<input type="submit" value="BUY NOW" />
	<input type="hidden" name="item_name" value="">
	<input type="hidden" name="amount" value="">
</form>
<form class="form">
	<select name="item_number" class="selection">
		<option value="TEST1000" data-price="15">1,000 &mdash; &dollar;15</option>
		<option value="TEST5000" data-price="20">5,000  &mdash; &dollar;20</option>
	</select>
	<input type="submit" value="BUY NOW" />
	<input type="hidden" name="item_name" value="">
	<input type="hidden" name="amount" value="">
</form>
<!-- for test purposes only -->
<div id="events">
    <h2>Events</h2>
</div>

CSS

form {
    margin-top:1em;
}

JavaScript

$(function () {
	$(".form").submit(function (event) {

	    event.preventDefault();

		var form = $(this),
			item_name = form.find('option:selected').attr('value'),
			amount = form.find('option:selected').data('price');

		form.find('input[name="item_name"]').attr('value', item_name);
		form.find('input[name="amount"]').attr('value', amount);

        // for test purposes only
        $('#events').append('<p>Form #: ' + (form.index()) + '<br>Item Name: ' + item_name + '<br>Amount: ' + amount + '</p>');
        
	});
});