Inserting php variables using javascript

[leest]

Hi,

I am using javascript to collect hidden form elements and then send the values to a php page, without reloading or changing the page. Basically i have a list of job vacancies, with just an apply button, when a person clicks on the apply button, the form collects some information from their account and sends it using the javascript code.

Now this works fine, except for if somebody then clicks on the second job it sends the information from the first form again. And it seems to remember the information.

What i am trying to find out is it possible to have multiple forms on one page which once submitted send variables to javascript which then send them to a php but clear themselves so that it doesn't remember the previous values.

Here is the code for the form:

<form id="submit" method="post">
                            <fieldset>
                       <input type="hidden" name="usern" id="usern" value="php variable" />
                       <input type="hidden" name="joborder_id"  id ="joborder_id" value="php variable" />
                       <input type="hidden" name="site_id"  id ="site_id" value="php variable" />
                       <button class="button positive">Apply For This Job </button>
                       </fieldset>
                       </form>
                       <div class="success" style="display: none;">Your Application has been sent.</div>
                              &nbsp;
                            </form>

And the Javascript code is here:

$(document).ready(function(){
	$("form#submit").submit(function() {
	// we want to store the values from the form input box, then send via ajax below
	var usern     = $('#usern').attr('value');
	var joborder_id    = $('#joborder_id').attr('value');
	var site_id    = $('#site_id').attr('value');
		$.ajax({
			type: "POST",
			url: "apply.php",
			data: "usern="+ usern +"& joborder_id="+ joborder_id +"& site_id="+ site_id,
			success: function(){
				$('form#submit').hide(function(){$('div.success').fadeIn();});

			}
		});
	return false;
	});
});

Any ideas or suggestions would be appreciated,

Thanks

Lee

[Old Pedant]

Just call the <form>'s reset() method, which acts the same as the user pushing a RESET button.

But if that doesn't work, then it's because your jQuery code can't figure out that it's only supposed to process a single <form>.

If all the forms (and form fields) have the same id, that makes tons of sense. It's illegal to use the same id more than once on a page.