2016-10-08 23 views
-1

表单不会提交Javascript表单提交无效。会是什么呢?

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>

+3

控制台中的任何错误?似乎正在为我工​​作。 – Janar

+2

我收到一条提示说它已成功。你还有什么期望?如果你的意思是表单没有被处理,那你为什么使用'action =“#”'? – j08691

+0

您可能想要阅读[*如何创建**最小**,完整且可验证的示例*](http://stackoverflow.com/help/mcve)。通常,创建示例的过程会突出显示您的问题,因此您无需提问。 – RobG

回答

-3

行动现场应设置为要提交表单。目前它被设置为无。

action="#" 

我还建议不要使用内联Javascript,即使是这样一个小功能。

+2

内联Javascript有什么不对?至少解释为什么你会建议反对它,而不是基于你的推荐,没有事实证据为什么? – Ricky

+0

对于一个测试用例来说它没有错......但是为了让你的应用程序更好地拥有一个干净的命名文件,它的内联代码很多...... ..对于'干'代码......所以你可以重用你的函数其他html文件,如果您需要进行更改,您可以将“js”文件夹放入您的“formHandle.js”文件中,放入validateXyForm函数中 –