How to convert an input submit element to a button element using JavaScript?

Question

I am trying to convert an <input type="submit"> button to a <button> element along with all it's id, class, events, tabindex etc.

Any idea on a good approach? jQuery is also an option.

Note: I do not have access to the original <input type="submit"> html code.

@hitautodestruct If you do not have access to the original html you need to do everything manually or your explanation is a little bit unclear — Bernie
– Bernie, Commented Sep 29, 2013 at 14:13
Why? For preventing form submission? If yes, there are better ways for doing this. — Ram
– Ram, Commented Sep 29, 2013 at 14:13
@Bernhard The original html is generated using an external source. But I can manipulate the source using javascript. — hitautodestruct
– hitautodestruct, Commented Sep 29, 2013 at 15:06
@undefined I need to have a button element since I am using an icon font for the text and the value attribute can't take any entities. — hitautodestruct
– hitautodestruct, Commented Sep 29, 2013 at 15:09

Jakub Kotrs · Accepted Answer · 2013-09-29 14:15:43Z

2

var input = document.yourWayOfSelectingIt('maybeAnID');

input.outerHTML = input.outerHTML.replace(/^\<input/, '<button') + input.value + '</button>';

DEMO

answered Sep 29, 2013 at 14:15

Jakub Kotrs

6,2841 gold badge16 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

hitautodestruct Over a year ago

what about the rest of the attrbutes? id, tabindex, class, events?

Jakub Kotrs Over a year ago

It replaces <input by <submit using regexp, then adds value to the inside and a closing tag. It doesn't do anything with attributes, so they are all conserved. As for events, you should attach them after the replacement, if that can't be done then there is no solution for your problem that I know of - you would have to do that by manually attaching them back one by one.

Jakub Kotrs Over a year ago

In jQuery, you can get events using .data('events') but I hear there is a problem with scope. You could also .clone(true) to create new element, but that would put you back in square 1 as you would still need to change the tagName.

Swiss Mister Over a year ago

Thanks for the simplicity and library independence. works for me.

Swiss Mister Over a year ago

... but does not work in ie11 apparently. Any idea why?

Bernie · Accepted Answer · 2013-09-29 15:35:01Z

It's a working solution to fetch all attributes and replace the original element with the button element. For the attributes not required on new element a condition can be placed after "this.specified" condition.

    <form action="test.php" action="post">
        <input id="submit" type="submit"  />
    </form>


    <script>
        var oSubmitButton = $('input[type="submit"]');
        var oForm = oSubmitButton.closest('form');
        var sOriginAttrs = '';

        $.each(oSubmitButton[0].attributes, function() {
            if (this.specified) {
                sOriginAttrs += ' ' + this.name + '="' + this.value + '"';
            }
        });

        oSubmitButton.replaceWith($('<button ' + sOriginAttrs + '>').text('Submit').click(function(event) {
            event.preventDefault();

            //Maybe a form submit
            //oForm.submit();
        }));
    </script>

Created a Fiddle

Collectives™ on Stack Overflow

How to convert an input submit element to a button element using JavaScript?

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related