button-click-submits.html (6627B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Clicking a button should submit the form</title> 4 <link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/#attr-button-type-submit-state"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <body> 10 <script> 11 "use strict"; 12 13 async_test(t => { 14 15 const form = document.createElement("form"); 16 const button = document.createElement("button"); 17 form.appendChild(button); 18 document.body.appendChild(form); 19 20 form.addEventListener("submit", t.step_func_done(ev => { 21 ev.preventDefault(); 22 assert_equals(ev.target, form); 23 })); 24 25 button.click(); 26 27 }, "clicking a button with .click() should trigger a submit (form connected)"); 28 29 async_test(t => { 30 31 const form = document.createElement("form"); 32 const button = document.createElement("button"); 33 form.appendChild(button); 34 35 form.addEventListener("submit", t.step_func_done(ev => { 36 ev.preventDefault(); 37 assert_unreached("Form should not be submitted"); 38 })); 39 40 button.click(); 41 t.step_timeout(() => t.done(), 500); 42 43 }, "clicking a button with .click() should not trigger a submit (form disconnected)"); 44 45 async_test(t => { 46 47 const form = document.createElement("form"); 48 const button = document.createElement("button"); 49 form.appendChild(button); 50 document.body.appendChild(form); 51 52 form.addEventListener("submit", t.step_func_done(ev => { 53 ev.preventDefault(); 54 assert_equals(ev.target, form); 55 })); 56 57 const e = new MouseEvent("click"); 58 button.dispatchEvent(e); 59 60 }, "clicking a button by dispatching an event should trigger a submit (form connected)"); 61 62 async_test(t => { 63 64 const form = document.createElement("form"); 65 const button = document.createElement("button"); 66 form.appendChild(button); 67 68 form.addEventListener("submit", t.step_func_done(ev => { 69 ev.preventDefault(); 70 assert_unreached("Form should not be submitted"); 71 })); 72 73 const e = new MouseEvent("click"); 74 button.dispatchEvent(e); 75 t.step_timeout(() => t.done(), 500); 76 77 }, "clicking a button by dispatching an event should not trigger a submit (form disconnected)"); 78 79 async_test(t => { 80 81 const form = document.createElement("form"); 82 const button = document.createElement("button"); 83 form.appendChild(button); 84 85 form.addEventListener("submit", t.step_func_done(ev => { 86 ev.preventDefault(); 87 assert_unreached("Form should not be submitted"); 88 })); 89 90 button.addEventListener("click", t.step_func(ev => { 91 ev.preventDefault(); 92 t.step_timeout(() => t.done(), 500); 93 })); 94 button.click(); 95 96 }, "clicking a button that cancels the event should not trigger a submit"); 97 98 async_test(t => { 99 100 const form = document.createElement("form"); 101 const button = document.createElement("button"); 102 button.setAttribute("disabled", ""); 103 form.appendChild(button); 104 document.body.appendChild(form); 105 106 form.addEventListener("submit", t.step_func_done(ev => { 107 ev.preventDefault(); 108 assert_unreached("Form should not be submitted"); 109 })); 110 111 button.click(); 112 t.step_timeout(() => t.done(), 500); 113 114 }, "clicking a disabled button (via disabled attribute) should not trigger submit"); 115 116 async_test(t => { 117 118 const form = document.createElement("form"); 119 form.innerHTML = `<fieldset disabled><button>hello</button></fieldset>`; 120 const button = form.querySelector("button"); 121 document.body.appendChild(form); 122 123 form.addEventListener("submit", t.step_func_done(ev => { 124 ev.preventDefault(); 125 assert_unreached("Form should not be submitted"); 126 })); 127 128 button.click(); 129 t.step_timeout(() => t.done(), 500); 130 131 }, "clicking a disabled button (via ancestor fieldset) should not trigger submit"); 132 133 test(t => { 134 135 const form = document.createElement("form"); 136 form.innerHTML = `<fieldset disabled><legend><button>hello</button></legend></fieldset>`; 137 const button = form.querySelector("button"); 138 document.body.appendChild(form); 139 140 form.addEventListener("submit", t.step_func_done(ev => { 141 ev.preventDefault(); 142 assert_equals(ev.target, form); 143 })); 144 145 button.click(); 146 147 }, "clicking a button inside a disabled fieldset's legend *should* trigger submit"); 148 149 async_test(t => { 150 151 const form = document.createElement("form"); 152 const button = document.createElement("button"); 153 const span = document.createElement("span"); 154 button.appendChild(span); 155 form.appendChild(button); 156 document.body.appendChild(form); 157 158 form.addEventListener("submit", t.step_func_done(ev => { 159 ev.preventDefault(); 160 assert_equals(ev.target, form); 161 })); 162 163 span.click(); 164 165 }, "clicking the child of a button with .click() should trigger a submit"); 166 167 async_test(t => { 168 169 const form = document.createElement("form"); 170 const button = document.createElement("button"); 171 const span = document.createElement("span"); 172 button.appendChild(span); 173 form.appendChild(button); 174 document.body.appendChild(form); 175 176 form.addEventListener("submit", t.step_func_done(ev => { 177 ev.preventDefault(); 178 assert_equals(ev.target, form); 179 })); 180 181 const e = new MouseEvent("click", { bubbles: true }); 182 span.dispatchEvent(e); 183 184 }, "clicking the child of a button by dispatching a bubbling event should trigger a submit"); 185 186 async_test(t => { 187 188 const form = document.createElement("form"); 189 const button = document.createElement("button"); 190 const span = document.createElement("span"); 191 button.appendChild(span); 192 form.appendChild(button); 193 document.body.appendChild(form); 194 195 form.addEventListener("submit", t.step_func_done(ev => { 196 ev.preventDefault(); 197 assert_unreached("Form should not be submitted"); 198 })); 199 200 span.addEventListener("click", t.step_func(ev => { 201 t.step_timeout(() => t.done(), 500); 202 })); 203 204 const e = new MouseEvent("click", { bubbles: false }); 205 span.dispatchEvent(e); 206 207 }, "clicking the child of a button by dispatching a non-bubbling event should not trigger submit"); 208 209 async_test(t => { 210 211 const form = document.createElement("form"); 212 const button = document.createElement("button"); 213 button.disabled = true; 214 const span = document.createElement("span"); 215 button.appendChild(span); 216 form.appendChild(button); 217 document.body.appendChild(form); 218 219 form.addEventListener("submit", t.step_func_done(ev => { 220 ev.preventDefault(); 221 assert_unreached("Form should not be submitted"); 222 })); 223 224 span.addEventListener("click", t.step_func(ev => { 225 assert_true(true, "span was clicked"); 226 t.step_timeout(() => t.done(), 500); 227 })); 228 229 span.click(); 230 231 }, "clicking the child of a disabled button with .click() should not trigger submit"); 232 </script>