最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Setting the "type" attribute of an input does not work with jQuery attr() method - Stack Overflow

programmeradmin4浏览0评论

I looked into previous questions, but they didn't seem to answer what's happening to me.
In my real code i'm creating a form on the fly and adding to it two buttons, one for submission and another for other function. For this I'm setting the "type" attribute of the buttons to "submit" for one and "button" for the other. The problem is that in Chrome both buttons submit the form.

Code for the form:

form = $(document.createElement('form')).attr('method', 'get').attr('action', defaults.action).appendTo(object);

Code for the buttons:

form.append(
    $(document.createElement('div')).
        attr('class', classesHash.buttonsContainer).
        append(
            $(document.createElement('button')).
                attr('type', 'submit').
                addClass(classesHash.submitButton).
                attr('title', i18n('Filter')).
                attr('value', i18n('Filter')).
                append(i18n('Filter'))
        ).
        append(
            $(document.createElement('button')).
                attr('type', 'button').
                addClass(classesHash.addButton).
                attr('title', i18n('Add filter')).
                attr('value', i18n('Add filter')).
                append(i18n('Add filter')).
            click(addFilter)
        )
);

I made a more simple test with this HTML code:

<form action="" method="get"><button id="test">test</button></form>

When Chrome doesn't finds a submit button, any button submits the form.

The following doesn't works, the form gets submitted on button click:

$('#test').attr('type', 'button');

The following does works, the form does not submit on button click:

document.getElementById('test').setAttribute('type', 'button');

The form and the button are being generated dynamically and I'm using jQuery so attr() is the most obvious method. Is something wrong with the jQuery core and Chrome's JS specification? It works fine in Firefox. Thanks a lot.

I looked into previous questions, but they didn't seem to answer what's happening to me.
In my real code i'm creating a form on the fly and adding to it two buttons, one for submission and another for other function. For this I'm setting the "type" attribute of the buttons to "submit" for one and "button" for the other. The problem is that in Chrome both buttons submit the form.

Code for the form:

form = $(document.createElement('form')).attr('method', 'get').attr('action', defaults.action).appendTo(object);

Code for the buttons:

form.append(
    $(document.createElement('div')).
        attr('class', classesHash.buttonsContainer).
        append(
            $(document.createElement('button')).
                attr('type', 'submit').
                addClass(classesHash.submitButton).
                attr('title', i18n('Filter')).
                attr('value', i18n('Filter')).
                append(i18n('Filter'))
        ).
        append(
            $(document.createElement('button')).
                attr('type', 'button').
                addClass(classesHash.addButton).
                attr('title', i18n('Add filter')).
                attr('value', i18n('Add filter')).
                append(i18n('Add filter')).
            click(addFilter)
        )
);

I made a more simple test with this HTML code:

<form action="" method="get"><button id="test">test</button></form>

When Chrome doesn't finds a submit button, any button submits the form.

The following doesn't works, the form gets submitted on button click:

$('#test').attr('type', 'button');

The following does works, the form does not submit on button click:

document.getElementById('test').setAttribute('type', 'button');

The form and the button are being generated dynamically and I'm using jQuery so attr() is the most obvious method. Is something wrong with the jQuery core and Chrome's JS specification? It works fine in Firefox. Thanks a lot.

Share Improve this question edited Nov 5, 2010 at 4:36 Alejandro García Iglesias asked Aug 19, 2010 at 20:43 Alejandro García IglesiasAlejandro García Iglesias 16.4k11 gold badges52 silver badges65 bronze badges 3
  • 1 What's the point of specifying a type="button" on a button? – meder omuraliev Commented Aug 19, 2010 at 20:44
  • 2 @meder it makes sure that it doesn't act as a "submit" button – Pointy Commented Aug 19, 2010 at 20:49
  • I am just wondering why you are doing all of that code when you could simply do: $('form').append('<div class="classesHash buttonsContainer"><button type="submit" class="classesHash submitButton" title="'+i18n('Filter')+'" value="'+i18n('Filter')+'"><buttons ... >') ?? – Matt Evanoff Commented Aug 19, 2010 at 21:56
Add a comment  | 

5 Answers 5

Reset to default 12

First, the correct approach:
To do what you want in this case, go with the vanilla JavaScript solution, but test it in IE!


The why:
The reason type doesn't work is because it fails in IE (you can't chagne the type of an input after it's added to the DOM, and it's handled in this same way), so jQuery throws an error when you try. It does this specifically for <input> and <button> elements when changing the type attribute.

If you look in your console you'll see this:

Error: Uncaught type property can't be changed

Here's a quick test showing this, check the console to see the error jQuery throws.

Use prop instead of attr. It`ll work for sure.

Please look at the below sample code:

$("input[name='email']").focusin(function() {
           console.log("alert");
            $('#email').prop('type','number');
});

Let me know your thoughts on this.

Thanks

jQuery is working fine for me in Chrome ... all the functions I've thrown at it today are running just fine, including .attr()...

I'm not 100% sure what you're asking, but I think you're asking about preventing the submission of a form with a button click in Chrome. If that is the case, why not use preventDefault?

$("#test").click(function(e) {
  e.preventDefault();
  //more work here....
});

EDIT:
I agree with Nick that in order to do what you are trying to do, go with the straight JavaScript approach. But in that case, you're applying attributes to a button that don't make sense (or at least aren't valid). Since you're already using jQuery, why not handle it properly and prevent the default action of a button click in a form?

So this post was helpful to me, but my solution was to clone the button in question and replace it

$new = $(this).clone();
$new.attr('type','hidden');
$this_form.append($new);
$(this).remove();

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论