replacing element with jQuery

I have <form>s on my page that I want to replace with <button>s. The thing that is causing me difficulty is that I want to use the value of the <form开发者_如何学JAVA>'s submit input as the html for the button.

<form action="/postcomment/" method="post">
<inputs>
.
. 
.
<input type="submit" value="Reply">
</form>

Becomes

<button class="postcomment">Reply</button>

I'm having a hard time wrapping my mind around the chaining here. I need to grab the data values (e.g. "Reply") and then insert them into the button elements in one jQuery operation (or else manage the ordering with something like .index()) and I haven't figure out how to do that yet.

Working example here: http://jsfiddle.net/Mch86/

$(document).ready(function(){
    $('form').each(function(){
        button = $('<button>' + $('input[type="submit"]', this).val() + '</button>').addClass($(this).attr('action').replace(/\//g, ''));
        $(this).replaceWith(button);
    });
});

Do something like this:

$('input[type="submit"]').replaceWith(function () {
    return $('<button>').text(this.value).addClass('postcomment');
});

jsFiddle Demo

This will replace all of your submit buttons (<input type="submit">) with a <button>, keeping the text on the button.

replaceWith() allows you to use a function as its parameter, which has a reference to the individual submits themselves (this).

Since you said you have multiple forms:

$(function() {
    $('form').each(function() {
        var str = $(this).find('input[type="submit"]').val();
        $(this).replaceWith($('<button/>').addClass("postcomment").text(str));
    });
});

You could do:

var label = $('form input:submit').val();
var action = $('form').attr('action').replace(/\//g, '');

var button = $('<button />', { class: action});
button.html(label);
$('form').replaceWith(button)

;

fiddle here: http://jsfiddle.net/be3af/1/