2017-06-14 4 views
0

を持続しない:入力を提供することに enter image description hereウェブページの出力は、私はHTML、検証のためのスタイリングとJSの利用CSS使用して、次のWebページを設計する必要があり

を次のように、出力は次のようになります。

enter image description here

CSSやJS要件は次のとおりです。enter image description here

私は、次のコードを書かれている:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style type="text/css"> 
 
body{ 
 
background-color:#99FFFF; 
 
} 
 
h1{ 
 
font-style:italic; 
 
font-weight:bold; 
 
text-align:center; 
 
color:Maroon; 
 
} 
 
table{ 
 
border-collapse: collapse; 
 
border:5px solid black; 
 
width:30%; 
 
margin-left:35%; 
 
} 
 
tr{ 
 
text-align:left; 
 
} 
 
td{ 
 
padding:10px; 
 
border:2px solid black; 
 
} 
 
#submitbutton{ 
 
margin-left:45%; 
 
} 
 
#discount{ 
 
text-align:center; 
 
font-weight:bold; 
 
font-size:25px; 
 
} 
 
#result{ 
 
text-align:center; 
 
font-weight:bold; 
 
font-style:italic; 
 
font-size:40px; 
 
color:#FF0000; 
 
} 
 
</style> 
 
<script type="text/javascript"> 
 
function validateForm() 
 
{ 
 
var x=document.myForm.name.value; 
 
var y=document.myForm.price.value; 
 
var namechar= /^[\sa-zA-Z]+$/; 
 

 
if(x=="") {alert("Product Name should not be empty");return false;} 
 

 
else if(y=="") {alert("Product Price should not be empty");return false;} 
 

 
else if(!/^[a-zA-Z\s]+$/.test(x)) {alert("Product Name should contain only alphabets and space");return false;} 
 

 
else if(y<1) {alert("Product Price should be a number with value greater than 0");return false;} 
 

 
else 
 
{ 
 
var x=document.myForm.season.value; 
 
var disc; 
 
if(x.match("summer")) disc=10; 
 
else if (x.match("newyear")) disc=5; 
 
else if (x.match("clearance")) disc=15; 
 

 
document.getElementById("discount").innerHTML="The discount is "+disc+"%"; 
 
var p=document.myForm.price.value; 
 
p=p-(p*disc)/100; 
 
document.getElementById("result").innerHTML="The discounted price : Rs "+p; 
 
return true; 
 
} 
 
} 
 

 
</script> 
 
</head> 
 

 
<body> 
 
<h1>DISCOUNT PRICE</h1> 
 
<form method="get" name="myForm" onsubmit="return validateForm()"> 
 
<table> 
 
    <tr> 
 
    <td>Product Name</td> 
 
    <td> 
 
     <input type="text" name="name"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Product Price</td> 
 
    <td><input type="number" name="price"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Season</td> 
 
    <td><select name="season"> 
 
    <option value="summer">SUMMER SALE</option> 
 
    <option value="newyear">NEW YEAR SALE</option> 
 
    <option value="clearance">CLEARANCE SALE</option> 
 
</select> 
 
</td> 
 
    </tr> 
 
</table><br/> 
 
<input type="submit" id="submitbutton" value="GET DISCOUNT PRICE"> 
 
</form> 
 
<br/> 
 
<div id="discount"></div> 
 
<br/> 
 
<div id="result"></div> 
 
</body> 
 
</html>

(一部CSSスタイリングエラーで)所望のように出力が得られるが、出力が持続しません。両方のdivタグに表示されている値はすぐに消えます。 出力が確実に持続するようにするにはどうすればよいですか?

可能であれば、CSSスタイリングにもお役立てください。 テーブルを35%左揃えし、ボタンを45%提出する方法

得られた出力のWebページ: ボタンが<form> -tagで指定されたファイルにtheuserを転送するタイプsubmit、であるためだenter image description here

+0

?ある時点でサーバーの詳細を保存しようとしていますか? – karthick

+0

これは割り当ての質問です。目的は、JSを使用して入力をクライアント側で検証し、割引価格を表示することです。 –

+0

[w3schools](https://www.w3schools.com/tags/tag_form.asp)と[MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data)を参照してください。 )フォームの詳細については、これらは、送信時にサーバーに要求を送信するためのものです。 – styfle

答えて

2

trueの代わりにfalseを返すだけで問題は解決します。フォームの目的が何であるかを

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style type="text/css"> 
 
    body { 
 
     background-color: #99FFFF; 
 
    } 
 
    
 
    h1 { 
 
     font-style: italic; 
 
     font-weight: bold; 
 
     text-align: center; 
 
     color: Maroon; 
 
    } 
 
    
 
    table { 
 
     border-collapse: collapse; 
 
     border: 5px solid black; 
 
     width: 30%; 
 
     margin-left: 35%; 
 
    } 
 
    
 
    tr { 
 
     text-align: left; 
 
    } 
 
    
 
    td { 
 
     padding: 10px; 
 
     border: 2px solid black; 
 
    } 
 
    
 
    #submitbutton { 
 
     margin-left: 45%; 
 
    } 
 
    
 
    #discount { 
 
     text-align: center; 
 
     font-weight: bold; 
 
     font-size: 25px; 
 
    } 
 
    
 
    #result { 
 
     text-align: center; 
 
     font-weight: bold; 
 
     font-style: italic; 
 
     font-size: 40px; 
 
     color: #FF0000; 
 
    } 
 
    </style> 
 
    <script type="text/javascript"> 
 
    function validateForm() { 
 
     var x = document.myForm.name.value; 
 
     var y = document.myForm.price.value; 
 
     var namechar = /^[\sa-zA-Z]+$/; 
 

 
     if (x == "") { 
 
     alert("Product Name should not be empty"); 
 
     return false; 
 
     } else if (y == "") { 
 
     alert("Product Price should not be empty"); 
 
     return false; 
 
     } else if (!/^[a-zA-Z\s]+$/.test(x)) { 
 
     alert("Product Name should contain only alphabets and space"); 
 
     return false; 
 
     } else if (y < 1) { 
 
     alert("Product Price should be a number with value greater than 0"); 
 
     return false; 
 
     } else { 
 
     var x = document.myForm.season.value; 
 
     var disc; 
 
     if (x.match("summer")) disc = 10; 
 
     else if (x.match("newyear")) disc = 5; 
 
     else if (x.match("clearance")) disc = 15; 
 

 
     document.getElementById("discount").innerHTML = "The discount is " + disc + "%"; 
 
     var p = document.myForm.price.value; 
 
     p = p - (p * disc)/100; 
 
     document.getElementById("result").innerHTML = "The discounted price : Rs " + p; 
 
     return false; 
 
     } 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <h1>DISCOUNT PRICE</h1> 
 
    <form method="get" name="myForm" onsubmit="return validateForm()"> 
 
    <table> 
 
     <tr> 
 
     <td>Product Name</td> 
 
     <td> 
 
      <input type="text" name="name"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>Product Price</td> 
 
     <td><input type="number" name="price"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>Season</td> 
 
     <td><select name="season"> 
 
    <option value="summer">SUMMER SALE</option> 
 
    <option value="newyear">NEW YEAR SALE</option> 
 
    <option value="clearance">CLEARANCE SALE</option> 
 
</select> 
 
     </td> 
 
     </tr> 
 
    </table><br/> 
 
    <input type="submit" id="submitbutton" value="GET DISCOUNT PRICE"> 
 
    </form> 
 
    <br/> 
 
    <div id="discount"></div> 
 
    <br/> 
 
    <div id="result"></div> 
 
</body> 
 

 
</html>

関連する問題