Geek Answers Handbook

Setting the input "type" attribute does not work with jQuery attr () method

I reviewed the previous questions, but they did not seem to answer what was happening to me.
In my real code, I create an on-the-fly form and add two buttons to it, one for submitting and another for another function. To do this, I set the "type" attribute for the "submit" buttons for one and "button" for the other. The problem is that in Chrome, both buttons represent a form.

Code for form:

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

Code for 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 simpler test with this HTML code:

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

When Chrome does not find the submit button, any button submits a form.

The following actions are not performed, the form is submitted when the button is clicked:

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

The following is performed: the form is not submitted when the button is clicked:

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

The form and button are generated dynamically, and I use jQuery, so attr () is the most obvious method. Is there something wrong with the jQuery core and the Chrome JS spec? It works fine in Firefox. Many thanks.

+6
javascript jquery dom
source share
5 answers

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

Why:
The reason type does not work, because it does not work in IE (you cannot chagne type input after adding to the DOM, and it is handled in the same way), so jQuery throws an error when trying . It does this specifically for <input> and <button> elements when it changes type .

If you look at the console, you will see the following:

Error: Unable to change uncaught property

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

+12
source share

Use prop instead of attr . This will work for sure.

See below for sample code:

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

Let me know your thoughts on this.

thanks

+6
source share

I'm not 100% sure what you are asking, but I think you are asking to prevent the form from being submitted with the click of a button in Chrome. If so, 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, use the direct JavaScript approach. But in this case, you apply the attributes to a button that does not make sense (or at least is invalid). Since you are already using jQuery, why not handle it properly and prevent the default action of clicking a button on a form?

0
source share

jQuery works fine for me in Chrome ... all the features that I chose today work fine, including .attr () ...

0
source share

So this post was useful to me, but my solution was to clone the corresponding button and replace it

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

More articles:


All Articles