Make Javascript write on page after submit button pressed
Question
Here is a bit of code I have sourced from w3schools which shows that whenever a name is over 10 characters, the page should add a bit of text, in this case, it should add on "hi", but instead, it removes everything from the page and goes onto a new page and only displays "hi". How can I resolve this?
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" onsubmit="return myFunction()">
Name (max 10 characters): <input type="text" id="fname" size="20" name="fname"><br>
Age (from 1 to 100): <input type="text" id="age" size="20" name="age"><br>
E-mail: <input type="text" id="email" size="20" name="mail"><br><br>
<input type="submit" value="Submit">
</form>
<script>
function myFunction() {
var at = document.getElementById("email").value.indexOf("@");
var age = document.getElementById("age").value;
var fname = document.getElementById("fname").value;
submitOK = "true";
if (fname.length > 10) {
document.write("hi");
}
if (isNaN(age) || age < 1 || age > 100) {
alert("The age must be a number between 1 and 100");
submitOK = "false";
}
if (at == -1) {
alert("Not a valid e-mail!");
submitOK = "false";
}
if (submitOK == "false") {
return false;
}
}
</script>
</body>
</html>
1 answers
solution1
1 2018-10-24 13:29:40
Simply put, don't usedocument.write() . If you read the nice orange text at the top of the documentation, you'll see why:
Note: as
document.writewrites to the document stream , callingdocument.writeon a closed (loaded) document automatically callsdocument.open, which will clear the document .
document.write() should only be used while a page is loading, to ouput while it's creating the webpage, and should not be used afterwards. Consider creating a div, and writing to there instead:
function myFunction() { var at = document.getElementById("email").value.indexOf("@"); var age = document.getElementById("age").value; var fname = document.getElementById("fname").value; submitOK = "true"; if (fname.length > 10) { document.getElementById('result').innerHTML = 'Fname is > 10!'; } if (isNaN(age) || age < 1 || age > 100) { alert("The age must be a number between 1 and 100"); submitOK = "false"; } if (at == -1) { alert("Not a valid e-mail!"); submitOK = "false"; } if (submitOK == "false") { return false; } else { alert('Submitted Successfully!'); return false; // Returning false here just for SO Code Snippet } }
<form action="/action_page.php" onsubmit="return myFunction()"> Name (max 10 characters): <input type="text" id="fname" size="20" name="fname"><br> Age (from 1 to 100): <input type="text" id="age" size="20" name="age"><br> E-mail: <input type="text" id="email" size="20" name="mail"><br><br> <input type="submit" value="Submit"> <div id="result"></div> </form>
Additionally, I notice you're setting submitOK = "true" . Javascript does have booleans (See this also). Why not use that instead?
submitOK = true;
if (fname.length < 10) {
alert('Your name should be more than 10 characters');
submitOK = false;
}
if (submitOK) { // Same as "if (submitOK == true)"
//Good to go
}
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.