0
を持続しない:入力を提供することに ウェブページの出力は、私はHTML、検証のためのスタイリングとJSの利用CSS使用して、次のWebページを設計する必要があり
を次のように、出力は次のようになります。
私は、次のコードを書かれている:
<!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
、であるためだ
?ある時点でサーバーの詳細を保存しようとしていますか? – karthick
これは割り当ての質問です。目的は、JSを使用して入力をクライアント側で検証し、割引価格を表示することです。 –
[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