Javascript表单提交不起作用。会是什么呢?

时间:2016-10-08 21:14:16

标签: javascript html forms

表格不会提交



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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:-3)

操作字段应设置为您希望将表单提交到的位置。目前它什么都没有。

    action="#"

我还建议不要使用内联Javascript,即使是这么小的功能。