How to change text of a paragraph when submit button is clicked in JavaScript
Question
I have a uni assignment in which we have to create a simple form and when the Submit button is clicked a paragraph with some text should appear underneath the form.
The problem is that when I click Submit the text only appears for a brief second. How can I make it stay after the Submit button is clicked and the form is submited?
Here is the code. HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="form2_css.css">
<script src="script.js"></script>
<title>Mask and IPv4</title>
</head>
<body>
<form id="form1" name="form1" onsubmit="return validateForm()">
<fieldset>
<legend>Mask and IPv4</legend>
<table>
<tr>
<ul>
<td class="firstCol"><label for="ipAdress"><li>IP Adress</li></label></td>
</ul>
<td><input value="ipAdress1" type="number" id="ipAdress1" name="ipAdress1" min ="1" max="999"></td>
<td><input value="ipAdress2" type="number" id="ipAdress2" name="ipAdress2" min ="1" max="999"></td>
<td><input value="ipAdress3" type="number" id="ipAdress3" name="ipAdress3" min ="1" max="999"></td>
<td><input value="ipAdress4" type="number" id="ipAdress4" name="ipAdress4" min ="1" max="999"></td>
</tr>
<tr>
<ul>
<td class="firstCol"><label for="mask"><li>Network Mask</li></label></td>
</ul>
<td><input value="mask1" type="number" id="mask1" name="mask1" min ="1" max="999"></td>
<td><input value="mask2" type="number" id="mask2" name="mask2" min ="1" max="999"></td>
<td><input value="mask3" type="number" id="mask3" name="mask3" min ="1" max="999"></td>
<td><input value="mask4" type="number" id="mask4" name="mask4" min ="1" max="999"></td>
</tr>
<tr>
<td></td>
<td>
<button class="submitButton" type="submit" form="form1" onclick="printToScreen()">Submit</button>
</td>
<td>
<button class="resetButton" type="reset" form="form1">Reset</button>
</td>
</tr>
</table>
</fieldset>
</form>
<p id="binaryPrint"></p>
</body>
</html>
JavaScript:
function printToScreen() {
document.getElementById("binaryPrint").innerHTML = "test!";
}
CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(174, 216, 91);
}
fieldset {
width: 60%;
margin-top: 15px;
margin-left: auto;
margin-right: auto;
background-color: lightgreen;
border: 2px solid black;
padding: 20px;
}
legend, label {
font-size: 20px;
}
input {
size: 50%;
}
.firstCol {
padding-right: 100px;
}
button {
padding: 3px
}
1 answers
solution1
1 2020-12-10 10:44:01
The reason for such behaviour is that you're have button type="submit" . The default action when you click it is form submit. You can read more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit
To prevent that you can use type="button" instead and then handle the form submission inside the printToScreen function.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.