The jQuery :submit selector selects all the elements with type=”submit” attribute. These are the attributes of the input and the button element. It works only with attribute value as submit and not with the value button.
If you want to select buttons with attribute type=”button”, you have to use the jQuery :button selector.
Syntax of jQuery :submit Selector
The syntax of jQuery :submit selector is given below.
If you have multiple numbers of forms and the button elements. You can use the selector with the class name and id. It’s helpful when want to select required form elements.
jQuery :submit Selector Selects Input Type Submit Element
If the button is created using the input element in the form. It should be of the attribute type="submit" to select with this selector. After selecting the element, you can highlight by applying CSS.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> $(document).ready(function(){ $( ":submit" ).css( "background", "yellow" ); }); </script> <form action="#"> <label>Name</label> <input type="text" name="name" placeholder="Enter your name..."><br><br> <label>Email</label> <input type="email" name="email" placeholder="Enter your email..."><br><br> <input type="submit" value="Submit"> </form> |
Output
The above example contains the form with the input type submit element. The selector applies the background yellow color to highlight the selected element. See the yellow-colored button showing the submit button element in a form.
Select Form Button Type Submit Element
In addition to the input type submit element, you can also select the button type submit element. The attribute of the element should be of type="submit". See the example below to select the button element.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> $(document).ready(function(){ $( ":submit" ).css( "background", "orange" ); }); </script> <form action="#"> <label>Your Subject</label> <input type="text" name="subject" placeholder="Enter your subject"><br><br> <label>Your Name</label> <input type="text" name="subject" placeholder="Enter your subject"><br><br> <button type="submit">Submit</button> </form> |
Output
The above example contains the orange button element in a form. The selector first selects the button element and then applies the color to it.
I hope you like the above examples of jQuery :submit selector. If you have any queries regarding the above selector, please comment below.
Also tell me, what other methods you are using with the selector by commenting below.
References