I am in the middle of this js from morning everytime i think it is going to be completed i get another block. What i am trying to get is the values from the different elements like some of them are <input type="text">
and others were <select>
here is my code
我每天早上都在这个js的中间,我认为它将要完成我得到另一个块。我想要得到的是来自不同元素的值,比如其中一些是而其他元素是
var eduarray = [];
$('.education-groupbox').each(function(index, el) {
eduarray[index] = [];
var s = $(this).attr('id');
//console.log();
$('#'+s+' .inputs').each(function(key, value) {
//console.log($(this).children('.seviyeoptions').val());
if(key == 1)
{
eduarray[index][key].push($(value).children('.seviyeoptions').val());
}
});
});
and here is the html part
这是html部分
<div id="education-groupbox" class="education-groupbox">
<div class="inputs col-3">
<label for="email">Seviye</label>
<select class="seviyeoptions" name="" id="">
<option value="option one"></option>
<option value="option one">Option One</option>
<option value="option two">Option Two</option>
</select>
</div>
<div class="inputs col-3">
<label for="email">Okul Adı</label>
<input type="text" name="email" />
</div>
<div class="inputs col-3">
<label for="email">Bölüm</label>
<input type="text" name="email" />
</div>
<div class="inputs col-3">
<label for="email">Mezuniyet Yılı</label>
<select class="mezuniyetoptions" name="" id="">
<option value="option one"></option>
<option value="option one">Option One</option>
<option value="option two">Option Two</option>
</select>
</div>
</div>
I want to get all the values from the all form elements which are in .inputs class block. please advice.
我想从.inputs类块中的所有表单元素中获取所有值。请指教。
2 个解决方案
#1
1
Give your div's ids, your current selector $('#'+s+' .inputs').each(function(key, value) {
won't work as there are no id
on your div which have class inputs
.
给你的div ids,你当前的选择器$('#'+ s +'。输出')。每个(函数(键,值){将不起作用,因为你的div上没有id有类输入的id。
$('#get').on('click', function () {
var eduarray = [];
$('.education-groupbox').each(function (index, el) {
eduarray[index] = [];
var s = $(this).attr('id');
//console.log();
$('#' + s + ' .inputs').each(function (key, value) {
if ($(this).find('select').length) {
eduarray[index].push($(this).find('select > option:selected').val());
}
if ($(this).find('input').length) {
eduarray[index].push($(this).find('input').val());
}
});
console.log(eduarray);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="education-groupbox" class="education-groupbox">
<div id="select" class="inputs col-3">
<label for="email">Seviye</label>
<select class="seviyeoptions" name="" id="">
<option value="option one"></option>
<option value="option one">Option One</option>
<option value="option two">Option Two</option>
</select>
</div>
<div id="input" class="inputs col-3">
<label for="email">Okul Adı</label>
<input type="text" name="email"/>
</div>
<div id="input2" class="inputs col-3">
<label for="email">Bölüm</label>
<input type="text" name="email"/>
</div>
<div id="input3" class="inputs col-3">
<label for="email">Mezuniyet Yılı</label>
<select class="mezuniyetoptions" name="" id="">
<option value="option one"></option>
<option value="option one">Option One</option>
<option value="option two">Option Two</option>
</select>
</div>
</div>
<button id="get">Get values</button>
UPDATE
You can also use an object/associative array instead of a standard array, and set the object properties with the value of the name attribute of each element.
您还可以使用对象/关联数组而不是标准数组,并使用每个元素的name属性值设置对象属性。
$('#get').on('click', function () {
var eduarray = {};
$('.education-groupbox').each(function (index, el) {
var s = $(this).attr('id');
//console.log();
$('#' + s + ' .inputs').each(function (key, value) {
if ($(this).find('select').length) {
eduarray[$(this).find('select').attr('name')] = ($(this).find('select > option:selected').val());
}
if ($(this).find('input').length) {
eduarray[$(this).find('input').attr('name')] = ($(this).find('input').val());
}
});
console.log(eduarray);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="education-groupbox" class="education-groupbox">
<div id="select" class="inputs col-3">
<label for="email">Seviye</label>
<select class="seviyeoptions" name="seviyeoptions" id="">
<option value="option one"></option>
<option value="option one">Option One</option>
<option value="option two">Option Two</option>
</select>
</div>
<div id="input" class="inputs col-3">
<label for="email">Okul Adı</label>
<input type="text" name="email"/>
</div>
<div id="input2" class="inputs col-3">
<label for="email">Bölüm</label>
<input type="text" name="email2"/>
</div>
<div id="input3" class="inputs col-3">
<label for="email">Mezuniyet Yılı</label>
<select class="mezuniyetoptions" name="mezuniyetoptions" id="">
<option value="option one"></option>
<option value="option one">Option One</option>
<option value="option two">Option Two</option>
</select>
</div>
</div>
<button id="get">Get values</button>
#2
1
Assuming that you know id of available select boxes and input fields in the template
假设您知道模板中可用选择框和输入字段的ID
Sample Code
$("button").click(function(){
var map={};
var arrayList=[];
map.selectOne=$("#selectOne").val();
map.selectTwo=$("#selectTwo").val();
map.email=$("#email").val();
arrayList.push(map);
console.info(arrayList);
console.log(map);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>selectOne</label>
<select id="selectOne">
<option value="option one">Option One</option>
<option value="option one">Option Two</option>
<option value="option two">Option Three</option>
</select>
<br>
<label>selectTwo</label>
<select id="selectTwo">
<option value="option one">Option One</option>
<option value="option one">Option Two</option>
<option value="option two">Option Three</option>
</select>
<br>
<label for="email">Email</label> <input id="email" type="text" name="email" />
<br>
<button>submit</button>
#1
1
Give your div's ids, your current selector $('#'+s+' .inputs').each(function(key, value) {
won't work as there are no id
on your div which have class inputs
.
给你的div ids,你当前的选择器$('#'+ s +'。输出')。每个(函数(键,值){将不起作用,因为你的div上没有id有类输入的id。
$('#get').on('click', function () {
var eduarray = [];
$('.education-groupbox').each(function (index, el) {
eduarray[index] = [];
var s = $(this).attr('id');
//console.log();
$('#' + s + ' .inputs').each(function (key, value) {
if ($(this).find('select').length) {
eduarray[index].push($(this).find('select > option:selected').val());
}
if ($(this).find('input').length) {
eduarray[index].push($(this).find('input').val());
}
});
console.log(eduarray);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="education-groupbox" class="education-groupbox">
<div id="select" class="inputs col-3">
<label for="email">Seviye</label>
<select class="seviyeoptions" name="" id="">
<option value="option one"></option>
<option value="option one">Option One</option>
<option value="option two">Option Two</option>
</select>
</div>
<div id="input" class="inputs col-3">
<label for="email">Okul Adı</label>
<input type="text" name="email"/>
</div>
<div id="input2" class="inputs col-3">
<label for="email">Bölüm</label>
<input type="text" name="email"/>
</div>
<div id="input3" class="inputs col-3">
<label for="email">Mezuniyet Yılı</label>
<select class="mezuniyetoptions" name="" id="">
<option value="option one"></option>
<option value="option one">Option One</option>
<option value="option two">Option Two</option>
</select>
</div>
</div>
<button id="get">Get values</button>
UPDATE
You can also use an object/associative array instead of a standard array, and set the object properties with the value of the name attribute of each element.
您还可以使用对象/关联数组而不是标准数组,并使用每个元素的name属性值设置对象属性。
$('#get').on('click', function () {
var eduarray = {};
$('.education-groupbox').each(function (index, el) {
var s = $(this).attr('id');
//console.log();
$('#' + s + ' .inputs').each(function (key, value) {
if ($(this).find('select').length) {
eduarray[$(this).find('select').attr('name')] = ($(this).find('select > option:selected').val());
}
if ($(this).find('input').length) {
eduarray[$(this).find('input').attr('name')] = ($(this).find('input').val());
}
});
console.log(eduarray);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="education-groupbox" class="education-groupbox">
<div id="select" class="inputs col-3">
<label for="email">Seviye</label>
<select class="seviyeoptions" name="seviyeoptions" id="">
<option value="option one"></option>
<option value="option one">Option One</option>
<option value="option two">Option Two</option>
</select>
</div>
<div id="input" class="inputs col-3">
<label for="email">Okul Adı</label>
<input type="text" name="email"/>
</div>
<div id="input2" class="inputs col-3">
<label for="email">Bölüm</label>
<input type="text" name="email2"/>
</div>
<div id="input3" class="inputs col-3">
<label for="email">Mezuniyet Yılı</label>
<select class="mezuniyetoptions" name="mezuniyetoptions" id="">
<option value="option one"></option>
<option value="option one">Option One</option>
<option value="option two">Option Two</option>
</select>
</div>
</div>
<button id="get">Get values</button>
#2
1
Assuming that you know id of available select boxes and input fields in the template
假设您知道模板中可用选择框和输入字段的ID
Sample Code
$("button").click(function(){
var map={};
var arrayList=[];
map.selectOne=$("#selectOne").val();
map.selectTwo=$("#selectTwo").val();
map.email=$("#email").val();
arrayList.push(map);
console.info(arrayList);
console.log(map);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>selectOne</label>
<select id="selectOne">
<option value="option one">Option One</option>
<option value="option one">Option Two</option>
<option value="option two">Option Three</option>
</select>
<br>
<label>selectTwo</label>
<select id="selectTwo">
<option value="option one">Option One</option>
<option value="option one">Option Two</option>
<option value="option two">Option Three</option>
</select>
<br>
<label for="email">Email</label> <input id="email" type="text" name="email" />
<br>
<button>submit</button>