我在html中嵌套了输入,我试图获得它的价值。我尝试过很多没有运气的方法。 我想在我的javascript文件中将所有输入的值转换为不同的变量。
<html lang="en">
<head>
<title>HotGym</title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-language" content="he">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/master.css">
<link rel="stylesheet" type="text/css" href="css/addTrainee.css">
<link rel="shortcut icon" href="imgs/icon.png" type="image/x-icon">
</head>
<body>
<div class="addNav"></div>
<div class="pages">
<div class="page">
<h2 class="headline">Adding Trainee</h2>
<div class="add_trainee">
<form>
<div class="inp">
<p>Full name</p>
<input spaceholder="please enter fullname" type="text" class="fullName">
</div>
<div class="inp">
<p>Gender</p>
<input spaceholder="please enter" type="text" class="gender">
</div>
<div class="inp">
<p>Age</p>
<input require spaceholder="please enter fullname" type="number" class="age">
</div>
<div class="inp">
<p>Phone number</p>
<input spaceholder="please enter fullname" type="text" class="phoneNumber">
</div>
<div class="inp">
<p>Adress</p>
<input spaceholder="please enter fullname" type="text" class="adress">
</div>
<div class="inp">
<p>Medical assurance Date</p>
<input spaceholder="please enter fullname" type="date" class="dateMedicalAssuranceEnd">
</div>
<div class="inp">
<p>Date start memebership</p>
<input spaceholder="please enter fullname" type="date" class="dateMembershipStart">
</div>
<div class="inp">
<p>Date end memebership</p>
<input spaceholder="please enter fullname" type="date" class="dateMembershipEnd">
</div>
<div class="inp">
<input class="addTrainee" type="submit" name="submit" value="save">
</div>
</form>
</div>
<script src="jquery/dist/jquery.js"></script>
<script src="js/add-trainee-main.js" type="module"></script>
</body>
</html>
我的jquery看起来像这样: 'addBtn'是正确的,我从这里尝试了很多方法:
handleAddTrainee() {
// console.log(this);
let addBtn = $('.addTrainee');
// console.log(addBtn)
debugger
// $('.addTrainee').on('click', () => {
// let $traineeForm = $(this).closest('.trainee-from') // need to know the way you orginized the html.
// cetch trainee data
//----
let fullName = addBtn.closest('.add_trainee').find('.inp').find('input.fullName').val();
let gender = $(this).closest('.gender').val();
let age = $(this).closest('.age').val();
let phoneNumber = $(this).closest('.phoneNumber').val();
let adress = $(this).closest('.adress').val();
let dateMedicalAssuranceEnd = $(this).closest('.dateMedicalAssuranceEnd').val();
let dateMembershipStart = $(this).closest('.dateMembershipStart').val();
let dateMembershipEnd = $(this).closest('.dateMembershipEnd').val();
//-----
let traineeForm = {
fullName: fullName,
gender: gender,
age: age,
phoneNumber: phoneNumber,
adress: adress,
dateMedicalAssuranceEnd: dateMedicalAssuranceEnd,
dateMembershipStart: dateMembershipStart,
}
this.gymRepo.addTrainee(traineeForm).then(() => {
alert("new trainee as been saved");
})
// })
}
答案 0 :(得分:0)
你正在使用jquery所以你为什么不使用像这样的东西
$(':input').each(function(){
if($(this).hasClass('addTrainee'))
return;
console.log($(this).val() );
});
这将获取除保存按钮
之外的所有输入的值答案 1 :(得分:0)
我会用@ aa-Ahmed-aa回答一个更完整的例子。
const recoverValues = function() {
const values = {};
$(':input').each(function(){
if($(this).hasClass('addTrainee'))
return;
// very ugly code
values[$(this).attr('class')] = $(this).val();
});
return values;
}
这样你就可以为除了提交按钮之外的所有输入检索一个好看的json。
PS:我喜欢太空船;)