Question

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>‘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.

Answer 1

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);
    });
});