Не удается получить значения из форм (JS) - PullRequest
0 голосов
/ 07 февраля 2019

Я новичок в Javascript, поэтому я искал несколько способов, как извлечь значения и строки из основных форм HTML.Неважно, что я делаю, я не могу извлечь какие-либо ценности.Первоначально я попытался идентификаторы и назначил каждый идентификатор с переменной, используя var x = document.getElementById ("variablegoeshere");но это не сработало.Затем попытался использовать имена и добавил тег формы вокруг столбца форм, скопировав из этой демонстрации: https://www.w3schools.com/js/tryit.asp?filename=tryjs_validation_js

Это тоже не сработало.Любая помощь будет принята с благодарностью.Весь код для контекста:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width">
        <!-- Bootstrap CSS Import -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
        <!-- Bootstrap JS, JQuery and Popper.JS Import -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
		<script>
            //Image Background Randomizer
            $(document).ready(function(){
                var images=['https://images.pexels.com/photos/753639/pexels-photo-753639.jpeg?auto=compress&cs=tinysrgb&dpr=2',
                'https://images.pexels.com/photos/10922/pexels-photo-10922.jpeg?auto=compress&cs=tinysrgb&dpr=1',
                'https://images.pexels.com/photos/1797158/pexels-photo-1797158.jpeg?auto=compress&cs=tinysrgb&dpr=1',
                'https://images.pexels.com/photos/532263/pexels-photo-532263.jpeg?auto=compress&cs=tinysrgb&dpr=1',
                'https://images.pexels.com/photos/227517/pexels-photo-227517.jpeg?auto=compress&cs=tinysrgb&dpr=1',
                'https://images.pexels.com/photos/531602/pexels-photo-531602.jpeg?auto=compress&cs=tinysrgb&dpr=2',
                'https://images.pexels.com/photos/1796736/pexels-photo-1796736.jpeg?auto=compress&cs=tinysrgb&dpr=2'];
                var randomNumber = Math.floor(Math.random() * images.length);
                var bgImg = 'url(' + images[randomNumber] + ')';
                $('body').css({'background':bgImg, 'background-size':'cover', });
            });
            //Info Compiler Code
            function validateForm() {
            var x = document.forms["myForm"]["lintoe1"]["noun"]["verb"]["tenses1"]["isroot1"]["nonroot1"]["cases1"].value;
            if (x == "") {
                alert("Name must be filled out");
                return false;
            } else {
                alert(x);
            }
            }
            function lintoe() {
                var lintoe1=document.getElementById=("lintoe1");
                var noun=document.getElementById=("noun");
                var verb=document.getElementById=("verb");
                var tenses1=document.getElementById=("tenses1");
                var isroot1=document.getElementById=("isroot1");
                var nonroot1=document.getElementById=("nonroot1");
                var cases1=document.getElementById=("cases1");
                alert(lintoe1+noun+verb+tenses1+isroot1+nonroot1+cases1);
                var lintoecomplete=document.getElementById=("lintoecomplete").innerHTML=("");
            }
        </script>
		<style>
            @import url('https://fonts.googleapis.com/css?family=Krub:500');
            html, body {
                width: 100vw;
                height: 100vh;
                margin: 0;
                padding: 0;
                overflow-x: hidden; 
                max-width: 100%;
            }
            body { 
                /* Background */
                background: no-repeat center center fixed; 
                background-size: cover;
                background-repeat: no-repeat;
                width: 100vw;
                height: 100vh;
                font-family: Krub, Arial, Helvetica, sans-serif;
            }
            @-webkit-keyframes animation11 {
                0% {width: 100%;}
                100% {width: 0%;}
            }
            @-moz-keyframes animation11 {
                0% {width: 100%;}
                100% {width: 0%;}
            }
            @-o-keyframes animation11 {
                0% {width: 100%;}
                100% {width: 0%;}
            }
            @keyframes animation11 {
                0% {width: 100%;}
                100% {width: 0%;}
            }
            #animation1 {
                -webkit-animation: animation11 5s infinite ease-in-out both alternate-reverse;
                -moz-animation: animation11 5s infinite ease-in-out both alternate-reverse;
                -o-animation: animation11 5s infinite ease-in-out both alternate-reverse;
                animation: animation11 5s infinite ease-in-out both alternate-reverse;
            }
            .jumbotron {
                border-radius: 0px;
                background-color: rgb(255,255,255,0.25);
                height: auto;
                padding-top: 10vh;
                width: 100vw;
            }
            .col-sm {
                border-radius: 30px;
                background-color: rgb(255,255,255,0.75);
                border-left: 6px solid rgb(0,0,0,0.25);
            }
            .navigationbar {
                background-color:rgb(0,0,0,0.9);
                color: white; 
                margin-top: -5.8vh;
            }
            .tab-content {padding: 10vh 10vw 10vh 10vw;}
            .whitething {color: white;}
        </style>
        <link rel="icon" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSsBP3sbu95lAKZwOv6AfvsLWfU_f62LMPucDUgxIh0Yswcp4wopQ:https://comps.canstockphoto.com/golden-gladiator-helmet-logo-image_csp50693170.jpg" type="image/x-icon"/>
        <link rel="shortcut icon" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSsBP3sbu95lAKZwOv6AfvsLWfU_f62LMPucDUgxIh0Yswcp4wopQ:https://comps.canstockphoto.com/golden-gladiator-helmet-logo-image_csp50693170.jpg" type="image/x-icon"/>
        <title>Latin Translator / Conjugator</title>
    </head>
    <body>
        <div class="jumbotron text-center">
            <i>
                <h1>Latin Translator / Conjugator</h1>
                <br>
                <p>Fill in the fields to find translated / conjugated verb or noun.</p>
                <br>
                <hr id="animation1">
                <br>
            </i>
            <div class="container">
                <div class="row">
                    <div class="col-sm">
                        <form name="myForm" onsubmit="return validateForm()" method="post">
                            <br>
                            <h3><i>Latin Into English</i></h3>
                            <hr>
                            <form>
                                <div class="form-group">
                                    <p>Word Input</p>
                                    <input type="text" class="form-control" name="lintoe1" placeholder="Enter Word Here">
                                </div>
                            </form>
                            <hr>
                            <p>Is this word a Noun or a Verb?</p>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="noun" value="option1">
                                <label class="form-check-label" for="noun">Noun</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="verb" value="option2">
                                <label class="form-check-label" for="verb">Verb</label>
                            </div>
                            <hr>
                            <p>Select Tense.</p>
                            <div class="dropdown mr-1">
                                <button class="btn btn-dark btn-block dropdown-toggle" id="tenses10" data-toggle="dropdown" aria-expanded="false">Tenses</button>
                                <div class="dropdown-menu" aria-labelledby="tenses10" name="tenses1">
                                    <a class="dropdown-item" href="#">Imperfect</a>
                                    <a class="dropdown-item" href="#">Perfect</a>
                                    <a class="dropdown-item" href="#">Present</a>
                                    <a class="dropdown-item" href="#">Future</a>
                                    <a class="dropdown-item" href="#">Imperative</a>
                                </div>
                            </div>
                            <hr>
                            <p>Is this the root of the word? If not, give root.</p>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <div class="input-group-text">
                                        <input class="form-check-input" type="checkbox" name="isroot1">
                                        <label class="form-check-label" for="isroot1">This is the root.</label>
                                    </div>
                                </div>
                                <input type="text" class="form-control" name="nonroot1">
                            </div>
                            <hr>
                            <p>If word is noun, give case.</p>
                            <div class="dropdown mr-1">
                                <button class="btn btn-secondary btn-block dropdown-toggle" id="cases10" data-toggle="dropdown" aria-expanded="false">Cases</button>
                                <div class="dropdown-menu" aria-labelledby="cases10" name="cases1">
                                    <a class="dropdown-item" href="#">Nominative</a>
                                    <a class="dropdown-item" href="#">Accusative</a>
                                    <a class="dropdown-item" href="#">Genetive</a>
                                    <a class="dropdown-item" href="#">Dative</a>
                                    <a class="dropdown-item" href="#">Ablative</a>
                                    <a class="dropdown-item" href="#">Not a Verb</a>
                                </div>
                            </div>
                            <hr>
                            <button class="btn btn-block btn-outline-dark" type="submit" value="Submit">Confirm</button>
                        </form>
                        <hr>
                        <div id="accordion">
                            <div class="card">
                                <div class="card-header" id="headingOne">
                                    <p class="mb-0"><button class="btn btn-link" data-toggle="collapse" data-target="#lintoejs" aria-controls="lintoejs" id="lintoecomplete">Answer</button></p>
                                </div>
                                <div id="lintoejs" class="collapse" data-parent="#accordion">
                                    <div class="card-body">
                                        <p>Please finish completing your forms.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br><br>
                    </div>

