Ниже приведен мой код, в котором я пытаюсь отобразить все элементы внутри 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> Personal Details</legend>
<div class="form-inline">
<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>
<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" >
<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. Поскольку я новичок в этом, я не могу понять, что я делаю неправильно. Может ли кто-нибудь направить меня, если процедура выполняется правильно или нет? И в чем здесь моя ошибка? Ваш вклад будет большой помощью. Заранее спасибо.
4 ответа
Используемый вами селектор ищет все 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'));
});
});
});
Ваш синтаксис селектора является актуальной проблемой. Вы используете запятую перед выбором. вместо использования $('div[id="step1"] input,select')
Вы должны использовать $('div[id="step1"] input, div[id="step1"] select')
Вместо того, чтобы использовать 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> Personal Details</legend>
<div class="form-inline">
<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>
<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" >
<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>Я вижу, что вы пытались напечатать атрибут с именем step2, используя javascript. Вам нужно закомментировать или удалить этот конкретный код, чтобы избавиться от него.
// $('div[id="step2"] input,select').each(function () {
// console.log("Step2: "+$(this).attr('name'));
// });
Похожие вопросы
Новые вопросы
jquery
jQuery - это библиотека JavaScript, рассмотрите возможность добавления тега JavaScript. jQuery - это популярная кросс-браузерная библиотека JavaScript, которая облегчает прохождение Document Object Model (DOM), обработку событий, анимацию и взаимодействие AJAX, сводя к минимуму расхождения между браузерами. Вопрос с тегом jQuery должен быть связан с jQuery, поэтому jQuery должен использоваться в рассматриваемом коде, и в вопросе должны быть как минимум элементы, связанные с использованием jQuery.
En Español