В массив помещаются данные всех Checkbox, а не только помеченных.
Всем Доброго времени суток!
Я новичок в веб-программировании, поэтому многого не понимаю! Столкнулся с такой проблемой, при нажатии Submit, в Json строку уходят все значения чекбоксов, даже те которые не были отмечены. Я знаю что надо использовать IF, ELSE команды, но не получается сделать так чтобы в массиве указывались только те варианты, которые были помечены, Помогите Пожалуйста!!:help: Вот полный HTML код со скриптом внутри :
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title>Form</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<div class="form-5 form-group">
<label for="Question" class="question">Вопрос:</label>
<input type="text" class="form-control" id="validationTextarea" placeholder="Какие языки программирования Вы используете?"> </div>
<div class="custom-control custom-checkbox form-control form-6">
<input type="checkbox" class="custom-control-input" id="CustomCheck1" value="c#">
<label class="custom-control-label" for=>C#</label>
</div>
<div class="custom-control custom-checkbox form-control form-7">
<input type="checkbox" class="custom-control-input" id="CustomCheck2" value="c++" >
<label class="custom-control-label" for="CustomCheck2">C++</label>
</div>
<div class="custom-control custom-checkbox form-control form-8">
<input type="checkbox" class="custom-control-input" id="CustomCheck3" value="asp.net" >
<label class="custom-control-label" for="CustomCheck3">ASP.NET</label>
</div>
<div class="custom-control custom-checkbox form-control form-9" >
<input type="checkbox" class="custom-control-input" id="CustomCheck4" value="php" >
<label class="custom-control-label" for="CustomCheck3">PHP</label><br>
</div><br>
<div class="form-5 form-group">
<label for="Question" class="question">Вопрос:</label>
<input type="text" class="form-control" id="validationTextarea" placeholder="С какими СУБД Вам приходилось работать?"> </div>
<div class="custom-control custom-checkbox form-control form-6">
<input type="checkbox" class="custom-control-input" id="CustomCheck5" value="mssql">
<label class="custom-control-label" for="CustomCheck5">MS-SQL Server 2000-2012/T-SQL</label>
</div>
<div class="custom-control custom-checkbox form-control form-7">
<input type="checkbox" class="custom-control-input" id="CustomCheck6" value="oracle" >
<label class="custom-control-label" for="CustomCheck6">Oracle</label>
</div>
<div class="custom-control custom-checkbox form-control form-8">
<input type="checkbox" class="custom-control-input" id="CustomCheck7" value="mysql" >
<label class="custom-control-label" for="CustomCheck7">MySQL</label>
</div>
<div class="custom-control custom-checkbox form-control form-9" >
<input type="checkbox" class="custom-control-input" id="CustomCheck8" value="postgresql" >
<label class="custom-control-label" for="CustomCheck8">PostgreSQL</label><br>
</div><br>
<div class="form-5 form-group">
<label for="Question" class="question">Вопрос:</label>
<input type="text" class="form-control" id="validationTextarea" placeholder="С какими системами контроля версий Вы работали?"> </div>
<div class="custom-control custom-checkbox form-control form-6">
<input type="checkbox" class="custom-control-input" id="CustomCheck9" value="git">
<label class="custom-control-label" for="CustomCheck9">GIT</label>
</div>
<div class="custom-control custom-checkbox form-control form-7">
<input type="checkbox" class="custom-control-input" id="CustomCheck10" value="cvs" >
<label class="custom-control-label" for="CustomCheck10">CVS</label>
</div>
<div class="custom-control custom-checkbox form-control form-8">
<input type="checkbox" class="custom-control-input" id="CustomCheck11" value="subversion" >
<label class="custom-control-label" for="CustomCheck11">Subverion</label>
</div>
<div class="custom-control custom-checkbox form-control form-9" >
<input type="checkbox" class="custom-control-input" id="CustomCheck12" value="mercurial" >
<label class="custom-control-label" for="CustomCheck12">Mercurial</label><br>
</div><br>
<input type="submit" value="Далее" class="btn btn-primary" onclick="convert_to_json()">
</form>
</body>
<script>
function convert_to_json()
{
results = {
lang_list: [CustomCheck1.value,
CustomCheck2.value,
CustomCheck3.value,
CustomCheck4.value],
subd_list: [CustomCheck5.value,
CustomCheck6.value,
CustomCheck7.value,
CustomCheck8.value],
SystemControl_list: [CustomCheck9.value,
CustomCheck10.value,
CustomCheck11.value,
CustomCheck12.value]
};
let json = JSON.stringify(results);
alert("results: " + json);
}
</script>
|
Малик,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Так сойдет? Извиняюсь, не был в курсе таких вещей, так как первый раз пользуюсь данным форумом!
|
Малик,
function convert_to_json() {
const checArr = arr => arr.filter(({
checked
}) => checked).map(({
value
}) => value);
results = {
lang_list: checArr([CustomCheck1,
CustomCheck2,
CustomCheck3,
CustomCheck4
]),
subd_list: checArr([CustomCheck5,
CustomCheck6,
CustomCheck7,
CustomCheck8
]),
SystemControl_list: checArr([CustomCheck9,
CustomCheck10,
CustomCheck11,
CustomCheck12
])
};
let json = JSON.stringify(results);
alert("results: " + json);
}
|
От всей души благодарю!
|
Малик,
сделайте вопросы отдельными блоками, оберните в div с названием группы ответы и вопрос. код будет проще. |
| Часовой пояс GMT +3, время: 18:20. |