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

26
calc.html
View File

@ -3,15 +3,27 @@
<head> <head>
<title>HTML / CSS</title> <title>HTML / CSS</title>
<link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css" href="styles.css">
<script src="jquery-3.3.1.js"></script>
<script src="script.js"></script>
</head> </head>
<body> <body>
<form method="GET" action="http://webex.sdi.hevs.ch/calc"> <form method="GET" action="http://webex.sdi.hevs.ch/calc" class="inline-divs">
<p>Operand 1</p> <div id="op1">
<input type="number" name="operandA"><br> <p>Operand 1</p>
<p>Operand 2</p> <input type="number" name="operandA">
<input type="number" name="operandB"><br><br> </div>
<input type="submit" value="Calculate"> <div id="op2">
<input type="reset"><br><br> <p>Operand 2</p>
<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> </form>
</body> </body>
</html> </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; 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"] { input[type="number"] {
@ -13,3 +36,9 @@ input[type="submit"] {
input[type="reset"] { input[type="reset"] {
background-color: palevioletred; background-color: palevioletred;
} }
.inline-divs {
display: flex;
flex-direction: row;
align-items: stretch;
}