Klagarge/SDi-HTML-Exercise
Archived
1
0
Fork 0
Code Issues Pull Requests Activity

add script for display result from server

Browse Source
This commit is contained in:
Rémi Heredero 2024-04-11 08:53:35 +02:00
parent d665bdbf5e
commit fd5344a896
Signed by: Klagarge
GPG Key ID: 3CBAC2C6CD1E8807
4 changed files with 10431 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
calc.html
View File

@ -3,15 +3,27 @@
<head>
<title>HTML / CSS</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="jquery-3.3.1.js"></script>
<script src="script.js"></script>
</head>
<body>
<form method="GET" action="http://webex.sdi.hevs.ch/calc">
<form method="GET" action="http://webex.sdi.hevs.ch/calc" class="inline-divs">
<div id="op1">
<p>Operand 1</p>
<input type="number" name="operandA"><br>
<input type="number" name="operandA">
</div>
<div id="op2">
<p>Operand 2</p>
<input type="number" name="operandB"><br><br>
<input type="submit" value="Calculate">
<input type="reset"><br><br>
<input type="number" name="operandB">
</div>
<div id="but">
<input type="submit" value="Calculate"> <br>
<input type="reset">
</div>
<div id="res">
<p>Result</p>
<input type="text" name="result" readonly>
</div>
</form>
</body>
</html>

10364
jquery-3.3.1.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

18
script.js Normal file
View File

@ -0,0 +1,18 @@
$(document).ready(function() {
$('form').on('submit', function(event) {
event.preventDefault();
var operandA = $('input[name="operandA"]').val();
var operandB = $('input[name="operandB"]').val();
$.ajax({
type: 'POST',
url: 'http://webex.sdi.hevs.ch/calc',
data: { operandA: operandA, operandB: operandB },
success: function(data) {
var result = $(data).find('strong').text();
$('input[name="result"]').val(result);
}
});
});
});

31
styles.css
View File

@ -1,5 +1,28 @@
body {
div[id="op1"] {
background-color: lightskyblue;
margin: 5px;
padding: 10px;
}
div[id="op2"] {
background-color: lightgreen;
margin: 5px;
padding: 10px;
}
div[id="but"] {
background-color: palevioletred;
margin: 5px;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: center;
}
div[id="res"] {
background-color: yellow;
margin: 5px;
padding: 10px;
}
input[type="number"] {
@ -13,3 +36,9 @@ input[type="submit"] {
input[type="reset"] {
background-color: palevioletred;
}
.inline-divs {
display: flex;
flex-direction: row;
align-items: stretch;
}