2010-09-16 17:13:38 +00:00
<!DOCTYPE html>
2010-11-02 01:46:29 +00:00
< html lang = 'en' > < head >
2011-02-18 20:00:18 +00:00
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, minimum-scale=1, maximum-scale=1" > < meta http-equiv = 'content-type' content = 'text/html; charset=UTF-8' / > < / head > < body >
2010-09-18 16:20:35 +00:00
< div data-role = "page" >
2010-09-21 14:58:54 +00:00
< div data-role = "header" >
2010-09-16 17:13:38 +00:00
< h1 > :submit Selector< / h1 >
< / div >
2010-10-12 19:50:28 +00:00
< div data-role = "content" data-theme = "c" id = "submit1" >
2010-09-16 17:13:38 +00:00
< h2 class = "jq-clearfix roundTop section-title" >
< span class = "name" > submit< / span > selector< / h2 >
< div class = " entry-details" >
< h4 class = "name" >
< span class = "versionAdded" > version added: < a href = "/version/1.0/" > 1.0< / a > < / span > jQuery(':submit')< / h4 >
< p class = "desc" > < strong > Description: < / strong > Selects all elements of type submit.< / p >
< div class = "longdesc" > < p > The < code > :submit< / code > selector typically applies to button or input elements. Note that some browsers treat < code > < button> < / code > element as < code > type="default"< / code > implicitly while others (such as Internet Explorer) do not. < / p > < / div >
< h3 > Example:< / h3 >
< div id = "entry-examples" class = "entry-examples" > < div id = "example-0" >
< h4 > < span class = "desc" > Finds all submit elements that are descendants of a td element.< / span > < / h4 >
< pre > < code class = "example demo-code" > < !DOCTYPE html>
< html>
< head>
< style>
textarea { height:45px; }
< /style>
< script src="http://code.jquery.com/jquery-latest.js"> < /script>
< /head>
< body>
< table>
< form>
< table id="exampleTable" border="1" cellpadding="10" align="center">
< tr>
< th>
Element Type
< /th>
< th>
Element
< /th>
< /tr
< tr>
< td>
< input type="button" value="Input Button"/>
< /td>
< /tr>
< tr>
< td>
< input type="checkbox" />
< /td>
< /tr>
< tr>
< td>
< input type="file" />
< /td>
< /tr>
< tr>
< td>
< input type="hidden" />
< /td>
< /tr>
< tr>
< td>
< input type="image" />
< /td>
< /tr>
< tr>
< td>
< input type="password" />
< /td>
< /tr>
< tr>
< td>
< input type="radio" />
< /td>
< /tr>
< tr>
< td>
< input type="reset" />
< /td>
< /tr>
< tr>
< td>
< input type="submit" />
< /td>
< /tr>
< tr>
< td>
< input type="text" />
< /td>
< /tr>
< tr>
< td>
< select> < option> Option< /option> < /select>
< /td>
< /tr>
< tr>
< td>
< textarea> < /textarea>
< /td>
< /tr>
< tr>
< td>
< button> Button< /button>
< /td>
< /tr>
< tr>
< td>
< button type="submit"> Button type="submit"< /button>
< /td>
< /tr>
< /table>
< /form>
< div id="result"> < /div>
< script>
var submitEl = $("td :submit")
.parent('td')
.css({background:"yellow", border:"3px red solid"})
.end();
$('#result').text('jQuery matched ' + submitEl.length + ' elements.');
// so it won't submit
$("form").submit(function () { return false; });
// Extra JS to make the HTML easier to edit (None of this is relevant to the ':submit' selector
$('#exampleTable').find('td').each(function(i, el) {
var inputEl = $(el).children(),
inputType = inputEl.attr('type') ? ' type="' + inputEl.attr('type') + '"' : '';
$(el).before('< td> ' + inputEl[0].nodeName + inputType + '< /td> ');
})
< /script>
< /body>
< /html> < / code > < / pre >
< h4 > Demo:< / h4 >
< div class = "demo code-demo" > < / div >
< / div > < / div >
< / div >
< / div >
< / div >
< / body > < / html >
