matt9191 matt9191 - 1 month ago 10
HTML Question

Javascript Form Submission Not Working. What could it be?

The form won't submit



button {
right: 10px;
bottom: 10px;
position: absolute;
}
p {
font: 22px Helvetica, Arial, Sans-Serif;
text-shadow: 0px 1px 1px #040607;
}
q {
padding-bottom: 15px;
font: 24px Helvetica Bold, Arial, Sans-Serif;
}
textarea {
padding: 12px;
font: 16px Helvetica Bold, Arial, Sans-Serif;

width: 300px;
height: 120px;
}
.quote {
top: 20px;
margin: auto;
position: relative;

width: 436px;
height: 270px;
}

a {
color: #FF9C00;
}
button {
color: #FFFFFF;

background: #FFAF30;
box-shadow: inset 0px 4px 8px #FF9C00;

border-style: solid;
border-radius: 16px;
border-color: #FF9C00;

padding: 3px;
padding-left: 16px;
padding-right: 16px;
}
button, a{
text-align: center;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 1px 1px 1px #040607;

font-weight: bold;
font: 22px Monaco, Sans-Serif;
}
fieldset{
width: 436px;
height: 270px;
position: relative;

line-height: 50px;
border-radius: 12px;
border-color: #040607;
font: 22px Helvetica, Arial, Sans-Serif;
}
footer {
width: 100%;
height: 60px;
padding-top: 35px;

left: 0px;
right: 0px;
bottom: 0px;
position: fixed;

text-align: center;
text-transform: uppercase;
text-shadow: 0px 0px 10px #0851A8;

color: #FFFFFF;
font-weight: bold;
font: 15px Monaco, Sans-Serif;

background: #3780D8;
box-shadow: inset 0px 10px 20px #0851A8;
opacity: .95;
}
legend{
font-weight: bold;
letter-spacing: 2px;
font: 30px Helvetica Bold, Arial, Sans-Serif;

color: #3780D8;
text-align: left;
text-shadow: 0px 2px 1px #040607;
}
li{
list-style-type: none;

line-height: 25px;
padding-bottom: 1px;

color: #040607;
text-shadow: 0px 1px 1px #2E3845;
font: 22px Helvetica Bold, Arial, Sans-Serif;

text-align: center;
}
textarea {
margin: auto;
position: absolute;
resize: none;

width: 270px;
height: 166px;

top: 0px;
left: 0px;
right: 0px;
bottom: 0px;

border-radius: 6px;
box-shadow: 1px 2px 4px #040607;
}
q {
display: block;

font-weight: bold;
font: 26px Helvetica Bold, Arial, Sans-Serif;

text-align: center;
text-decoration: none;

color: #040607;
text-shadow: 0px 1px 1px #2E3845;
}
.content {
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
position: fixed;

width: 100%;
min-height: 100%;

background: #FFFFFF;
}
.left {
left: 5%;
top: 120px;
float: left;
margin: auto;
position: relative;

width: 40%;
}
.right {
right: 5%;
top: 120px;
float: right;
margin: auto;
position: relative;

width: 40%;
}
.italic {
font-style: italic;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SMPentest Challenge</title>
<link rel="stylesheet" href="/static/css/final.css" />
<link rel="stylesheet" href="/static/css/style.css" />
<script>
function validateForm() {
alert("Submitted Successfully!");
return true;
}
</script>
</head>
<body>
<div class="content">
<div class="left">
<div class="quote">
<q class="normal">Submit the form.</q>
<q class="italic">Test</q>
<q class="normal">Test</q>
<q class="italic">Test</q>
<q class="normal">Test</q>
</div>
</div>
<div class=right>
<form method="POST" onsubmit="return validateForm();" action="#">
<fieldset>
<legend>Contact Info</legend>
<table>
<tr>
<td><label for="name">name</label></td>
<td><input name="name" id="name" type="text" size="20" maxlength="30" required autocomplete="off" placeholder="Required"/></td>
</tr>
<tr>
<td><label for="email">email</label></td>
<td><input name="email" id="email" type="text" size="20" maxlength="2" required autocomplete="off" placeholder="Required"/></td>
</tr>
</table>
<p>Preferred Choice:</p>
<div class=boxes>
<input name="summer" id="summer" type="checkbox"/>
<label for="summer">#1</label>
<br/>
<input name="winter" id="winter" type="checkbox"/>
<label for="winter">#2</label>
<br/>
<input name="fall" id="fall" type="checkbox"/>
<label for="fall">#3</label>
<br/>
</div>
<input name="i_know" type=hidden value="KungFu!"/>
<button name="submit" type="submit">Submit</button>
</fieldset>
</form>
</div>
</div>
<footer>Test Page</footer>
</body>
</html>




Answer

The action field should be set to where you want the form to be submitted to. It is currently set to nothing.

    action="#"

I would also advise against the use of inline Javascript, even for such a small function.