2

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.

Improve this question
6
  • 1
    I'm not sure I understood your question. Commented Oct 3, 2011 at 16:29
  • Wouldn't it be easier to just edit the html? Commented Oct 3, 2011 at 16:30
  • 1
    Could you explain more generally what you are trying to accomplish? The way you are going about this seems to be very convoluted and out of the ordinary. Commented Oct 3, 2011 at 16:30
  • The form sends the user to a page with a new comment box if javascript is not available. If javascript is available this button replaces the form and, when the button is clicked, a javascript function will insert the comment box. Is this ridiculous? I'm teaching myself, so it very well could be. Commented Oct 3, 2011 at 16:37
  • 2
    @Hank It would be best to put a .submit() event handler on the form, and cancel the default event (preventDefault()). This way, without JS, the form will be posted, but if there is JS, the submit will be cancelled and you can do your magic. Commented Oct 3, 2011 at 16:39

4 Answers 4

Reset to default
2

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);
    });
});
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

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

Improve this answer

5 Comments

+1 huh, i've used jQuery for years and never noticed replaceWith. Learn something new every day...
That only replaces the submit button -- he said he wants to replace the entire form.
I understood that OP wants to replace the whole form, not just the input.
@mblase75 Replacing the whole form with a button would not make sense at all. So I guessed this is what he wants. Waiting for the OP's clarification.
@mblase75 If you know the reason, most of the time you can offer a better solution. And if he really wants to replace the whole form, he can do so using my method anyways (with a few small changes).
1

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));
    });
});
Improve this answer

Comments

0

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/

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.