How to populate one form data into another form on same page before submit is clicked using ajax or js?

I am new to ajax 开发者_运维技巧and javascript. I want to populate a entry form data into another form on the same page before it is submitted.

That means i want to display the name,gender etc of registration form in another form on the same page before it is submitted with click button event.

Please anybody post some examples.

(In response to your comment on the question above...)

Ah, that example is significantly more complex than previously implied. The target in that example isn't a form, it's an image. Do you have functionality in your server-side code already for generating the image?

Posting the AJAX to the server is very much the easy part in this case. Using jQuery for example, you can do something like this:

$.ajax({
  type: 'POST',
  url: 'somepage.php',
  data: data,
  success: function() {
    alert('success!');
  },
  dataType: 'json'
});

The variable 'data' would be built from your form elements. Possibly something like this:

var data = '';
data = data + 'somevalue=' + $('#formElement').val();
data = data + 'anothervalue=' + $('#aDifferentElement').val();
// etc.

What the code essentially does is submit an HTTP POST to the supplied URL with the supplied data, and then run the supplied "success" function upon a successful result. You can also add an "error" function for an error result.

In your case, the result looks like it's an image. So you'd end up setting the src attribute on an img tag to the resulting image. Something like this:

$('#imageElement').attr('src', someString);

I'm not sure exactly how they're doing it in that example, but you can certainly look through the code and step through it in Firebug to see what you can find. The response appears to be the actual image, not a link to the image. But you can design yours either way.