Единственными важными частями являются

function validateForm() {
            var x = document.forms["myForm"]["lintoe1"]["noun"]["verb"]["tenses1"]["isroot1"]["nonroot1"]["cases1"].value;
            if (x == "") {
                alert("Name must be filled out");
                return false;
            } else {
                alert(x);
            }
            }
            function lintoe() {
                var lintoe1=document.getElementById=("lintoe1");
                var noun=document.getElementById=("noun");
                var verb=document.getElementById=("verb");
                var tenses1=document.getElementById=("tenses1");
                var isroot1=document.getElementById=("isroot1");
                var nonroot1=document.getElementById=("nonroot1");
                var cases1=document.getElementById=("cases1");
                alert(lintoe1+noun+verb+tenses1+isroot1+nonroot1+cases1);
                var lintoecomplete=document.getElementById=("lintoecomplete").innerHTML=("");
            }

(для пояснения, функция lintoe () работает только тогда, когда все имена заменены на идентификаторы, а кнопка имеет функцию onclick, которая возвращает ссылку на lintoe ()):

<div class="container">
                <div class="row">
                    <div class="col-sm">
                        <form name="myForm" onsubmit="return validateForm()" method="post">
                            <br>
                            <h3><i>Latin Into English</i></h3>
                            <hr>
                            <form>
                                <div class="form-group">
                                    <p>Word Input</p>
                                    <input type="text" class="form-control" name="lintoe1" placeholder="Enter Word Here">
                                </div>
                            </form>
                            <hr>
                            <p>Is this word a Noun or a Verb?</p>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="noun" value="option1">
                                <label class="form-check-label" for="noun">Noun</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="verb" value="option2">
                                <label class="form-check-label" for="verb">Verb</label>
                            </div>
                            <hr>
                            <p>Select Tense.</p>
                            <div class="dropdown mr-1">
                                <button class="btn btn-dark btn-block dropdown-toggle" id="tenses10" data-toggle="dropdown" aria-expanded="false">Tenses</button>
                                <div class="dropdown-menu" aria-labelledby="tenses10" name="tenses1">
                                    <a class="dropdown-item" href="#">Imperfect</a>
                                    <a class="dropdown-item" href="#">Perfect</a>
                                    <a class="dropdown-item" href="#">Present</a>
                                    <a class="dropdown-item" href="#">Future</a>
                                    <a class="dropdown-item" href="#">Imperative</a>
                                </div>
                            </div>
                            <hr>
                            <p>Is this the root of the word? If not, give root.</p>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <div class="input-group-text">
                                        <input class="form-check-input" type="checkbox" name="isroot1">
                                        <label class="form-check-label" for="isroot1">This is the root.</label>
                                    </div>
                                </div>
                                <input type="text" class="form-control" name="nonroot1">
                            </div>
                            <hr>
                            <p>If word is noun, give case.</p>
                            <div class="dropdown mr-1">
                                <button class="btn btn-secondary btn-block dropdown-toggle" id="cases10" data-toggle="dropdown" aria-expanded="false">Cases</button>
                                <div class="dropdown-menu" aria-labelledby="cases10" name="cases1">
                                    <a class="dropdown-item" href="#">Nominative</a>
                                    <a class="dropdown-item" href="#">Accusative</a>
                                    <a class="dropdown-item" href="#">Genetive</a>
                                    <a class="dropdown-item" href="#">Dative</a>
                                    <a class="dropdown-item" href="#">Ablative</a>
                                    <a class="dropdown-item" href="#">Not a Verb</a>
                                </div>
                            </div>
                            <hr>
                            <button class="btn btn-block btn-outline-dark" type="submit" value="Submit">Confirm</button>
                        </form>
                        <hr>
                        <div id="accordion">
                            <div class="card">
                                <div class="card-header" id="headingOne">
                                    <p class="mb-0"><button class="btn btn-link" data-toggle="collapse" data-target="#lintoejs" aria-controls="lintoejs" id="lintoecomplete">Answer</button></p>
                                </div>
                                <div id="lintoejs" class="collapse" data-parent="#accordion">
                                    <div class="card-body">
                                        <p>Please finish completing your forms.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br><br>
                    </div>

