Заставьте JavaScript писать на странице после нажатия кнопки отправки - PullRequest
0 голосов
/ 24 октября 2018

Вот фрагмент кода, который я получил от w3schools, который показывает, что когда имя превышает 10 символов, страница должна добавить немного текста, в этом случае она должна добавить «привет», но вместо этого этоудаляет все со страницы и переходит на новую страницу и отображает только «привет».Как я могу решить эту проблему?

<!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 Ответ

0 голосов
/ 24 октября 2018

Проще говоря, не используйте document.write().Если вы прочтете красивый оранжевый текст в верхней части документации, вы поймете, почему:

Примечание: когда document.write пишет в документ stream , вызывая document.write для закрытого (загруженного) документа автоматически вызываются document.open, , что очистит документ .

document.write() следует использовать только во время загрузки страницы для выводав то время как это создает веб-страницу, и не должно использоваться впоследствии.Попробуйте создать div и написать вместо него:

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>

Кроме того, я заметил, что вы устанавливаете submitOK = "true".Javascript имеет логическое значение (см. Также это ).Почему бы не использовать это вместо этого?

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
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...