HTML Form crashes entire pageHow do you disable browser Autocomplete on web form field / input tag?What are valid values for the id attribute in HTML?Convert HTML + CSS to PDF with PHP?Where should I put <script> tags in HTML markup?Retrieve the position (X,Y) of an HTML elementHow do I modify the URL without reloading the page?HTML 5: Is it <br>, <br/>, or <br />?How can I refresh a page with jQuery?Redirect from an HTML pageWhy does HTML think “chucknorris” is a color?
Can someone clarify Hamming's notion of important problems in relation to modern academia?
How can a day be of 24 hours?
Avoiding the "not like other girls" trope?
ssTTsSTtRrriinInnnnNNNIiinngg
How badly should I try to prevent a user from XSSing themselves?
Different meanings of こわい
Sums of two squares in arithmetic progressions
Finitely generated matrix groups whose eigenvalues are all algebraic
how do we prove that a sum of two periods is still a period?
How to find if SQL server backup is encrypted with TDE without restoring the backup
What Exploit Are These User Agents Trying to Use?
How to enclose theorems and definition in rectangles?
How to show a landlord what we have in savings?
How to prevent "they're falling in love" trope
Why was Sir Cadogan fired?
Did 'Cinema Songs' exist during Hiranyakshipu's time?
Why do I get negative height?
What are the G forces leaving Earth orbit?
Why was the shrink from 8″ made only to 5.25″ and not smaller (4″ or less)
How can I deal with my CEO asking me to hire someone with a higher salary than me, a co-founder?
How could indestructible materials be used in power generation?
Implication of namely
Getting extremely large arrows with tikzcd
Partial fraction expansion confusion
HTML Form crashes entire page
How do you disable browser Autocomplete on web form field / input tag?What are valid values for the id attribute in HTML?Convert HTML + CSS to PDF with PHP?Where should I put <script> tags in HTML markup?Retrieve the position (X,Y) of an HTML elementHow do I modify the URL without reloading the page?HTML 5: Is it <br>, <br/>, or <br />?How can I refresh a page with jQuery?Redirect from an HTML pageWhy does HTML think “chucknorris” is a color?
0
I am trying to implement a form that accepts 5 inputs and sets each passed form as a cell in the table. This works if I fill in only four of my five elements, but if I fill in all the options it crashes. I want to add a row to the table only when all of the five elements of the form have been filled in by the user.
function aFunction()
var table = document.getElementById("myTable"),
row = table.insertRow(-1),
cell1 = row.insertCell(0),
cell2 = row.insertCell(1),
cell3 = row.insertCell(2),
cell4 = row.insertCell(3),
cell5 = row.insertCell(4),
elements = document.forms['myForm'].elements;
cell1.innerHTML = elements['pickup'].value;
cell2.innerHTML = elements['delivery'].value;
cell3.innerHTML = elements['price'].value;
cell4.innerHTML = elements['pickup-distance'].value;
cell5.innerHTML = elements['delivery-distance'].value;
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td,
th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
tr:nth-child(even)
background-color: #dddddd;
body
background-color: powderblue;
h1
color: red;
p
color: blue;
<table style="width:100%" id="myTable">
<tr>
<th>Pickup Address</th>
<th>Delivery Address</th>
<th>Price</th>
<th>Distance to Pickup</th>
<th>Delivery Distance</th>
</tr>
</table>
<form style="border:1px solid #ccc" id="myForm">
<div class="container">
<p>Please fill in this form to post a job for our drivers.</p>
<hr>
<label for="pickup-address"><b>Pickup Address</b></label>
<input type="text" placeholder="Enter Address" name="pickup" required>
<label for="delivery-address"><b>Delivery Address</b></label>
<input type="text" placeholder="Enter Address" name="delivery" required>
<label for="price"><b>Price</b></label>
<input type="text" placeholder="Enter Price" name="price" required>
<label for="distance-to-pickup"><b>Distance to Pickup</b></label>
<input type="text" placeholder="Enter distance" name="pickup-distance" required>
<label for="distance-to-delivery"><b>Distance to Delivery</b></label>
<input type="text" placeholder="Enter distance" name="delivery-distance" required>
<button onclick="aFunction()">Post</button>
</div>
</form>javascript html
edited Mar 21 at 20:41
Jack
7,29021835
asked Mar 21 at 20:36
PerplexityyPerplexityy
12810
|
show 1 more comment
0
I am trying to implement a form that accepts 5 inputs and sets each passed form as a cell in the table. This works if I fill in only four of my five elements, but if I fill in all the options it crashes. I want to add a row to the table only when all of the five elements of the form have been filled in by the user.
function aFunction()
var table = document.getElementById("myTable"),
row = table.insertRow(-1),
cell1 = row.insertCell(0),
cell2 = row.insertCell(1),
cell3 = row.insertCell(2),
cell4 = row.insertCell(3),
cell5 = row.insertCell(4),
elements = document.forms['myForm'].elements;
cell1.innerHTML = elements['pickup'].value;
cell2.innerHTML = elements['delivery'].value;
cell3.innerHTML = elements['price'].value;
cell4.innerHTML = elements['pickup-distance'].value;
cell5.innerHTML = elements['delivery-distance'].value;
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td,
th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
tr:nth-child(even)
background-color: #dddddd;
body
background-color: powderblue;
h1
color: red;
p
color: blue;
<table style="width:100%" id="myTable">
<tr>
<th>Pickup Address</th>
<th>Delivery Address</th>
<th>Price</th>
<th>Distance to Pickup</th>
<th>Delivery Distance</th>
</tr>
</table>
<form style="border:1px solid #ccc" id="myForm">
<div class="container">
<p>Please fill in this form to post a job for our drivers.</p>
<hr>
<label for="pickup-address"><b>Pickup Address</b></label>
<input type="text" placeholder="Enter Address" name="pickup" required>
<label for="delivery-address"><b>Delivery Address</b></label>
<input type="text" placeholder="Enter Address" name="delivery" required>
<label for="price"><b>Price</b></label>
<input type="text" placeholder="Enter Price" name="price" required>
<label for="distance-to-pickup"><b>Distance to Pickup</b></label>
<input type="text" placeholder="Enter distance" name="pickup-distance" required>
<label for="distance-to-delivery"><b>Distance to Delivery</b></label>
<input type="text" placeholder="Enter distance" name="delivery-distance" required>
<button onclick="aFunction()">Post</button>
</div>
</form>javascript html
edited Mar 21 at 20:41
Jack
7,29021835
asked Mar 21 at 20:36
PerplexityyPerplexityy
12810
1
Define the problem more clearly. What do you mean "crash"? Do you get an error? If so, what exactly is it? I can fill out all the field and submit here with no issues.
– Scott Marcus
Mar 21 at 20:44
When you say "crashes", do you mean there's an error? Or, that the page reloads? To prevent a reload, you would need to callevent.preventDefaultin youraFunction, which I don't see. OR, add anactionto your form to submit your data.
– Jack
Mar 21 at 20:45
@Jack I don't see him actually submitting a form so the problem isn't that the page reloads.
– Isaac Vidrine
Mar 21 at 20:53
1
@IsaacVidrine The default action of a<button>within a<form>issubmit.
– Tyler Roper
Mar 21 at 20:53
1
@IsaacVidrine W3schools isn't exactly the best resource (as I'd mentioned on that answer). Per the official W3C spec: The missing value default [fortype] is the Submit Button state. If the element has a form owner, the element must submit the form owner from the button element."
– Tyler Roper
Mar 22 at 15:06
|
show 1 more comment
0
0
0
I am trying to implement a form that accepts 5 inputs and sets each passed form as a cell in the table. This works if I fill in only four of my five elements, but if I fill in all the options it crashes. I want to add a row to the table only when all of the five elements of the form have been filled in by the user.
function aFunction()
var table = document.getElementById("myTable"),
row = table.insertRow(-1),
cell1 = row.insertCell(0),
cell2 = row.insertCell(1),
cell3 = row.insertCell(2),
cell4 = row.insertCell(3),
cell5 = row.insertCell(4),
elements = document.forms['myForm'].elements;
cell1.innerHTML = elements['pickup'].value;
cell2.innerHTML = elements['delivery'].value;
cell3.innerHTML = elements['price'].value;
cell4.innerHTML = elements['pickup-distance'].value;
cell5.innerHTML = elements['delivery-distance'].value;
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td,
th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
tr:nth-child(even)
background-color: #dddddd;
body
background-color: powderblue;
h1
color: red;
p
color: blue;
<table style="width:100%" id="myTable">
<tr>
<th>Pickup Address</th>
<th>Delivery Address</th>
<th>Price</th>
<th>Distance to Pickup</th>
<th>Delivery Distance</th>
</tr>
</table>
<form style="border:1px solid #ccc" id="myForm">
<div class="container">
<p>Please fill in this form to post a job for our drivers.</p>
<hr>
<label for="pickup-address"><b>Pickup Address</b></label>
<input type="text" placeholder="Enter Address" name="pickup" required>
<label for="delivery-address"><b>Delivery Address</b></label>
<input type="text" placeholder="Enter Address" name="delivery" required>
<label for="price"><b>Price</b></label>
<input type="text" placeholder="Enter Price" name="price" required>
<label for="distance-to-pickup"><b>Distance to Pickup</b></label>
<input type="text" placeholder="Enter distance" name="pickup-distance" required>
<label for="distance-to-delivery"><b>Distance to Delivery</b></label>
<input type="text" placeholder="Enter distance" name="delivery-distance" required>
<button onclick="aFunction()">Post</button>
</div>
</form>javascript html
edited Mar 21 at 20:41
Jack
7,29021835
asked Mar 21 at 20:36
PerplexityyPerplexityy
12810
I am trying to implement a form that accepts 5 inputs and sets each passed form as a cell in the table. This works if I fill in only four of my five elements, but if I fill in all the options it crashes. I want to add a row to the table only when all of the five elements of the form have been filled in by the user.
function aFunction()
var table = document.getElementById("myTable"),
row = table.insertRow(-1),
cell1 = row.insertCell(0),
cell2 = row.insertCell(1),
cell3 = row.insertCell(2),
cell4 = row.insertCell(3),
cell5 = row.insertCell(4),
elements = document.forms['myForm'].elements;
cell1.innerHTML = elements['pickup'].value;
cell2.innerHTML = elements['delivery'].value;
cell3.innerHTML = elements['price'].value;
cell4.innerHTML = elements['pickup-distance'].value;
cell5.innerHTML = elements['delivery-distance'].value;
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td,
th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
tr:nth-child(even)
background-color: #dddddd;
body
background-color: powderblue;
h1
color: red;
p
color: blue;
<table style="width:100%" id="myTable">
<tr>
<th>Pickup Address</th>
<th>Delivery Address</th>
<th>Price</th>
<th>Distance to Pickup</th>
<th>Delivery Distance</th>
</tr>
</table>
<form style="border:1px solid #ccc" id="myForm">
<div class="container">
<p>Please fill in this form to post a job for our drivers.</p>
<hr>
<label for="pickup-address"><b>Pickup Address</b></label>
<input type="text" placeholder="Enter Address" name="pickup" required>
<label for="delivery-address"><b>Delivery Address</b></label>
<input type="text" placeholder="Enter Address" name="delivery" required>
<label for="price"><b>Price</b></label>
<input type="text" placeholder="Enter Price" name="price" required>
<label for="distance-to-pickup"><b>Distance to Pickup</b></label>
<input type="text" placeholder="Enter distance" name="pickup-distance" required>
<label for="distance-to-delivery"><b>Distance to Delivery</b></label>
<input type="text" placeholder="Enter distance" name="delivery-distance" required>
<button onclick="aFunction()">Post</button>
</div>
</form>function aFunction()
var table = document.getElementById("myTable"),
row = table.insertRow(-1),
cell1 = row.insertCell(0),
cell2 = row.insertCell(1),
cell3 = row.insertCell(2),
cell4 = row.insertCell(3),
cell5 = row.insertCell(4),
elements = document.forms['myForm'].elements;
cell1.innerHTML = elements['pickup'].value;
cell2.innerHTML = elements['delivery'].value;
cell3.innerHTML = elements['price'].value;
cell4.innerHTML = elements['pickup-distance'].value;
cell5.innerHTML = elements['delivery-distance'].value;
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td,
th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
tr:nth-child(even)
background-color: #dddddd;
body
background-color: powderblue;
h1
color: red;
p
color: blue;
<table style="width:100%" id="myTable">
<tr>
<th>Pickup Address</th>
<th>Delivery Address</th>
<th>Price</th>
<th>Distance to Pickup</th>
<th>Delivery Distance</th>
</tr>
</table>
<form style="border:1px solid #ccc" id="myForm">
<div class="container">
<p>Please fill in this form to post a job for our drivers.</p>
<hr>
<label for="pickup-address"><b>Pickup Address</b></label>
<input type="text" placeholder="Enter Address" name="pickup" required>
<label for="delivery-address"><b>Delivery Address</b></label>
<input type="text" placeholder="Enter Address" name="delivery" required>
<label for="price"><b>Price</b></label>
<input type="text" placeholder="Enter Price" name="price" required>
<label for="distance-to-pickup"><b>Distance to Pickup</b></label>
<input type="text" placeholder="Enter distance" name="pickup-distance" required>
<label for="distance-to-delivery"><b>Distance to Delivery</b></label>
<input type="text" placeholder="Enter distance" name="delivery-distance" required>
<button onclick="aFunction()">Post</button>
</div>
</form>function aFunction()
var table = document.getElementById("myTable"),
row = table.insertRow(-1),
cell1 = row.insertCell(0),
cell2 = row.insertCell(1),
cell3 = row.insertCell(2),
cell4 = row.insertCell(3),
cell5 = row.insertCell(4),
elements = document.forms['myForm'].elements;
cell1.innerHTML = elements['pickup'].value;
cell2.innerHTML = elements['delivery'].value;
cell3.innerHTML = elements['price'].value;
cell4.innerHTML = elements['pickup-distance'].value;
cell5.innerHTML = elements['delivery-distance'].value;
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td,
th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
tr:nth-child(even)
background-color: #dddddd;
body
background-color: powderblue;
h1
color: red;
p
color: blue;
<table style="width:100%" id="myTable">
<tr>
<th>Pickup Address</th>
<th>Delivery Address</th>
<th>Price</th>
<th>Distance to Pickup</th>
<th>Delivery Distance</th>
</tr>
</table>
<form style="border:1px solid #ccc" id="myForm">
<div class="container">
<p>Please fill in this form to post a job for our drivers.</p>
<hr>
<label for="pickup-address"><b>Pickup Address</b></label>
<input type="text" placeholder="Enter Address" name="pickup" required>
<label for="delivery-address"><b>Delivery Address</b></label>
<input type="text" placeholder="Enter Address" name="delivery" required>
<label for="price"><b>Price</b></label>
<input type="text" placeholder="Enter Price" name="price" required>
<label for="distance-to-pickup"><b>Distance to Pickup</b></label>
<input type="text" placeholder="Enter distance" name="pickup-distance" required>
<label for="distance-to-delivery"><b>Distance to Delivery</b></label>
<input type="text" placeholder="Enter distance" name="delivery-distance" required>
<button onclick="aFunction()">Post</button>
</div>
</form>javascript html
javascript html
edited Mar 21 at 20:41
Jack
7,29021835
asked Mar 21 at 20:36
PerplexityyPerplexityy
12810
edited Mar 21 at 20:41
Jack
7,29021835
asked Mar 21 at 20:36
PerplexityyPerplexityy
12810
edited Mar 21 at 20:41
Jack
7,29021835
edited Mar 21 at 20:41
Jack
7,29021835
edited Mar 21 at 20:41
Jack
7,29021835
7,29021835
asked Mar 21 at 20:36
PerplexityyPerplexityy
12810
asked Mar 21 at 20:36
PerplexityyPerplexityy
12810
asked Mar 21 at 20:36
PerplexityyPerplexityy
12810
12810
1
Define the problem more clearly. What do you mean "crash"? Do you get an error? If so, what exactly is it? I can fill out all the field and submit here with no issues.
– Scott Marcus
Mar 21 at 20:44
When you say "crashes", do you mean there's an error? Or, that the page reloads? To prevent a reload, you would need to callevent.preventDefaultin youraFunction, which I don't see. OR, add anactionto your form to submit your data.
– Jack
Mar 21 at 20:45
@Jack I don't see him actually submitting a form so the problem isn't that the page reloads.
– Isaac Vidrine
Mar 21 at 20:53
1
@IsaacVidrine The default action of a<button>within a<form>issubmit.
– Tyler Roper
Mar 21 at 20:53
1
@IsaacVidrine W3schools isn't exactly the best resource (as I'd mentioned on that answer). Per the official W3C spec: The missing value default [fortype] is the Submit Button state. If the element has a form owner, the element must submit the form owner from the button element."
– Tyler Roper
Mar 22 at 15:06
|
show 1 more comment
1
Define the problem more clearly. What do you mean "crash"? Do you get an error? If so, what exactly is it? I can fill out all the field and submit here with no issues.
– Scott Marcus
Mar 21 at 20:44
When you say "crashes", do you mean there's an error? Or, that the page reloads? To prevent a reload, you would need to callevent.preventDefaultin youraFunction, which I don't see. OR, add anactionto your form to submit your data.
– Jack
Mar 21 at 20:45
@Jack I don't see him actually submitting a form so the problem isn't that the page reloads.
– Isaac Vidrine
Mar 21 at 20:53
1
@IsaacVidrine The default action of a<button>within a<form>issubmit.
– Tyler Roper
Mar 21 at 20:53
1
@IsaacVidrine W3schools isn't exactly the best resource (as I'd mentioned on that answer). Per the official W3C spec: The missing value default [fortype] is the Submit Button state. If the element has a form owner, the element must submit the form owner from the button element."
– Tyler Roper
Mar 22 at 15:06
1
1
Define the problem more clearly. What do you mean "crash"? Do you get an error? If so, what exactly is it? I can fill out all the field and submit here with no issues.
– Scott Marcus
Mar 21 at 20:44
Define the problem more clearly. What do you mean "crash"? Do you get an error? If so, what exactly is it? I can fill out all the field and submit here with no issues.
– Scott Marcus
Mar 21 at 20:44
When you say "crashes", do you mean there's an error? Or, that the page reloads? To prevent a reload, you would need to call
event.preventDefault in your aFunction, which I don't see. OR, add an action to your form to submit your data.– Jack
Mar 21 at 20:45
When you say "crashes", do you mean there's an error? Or, that the page reloads? To prevent a reload, you would need to call
event.preventDefault in your aFunction, which I don't see. OR, add an action to your form to submit your data.– Jack
Mar 21 at 20:45
@Jack I don't see him actually submitting a form so the problem isn't that the page reloads.
– Isaac Vidrine
Mar 21 at 20:53
@Jack I don't see him actually submitting a form so the problem isn't that the page reloads.
– Isaac Vidrine
Mar 21 at 20:53
1
1
@IsaacVidrine The default action of a
<button> within a <form> is submit.– Tyler Roper
Mar 21 at 20:53
@IsaacVidrine The default action of a
<button> within a <form> is submit.– Tyler Roper
Mar 21 at 20:53
1
1
@IsaacVidrine W3schools isn't exactly the best resource (as I'd mentioned on that answer). Per the official W3C spec: The missing value default [for
type] is the Submit Button state. If the element has a form owner, the element must submit the form owner from the button element."– Tyler Roper
Mar 22 at 15:06
@IsaacVidrine W3schools isn't exactly the best resource (as I'd mentioned on that answer). Per the official W3C spec: The missing value default [for
type] is the Submit Button state. If the element has a form owner, the element must submit the form owner from the button element."– Tyler Roper
Mar 22 at 15:06
|
show 1 more comment
2 Answers
2
active
oldest
votes
6
You should define the type of button, i.e.:
<button onclick="aFunction()" type="button">Post</button>to prevent the submitting of the form and reloading (doesn't really crash) the page.
W3Schools on buttons:
Always specify the type attribute for a element. Different browsers use different default types for the element.
answered Mar 21 at 20:53
ScamtexScamtex
1766
1
Nice answer! The only miniscule thing I might suggest going forward is that historically, W3Schools hasn't exactly been seen as the best development resource, and as such some people (warranted or not) dock some credibility from answers that cite it. May I suggest MDN as a much more welcome alternative :)
– Tyler Roper
Mar 21 at 21:08
@TylerRoper good point, will do in the future :)
– Scamtex
Mar 21 at 21:10
add a comment |
0
Try to use document.getElementsByTagName("input") instead of document.forms['myForm'].elements;
function aFunction()
var table = document.getElementById("myTable"),
row = table.insertRow(-1),
cell1 = row.insertCell(0),
cell2 = row.insertCell(1),
cell3 = row.insertCell(2),
cell4 = row.insertCell(3),
cell5 = row.insertCell(4),
elements = document.getElementsByTagName("input")//document.forms['myForm'].elements;
//console.log(elements)
cell1.innerHTML = elements[0].value;
cell2.innerHTML = elements[1].value;
cell3.innerHTML = elements[2].value;
cell4.innerHTML = elements[3].value;
cell5.innerHTML = elements[4].value;
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td,
th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
tr:nth-child(even)
background-color: #dddddd;
body
background-color: powderblue;
h1
color: red;
p
color: blue;
<table style="width:100%" id="myTable">
<tr>
<th>Pickup Address</th>
<th>Delivery Address</th>
<th>Price</th>
<th>Distance to Pickup</th>
<th>Delivery Distance</th>
</tr>
</table>
<div style="border:1px solid #ccc" id="myForm">
<div class="container">
<p>Please fill in this form to post a job for our drivers.</p>
<hr>
<label for="pickup-address"><b>Pickup Address</b></label>
<input type="text" placeholder="Enter Address" name="pickup" required>
<label for="delivery-address"><b>Delivery Address</b></label>
<input type="text" placeholder="Enter Address" name="delivery" required>
<label for="price"><b>Price</b></label>
<input type="text" placeholder="Enter Price" name="price" required>
<label for="distance-to-pickup"><b>Distance to Pickup</b></label>
<input type="text" placeholder="Enter distance" name="pickup-distance" required>
<label for="distance-to-delivery"><b>Distance to Delivery</b></label>
<input type="text" placeholder="Enter distance" name="delivery-distance" required>
<button onclick="aFunction()">Post</button>
</div>
</div>answered Mar 21 at 21:04
Lucas MatosLucas Matos
248112
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55288857%2fhtml-form-crashes-entire-page%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
6
You should define the type of button, i.e.:
<button onclick="aFunction()" type="button">Post</button>to prevent the submitting of the form and reloading (doesn't really crash) the page.
W3Schools on buttons:
Always specify the type attribute for a element. Different browsers use different default types for the element.
answered Mar 21 at 20:53
ScamtexScamtex
1766
1
Nice answer! The only miniscule thing I might suggest going forward is that historically, W3Schools hasn't exactly been seen as the best development resource, and as such some people (warranted or not) dock some credibility from answers that cite it. May I suggest MDN as a much more welcome alternative :)
– Tyler Roper
Mar 21 at 21:08
@TylerRoper good point, will do in the future :)
– Scamtex
Mar 21 at 21:10
add a comment |
6
You should define the type of button, i.e.:
<button onclick="aFunction()" type="button">Post</button>to prevent the submitting of the form and reloading (doesn't really crash) the page.
W3Schools on buttons:
Always specify the type attribute for a element. Different browsers use different default types for the element.
answered Mar 21 at 20:53
ScamtexScamtex
1766
1
Nice answer! The only miniscule thing I might suggest going forward is that historically, W3Schools hasn't exactly been seen as the best development resource, and as such some people (warranted or not) dock some credibility from answers that cite it. May I suggest MDN as a much more welcome alternative :)
– Tyler Roper
Mar 21 at 21:08
@TylerRoper good point, will do in the future :)
– Scamtex
Mar 21 at 21:10
add a comment |
6
6
6
You should define the type of button, i.e.:
<button onclick="aFunction()" type="button">Post</button>to prevent the submitting of the form and reloading (doesn't really crash) the page.
W3Schools on buttons:
Always specify the type attribute for a element. Different browsers use different default types for the element.
answered Mar 21 at 20:53
ScamtexScamtex
1766
You should define the type of button, i.e.:
<button onclick="aFunction()" type="button">Post</button>to prevent the submitting of the form and reloading (doesn't really crash) the page.
W3Schools on buttons:
Always specify the type attribute for a element. Different browsers use different default types for the element.
<button onclick="aFunction()" type="button">Post</button><button onclick="aFunction()" type="button">Post</button>answered Mar 21 at 20:53
ScamtexScamtex
1766
answered Mar 21 at 20:53
ScamtexScamtex
1766
answered Mar 21 at 20:53
ScamtexScamtex
1766
answered Mar 21 at 20:53
ScamtexScamtex
1766
1766
1
Nice answer! The only miniscule thing I might suggest going forward is that historically, W3Schools hasn't exactly been seen as the best development resource, and as such some people (warranted or not) dock some credibility from answers that cite it. May I suggest MDN as a much more welcome alternative :)
– Tyler Roper
Mar 21 at 21:08
@TylerRoper good point, will do in the future :)
– Scamtex
Mar 21 at 21:10
add a comment |
1
Nice answer! The only miniscule thing I might suggest going forward is that historically, W3Schools hasn't exactly been seen as the best development resource, and as such some people (warranted or not) dock some credibility from answers that cite it. May I suggest MDN as a much more welcome alternative :)
– Tyler Roper
Mar 21 at 21:08
@TylerRoper good point, will do in the future :)
– Scamtex
Mar 21 at 21:10
1
1
Nice answer! The only miniscule thing I might suggest going forward is that historically, W3Schools hasn't exactly been seen as the best development resource, and as such some people (warranted or not) dock some credibility from answers that cite it. May I suggest MDN as a much more welcome alternative :)
– Tyler Roper
Mar 21 at 21:08
Nice answer! The only miniscule thing I might suggest going forward is that historically, W3Schools hasn't exactly been seen as the best development resource, and as such some people (warranted or not) dock some credibility from answers that cite it. May I suggest MDN as a much more welcome alternative :)
– Tyler Roper
Mar 21 at 21:08
@TylerRoper good point, will do in the future :)
– Scamtex
Mar 21 at 21:10
@TylerRoper good point, will do in the future :)
– Scamtex
Mar 21 at 21:10
add a comment |
0
Try to use document.getElementsByTagName("input") instead of document.forms['myForm'].elements;
function aFunction()
var table = document.getElementById("myTable"),
row = table.insertRow(-1),
cell1 = row.insertCell(0),
cell2 = row.insertCell(1),
cell3 = row.insertCell(2),
cell4 = row.insertCell(3),
cell5 = row.insertCell(4),
elements = document.getElementsByTagName("input")//document.forms['myForm'].elements;
//console.log(elements)
cell1.innerHTML = elements[0].value;
cell2.innerHTML = elements[1].value;
cell3.innerHTML = elements[2].value;
cell4.innerHTML = elements[3].value;
cell5.innerHTML = elements[4].value;
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td,
th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
tr:nth-child(even)
background-color: #dddddd;
body
background-color: powderblue;
h1
color: red;
p
color: blue;
<table style="width:100%" id="myTable">
<tr>
<th>Pickup Address</th>
<th>Delivery Address</th>
<th>Price</th>
<th>Distance to Pickup</th>
<th>Delivery Distance</th>
</tr>
</table>
<div style="border:1px solid #ccc" id="myForm">
<div class="container">
<p>Please fill in this form to post a job for our drivers.</p>
<hr>
<label for="pickup-address"><b>Pickup Address</b></label>
<input type="text" placeholder="Enter Address" name="pickup" required>
<label for="delivery-address"><b>Delivery Address</b></label>
<input type="text" placeholder="Enter Address" name="delivery" required>
<label for="price"><b>Price</b></label>
<input type="text" placeholder="Enter Price" name="price" required>
<label for="distance-to-pickup"><b>Distance to Pickup</b></label>
<input type="text" placeholder="Enter distance" name="pickup-distance" required>
<label for="distance-to-delivery"><b>Distance to Delivery</b></label>
<input type="text" placeholder="Enter distance" name="delivery-distance" required>
<button onclick="aFunction()">Post</button>
</div>
</div>answered Mar 21 at 21:04
Lucas MatosLucas Matos
248112
add a comment |
0
Try to use document.getElementsByTagName("input") instead of document.forms['myForm'].elements;
function aFunction()
var table = document.getElementById("myTable"),
row = table.insertRow(-1),
cell1 = row.insertCell(0),
cell2 = row.insertCell(1),
cell3 = row.insertCell(2),
cell4 = row.insertCell(3),
cell5 = row.insertCell(4),
elements = document.getElementsByTagName("input")//document.forms['myForm'].elements;
//console.log(elements)
cell1.innerHTML = elements[0].value;
cell2.innerHTML = elements[1].value;
cell3.innerHTML = elements[2].value;
cell4.innerHTML = elements[3].value;
cell5.innerHTML = elements[4].value;
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td,
th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
tr:nth-child(even)
background-color: #dddddd;
body
background-color: powderblue;
h1
color: red;
p
color: blue;
<table style="width:100%" id="myTable">
<tr>
<th>Pickup Address</th>
<th>Delivery Address</th>
<th>Price</th>
<th>Distance to Pickup</th>
<th>Delivery Distance</th>
</tr>
</table>
<div style="border:1px solid #ccc" id="myForm">
<div class="container">
<p>Please fill in this form to post a job for our drivers.</p>
<hr>
<label for="pickup-address"><b>Pickup Address</b></label>
<input type="text" placeholder="Enter Address" name="pickup" required>
<label for="delivery-address"><b>Delivery Address</b></label>
<input type="text" placeholder="Enter Address" name="delivery" required>
<label for="price"><b>Price</b></label>
<input type="text" placeholder="Enter Price" name="price" required>
<label for="distance-to-pickup"><b>Distance to Pickup</b></label>
<input type="text" placeholder="Enter distance" name="pickup-distance" required>
<label for="distance-to-delivery"><b>Distance to Delivery</b></label>
<input type="text" placeholder="Enter distance" name="delivery-distance" required>
<button onclick="aFunction()">Post</button>
</div>
</div>answered Mar 21 at 21:04
Lucas MatosLucas Matos
248112
add a comment |
0
0
0
Try to use document.getElementsByTagName("input") instead of document.forms['myForm'].elements;
function aFunction()
var table = document.getElementById("myTable"),
row = table.insertRow(-1),
cell1 = row.insertCell(0),
cell2 = row.insertCell(1),
cell3 = row.insertCell(2),
cell4 = row.insertCell(3),
cell5 = row.insertCell(4),
elements = document.getElementsByTagName("input")//document.forms['myForm'].elements;
//console.log(elements)
cell1.innerHTML = elements[0].value;
cell2.innerHTML = elements[1].value;
cell3.innerHTML = elements[2].value;
cell4.innerHTML = elements[3].value;
cell5.innerHTML = elements[4].value;
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td,
th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
tr:nth-child(even)
background-color: #dddddd;
body
background-color: powderblue;
h1
color: red;
p
color: blue;
<table style="width:100%" id="myTable">
<tr>
<th>Pickup Address</th>
<th>Delivery Address</th>
<th>Price</th>
<th>Distance to Pickup</th>
<th>Delivery Distance</th>
</tr>
</table>
<div style="border:1px solid #ccc" id="myForm">
<div class="container">
<p>Please fill in this form to post a job for our drivers.</p>
<hr>
<label for="pickup-address"><b>Pickup Address</b></label>
<input type="text" placeholder="Enter Address" name="pickup" required>
<label for="delivery-address"><b>Delivery Address</b></label>
<input type="text" placeholder="Enter Address" name="delivery" required>
<label for="price"><b>Price</b></label>
<input type="text" placeholder="Enter Price" name="price" required>
<label for="distance-to-pickup"><b>Distance to Pickup</b></label>
<input type="text" placeholder="Enter distance" name="pickup-distance" required>
<label for="distance-to-delivery"><b>Distance to Delivery</b></label>
<input type="text" placeholder="Enter distance" name="delivery-distance" required>
<button onclick="aFunction()">Post</button>
</div>
</div>answered Mar 21 at 21:04
Lucas MatosLucas Matos
248112
Try to use document.getElementsByTagName("input") instead of document.forms['myForm'].elements;
function aFunction()
var table = document.getElementById("myTable"),
row = table.insertRow(-1),
cell1 = row.insertCell(0),
cell2 = row.insertCell(1),
cell3 = row.insertCell(2),
cell4 = row.insertCell(3),
cell5 = row.insertCell(4),
elements = document.getElementsByTagName("input")//document.forms['myForm'].elements;
//console.log(elements)
cell1.innerHTML = elements[0].value;
cell2.innerHTML = elements[1].value;
cell3.innerHTML = elements[2].value;
cell4.innerHTML = elements[3].value;
cell5.innerHTML = elements[4].value;
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td,
th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
tr:nth-child(even)
background-color: #dddddd;
body
background-color: powderblue;
h1
color: red;
p
color: blue;
<table style="width:100%" id="myTable">
<tr>
<th>Pickup Address</th>
<th>Delivery Address</th>
<th>Price</th>
<th>Distance to Pickup</th>
<th>Delivery Distance</th>
</tr>
</table>
<div style="border:1px solid #ccc" id="myForm">
<div class="container">
<p>Please fill in this form to post a job for our drivers.</p>
<hr>
<label for="pickup-address"><b>Pickup Address</b></label>
<input type="text" placeholder="Enter Address" name="pickup" required>
<label for="delivery-address"><b>Delivery Address</b></label>
<input type="text" placeholder="Enter Address" name="delivery" required>
<label for="price"><b>Price</b></label>
<input type="text" placeholder="Enter Price" name="price" required>
<label for="distance-to-pickup"><b>Distance to Pickup</b></label>
<input type="text" placeholder="Enter distance" name="pickup-distance" required>
<label for="distance-to-delivery"><b>Distance to Delivery</b></label>
<input type="text" placeholder="Enter distance" name="delivery-distance" required>
<button onclick="aFunction()">Post</button>
</div>
</div>function aFunction()
var table = document.getElementById("myTable"),
row = table.insertRow(-1),
cell1 = row.insertCell(0),
cell2 = row.insertCell(1),
cell3 = row.insertCell(2),
cell4 = row.insertCell(3),
cell5 = row.insertCell(4),
elements = document.getElementsByTagName("input")//document.forms['myForm'].elements;
//console.log(elements)
cell1.innerHTML = elements[0].value;
cell2.innerHTML = elements[1].value;
cell3.innerHTML = elements[2].value;
cell4.innerHTML = elements[3].value;
cell5.innerHTML = elements[4].value;
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td,
th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
tr:nth-child(even)
background-color: #dddddd;
body
background-color: powderblue;
h1
color: red;
p
color: blue;
<table style="width:100%" id="myTable">
<tr>
<th>Pickup Address</th>
<th>Delivery Address</th>
<th>Price</th>
<th>Distance to Pickup</th>
<th>Delivery Distance</th>
</tr>
</table>
<div style="border:1px solid #ccc" id="myForm">
<div class="container">
<p>Please fill in this form to post a job for our drivers.</p>
<hr>
<label for="pickup-address"><b>Pickup Address</b></label>
<input type="text" placeholder="Enter Address" name="pickup" required>
<label for="delivery-address"><b>Delivery Address</b></label>
<input type="text" placeholder="Enter Address" name="delivery" required>
<label for="price"><b>Price</b></label>
<input type="text" placeholder="Enter Price" name="price" required>
<label for="distance-to-pickup"><b>Distance to Pickup</b></label>
<input type="text" placeholder="Enter distance" name="pickup-distance" required>
<label for="distance-to-delivery"><b>Distance to Delivery</b></label>
<input type="text" placeholder="Enter distance" name="delivery-distance" required>
<button onclick="aFunction()">Post</button>
</div>
</div>function aFunction()
var table = document.getElementById("myTable"),
row = table.insertRow(-1),
cell1 = row.insertCell(0),
cell2 = row.insertCell(1),
cell3 = row.insertCell(2),
cell4 = row.insertCell(3),
cell5 = row.insertCell(4),
elements = document.getElementsByTagName("input")//document.forms['myForm'].elements;
//console.log(elements)
cell1.innerHTML = elements[0].value;
cell2.innerHTML = elements[1].value;
cell3.innerHTML = elements[2].value;
cell4.innerHTML = elements[3].value;
cell5.innerHTML = elements[4].value;
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td,
th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
tr:nth-child(even)
background-color: #dddddd;
body
background-color: powderblue;
h1
color: red;
p
color: blue;
<table style="width:100%" id="myTable">
<tr>
<th>Pickup Address</th>
<th>Delivery Address</th>
<th>Price</th>
<th>Distance to Pickup</th>
<th>Delivery Distance</th>
</tr>
</table>
<div style="border:1px solid #ccc" id="myForm">
<div class="container">
<p>Please fill in this form to post a job for our drivers.</p>
<hr>
<label for="pickup-address"><b>Pickup Address</b></label>
<input type="text" placeholder="Enter Address" name="pickup" required>
<label for="delivery-address"><b>Delivery Address</b></label>
<input type="text" placeholder="Enter Address" name="delivery" required>
<label for="price"><b>Price</b></label>
<input type="text" placeholder="Enter Price" name="price" required>
<label for="distance-to-pickup"><b>Distance to Pickup</b></label>
<input type="text" placeholder="Enter distance" name="pickup-distance" required>
<label for="distance-to-delivery"><b>Distance to Delivery</b></label>
<input type="text" placeholder="Enter distance" name="delivery-distance" required>
<button onclick="aFunction()">Post</button>
</div>
</div>answered Mar 21 at 21:04
Lucas MatosLucas Matos
248112
answered Mar 21 at 21:04
Lucas MatosLucas Matos
248112
answered Mar 21 at 21:04
Lucas MatosLucas Matos
248112
answered Mar 21 at 21:04
Lucas MatosLucas Matos
248112
248112
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55288857%2fhtml-form-crashes-entire-page%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Define the problem more clearly. What do you mean "crash"? Do you get an error? If so, what exactly is it? I can fill out all the field and submit here with no issues.
– Scott Marcus
Mar 21 at 20:44
When you say "crashes", do you mean there's an error? Or, that the page reloads? To prevent a reload, you would need to call
event.preventDefaultin youraFunction, which I don't see. OR, add anactionto your form to submit your data.– Jack
Mar 21 at 20:45
@Jack I don't see him actually submitting a form so the problem isn't that the page reloads.
– Isaac Vidrine
Mar 21 at 20:53
1
@IsaacVidrine The default action of a
<button>within a<form>issubmit.– Tyler Roper
Mar 21 at 20:53
1
@IsaacVidrine W3schools isn't exactly the best resource (as I'd mentioned on that answer). Per the official W3C spec: The missing value default [for
type] is the Submit Button state. If the element has a form owner, the element must submit the form owner from the button element."– Tyler Roper
Mar 22 at 15:06