Извините, если мне кажется, что я не знаю, что делаю, но я серьезно не знаю ...

1 Ответ

0 голосов
/ 07 февраля 2019

Прежде всего,

document.forms["myForm"]["lintoe1"]["noun"]["verb"]["tenses1"]["isroot1"]["nonroot1"]["cases1"].value

не будет работать.Вам нужно сделать что-то вроде этого:

document.forms["myForm"]["lintoe1"].value
document.forms["myForm"]["noun"].value
document.forms["myForm"]["verb"].value

В вашем примере, forms["myForm"]["lintoe1"]["noun"] попытается получить имя "noun" из "lintoe1", но они находятся на одном уровне.Другими словами, внутри "lintoe1" нет элемента "noun".

Еще одна вещь, которую я заметил, -

var lintoe1=document.getElementById=("lintoe1");

тоже не будет работать, вы должны удалить второй =:

var lintoe1=document.getElementById("lintoe1");

Кроме того, вам не нужны эти обе строки:

var x = document.forms["myForm"]["lintoe1"].value;

и

var lintoe1=document.getElementById("lintoe1").value;

Они эквивалентны, и вы получаете точныйтакое же значение.Основное отличие состоит в том, что когда вы используете getElementById, Javascript будет проходить через весь DOM и все его элементы / элементы, чтобы найти искомый элемент.Используя document.forms["myForm"], вам лучше указать, какой элемент должен искать Javascript (form), и его имя (myForm).

Лучше validateForm() будет:

function validateForm() {
    var lintoe1=document.getElementById("lintoe1").value;
    var noun=document.getElementById("noun").value;
    var verb=document.getElementById("verb").value;
    [ more code here ];

    if (lintoe1 && noun && verb && ....) {
        alert("All fields must be filled");
        return false;
    } else {
        alert(x);
    }
}

Вышеуказанное работает, потому что document.getElementById("lintoe1").value вернет либо значение, если оно существует, либо undefined, если его нет.

if (lintoe1 && noun && verb && ....) вернет true, если все значениязадавать;если любой из них равен undefined, он вернет false.

Обратите внимание, что существуют более эффективные способы проверки формы, особенно с использованием других библиотек.

Также, как прокомментировал Энди, у вас не должно быть вложенных форм :

4.10.3 Элемент form

Модель содержимого:

Содержимое потока, но без потомков элементов формы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...