6

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.

Improve this question
3
  • 1
    What's the point of specifying a type="button" on a button? Commented Aug 19, 2010 at 20:44
  • 2
    @meder it makes sure that it doesn't act as a "submit" button 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 ... >') ?? Commented Aug 19, 2010 at 21:56

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.

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

8 Comments

I knew that but I was a little mystified at the claim that it works in Firefox.
@Pointy - I get the same error in Firefox here, perhaps he's using an older version of jquery with different logic?
Probably something like that.
Interesting - I never tried changing the type on an input before. I guess I know not to try it going forward. :) Thanks - nice insight.
@profoundjoy - Correct, I'm not sure how this would work in Firefox at all...your best bet it to just create the element using <button type="button"> initially :)
|
6

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

Improve this answer

Comments

0

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

Improve this answer

Comments

0

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?

Improve this answer

1 Comment

@D Hoerster: Thanks, but I'm not trying to prevent the form submission, I'm creating a form on the fly and appending to it two buttons, one for submit and another for other functionality. Everything works ok in Firefox, but in Chrome, both buttons submit, the one with the "type" attribute set to "submit" and the other one with the "type" attribute set to "button".
0

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.