I want to automatically populate a hidden form element with the value of what is entered in a single line text field in a form when submitted. How would this be done with jQuery? Thanks for any suggestions.
<form>
<input type="hidden" id="username" name="username" value="" />
<input type="text" id="email" name="email" value="[email protected]" />
<input type="submit" value="Submit" class="submit" />
</form>
This should do it:
$('form').submit(function() {
$('#username').val($('#email').val());
}
I believe most (if not all) browsers will have this fire before the data is packaged up and sent. Give it a try.
Also give the form an ID and change 'form' to '#THEID'
Reference for the submit event:
I've found this method to work well across browsers:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
function submitMyForm(){
$('#username').val($('#email').val());
$('#myform').submit();
}
</script>
<title>Test</title>
</head>
<body>
<form id="myform" action="http://www.example.com" method="post">
<input type="hidden" id="username" name="username" value="" />
<input type="text" id="email" name="email" value="[email protected]" />
</form>
<button class="submit" onclick="submitMyForm()">Submit</button>
</body>
</html>