почему выбор div не работает должным образом?

Question

Ниже приведен мой код, в котором я пытаюсь отобразить все элементы внутри div. Но я приземлился с неожиданным выходом.

Index.php : -

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="jspage.js"></script>
    </head>
    <body>
        <div class="tab-pane fade in active" id="step1">
            <fieldset>
                <legend><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;Personal Details</legend>
                <div class="form-inline">
                    &nbsp;&nbsp;&nbsp;
                    <label for="stutitle">Title</label>
                    <span style="color: red; font-weight:bold;"><big>*</big></span>
                    <select id=" Title" name="Title" class="imp form-control" >
                        <option value="">Please select...</option>
                        <option value="Mr">Mr</option>
                        <option value="Miss">Miss</option>
                   </select>
                    &nbsp;&nbsp;&nbsp;
                    <label for="stufname">Firstname</label>
                    <span style="color: red; font-weight:bold;"><big>*</big></span>
                    <input id=" Firstname"  name="First Name" placeholder="First name" class="imp form-control" >
                    &nbsp;&nbsp;&nbsp;  
                    <label for="stusname">Surname</label>
                    <span style="color: red; font-weight:bold;"><big>*</big></span>
                    <input id=" Surname" name="Surname" placeholder="Surname" class="imp form-control" >
                    <br><br>
                </div>
            </fieldset>
        </div>
        <input type="submit" value="submit" name="app_submit" />
    </body>
</html>

Jspage.js : -

$(document).ready(function () {

    $('input[name="app_submit"]').click(function () {
        $('div[id="step1"] input,select').each(function () {
            console.log("Step1: "+$(this).attr('name'));

        });
        $('div[id="step2"] input,select').each(function () {
            console.log("Step2: "+$(this).attr('name'));

        });
    });
});

Здесь я получаю следующий вывод:

Step1: Title
Step1: First Name
Step1: Surname
Step2: Title

Div с id как Step2 даже не существует, но он дает мне вывод для шага 2. Поскольку я новичок в этом, я не могу понять, что я делаю неправильно. Может ли кто-нибудь направить меня, если процедура выполняется правильно или нет? И в чем здесь моя ошибка? Ваш вклад будет большой помощью. Заранее спасибо.

jquery html

2

Devanshi 3 Сен 2017 в 09:55

Answer 1

Используемый вами селектор ищет все input из div[id="step1"] И всех select документа.

То же самое для второго each с шагом 2.

Вы должны быть конкретны ... Используемая кома позволяет второй селектор. Но это считается еще одним совершенно новым селектором, а не «вариантом» первого.

Так что попробуйте это вместо:

$(document).ready(function () {

    $('input[name="app_submit"]').click(function () {
        $('div[id="step1"] input, div[id="step1"] select').each(function () {
            console.log("Step1: "+$(this).attr('name'));

        });
        $('div[id="step2"] input, div[id="step2"] select').each(function () {
            console.log("Step2: "+$(this).attr('name'));

        });
    });
});

4

Louys Patrice Bessette 3 Сен 2017 в 07:07

Answer 2

Ваш синтаксис селектора является актуальной проблемой. Вы используете запятую перед выбором. вместо использования $('div[id="step1"] input,select')

Вы должны использовать $('div[id="step1"] input, div[id="step1"] select')

0

Deepak Kumar 3 Сен 2017 в 15:45

Answer 3

Вместо того, чтобы использовать div, я предлагаю сделать это внутри формы.

$(document).ready(function () {
    $('#step1').submit(function(e){
        e.preventDefault(); //** prevent normal form submission and page reload

        $('#step1 input,select').each(function () {
            console.log("Step1: "+$(this).attr('name'));
        });
    });
});

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="jspage.js"></script>
</head>
<body>
    <form method="POST" id="step1">
        <div class="tab-pane fade in active">
            <fieldset>
                <legend><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;Personal Details</legend>
                <div class="form-inline">
                    &nbsp;&nbsp;&nbsp;

                    <label for="stutitle">Title</label>
                    <span style="color: red; font-weight:bold;"><big>*</big></span>
                    <select id="Title" name="Title" class="imp form-control" >
                        <option value="">Please select...</option>
                        <option value="Mr">Mr</option>
                        <option value="Miss">Miss</option>
                   </select>
                    &nbsp;&nbsp;&nbsp;

                    <label for="stufname">Firstname</label>
                    <span style="color: red; font-weight:bold;"><big>*</big></span>
                    <input id="Firstname"  name="First Name" placeholder="First name" class="imp form-control" >
                    &nbsp;&nbsp;&nbsp;  

                    <label for="stusname">Surname</label>
                    <span style="color: red; font-weight:bold;"><big>*</big></span>
                    <input id="Surname" name="Surname" placeholder="Surname" class="imp form-control" >
                    <br><br>
                </div>
            </fieldset>
        </div>
        <input type="submit" value="submit" name="app_submit" />
    </form>
</body>
</html>

0

Sreejith BS 3 Сен 2017 в 07:19

Answer 4

Я вижу, что вы пытались напечатать атрибут с именем step2, используя javascript. Вам нужно закомментировать или удалить этот конкретный код, чтобы избавиться от него.

// $('div[id="step2"] input,select').each(function () {
//     console.log("Step2: "+$(this).attr('name'));
// });

0

Varma 3 Сен 2017 в 07:11

почему выбор div не работает должным образом?

4 ответа

Похожие вопросы

Новые вопросы

jquery