使用jquery从input-group获取值

Question

我需要得到输入组内的两个输入值，并想知道如何最好地做到这一点与jquery

<form id="mgscall" name="contactform" data-toggle="validator">
<div class="mb-3">
<div class="input-group" id="fld1">
<input type="text" id="phonecall1" class="form-control tvc" placeholder="Contact" aria-label="Username" alt="1">
<span class="input-group-text"><i class="mdi mdi-exclamation"></i></span>
<span class="input-group-text"><i class="mdi mdi-truck-delivery"></i></span>                                            
<input type="text" class="form-control phone-number tvp" placeholder="Ex: +[phone]" alt="1">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>                                             
</div>
</div>
<div class="mb-3">
<div class="input-group" id="fld1">
<input type="text" id="phonecall2" class="form-control tvc" placeholder="Contact" aria-label="Username" alt="2">
<span class="input-group-text"><i class="mdi mdi-exclamation"></i></span>
<span class="input-group-text"><i class="mdi mdi-truck-delivery"></i></span>                                            
<input type="text" class="form-control phone-number tvp" placeholder="Ex: +[phone]" alt="2">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>                                             
</div>
</div>
</form>

Answer 1

结帐。

let data = {}
let groups = $('form .input-group').each(function (index) {
let id = $(this).attr('id');
// create field name from id and index. e.g. fld1_1
const field = `${id}_${index+1}`;
// find required input elements
$(this).find('input').not(':input[type=checkbox]').each(function (i) {
// get the last class name. e.g. tvc/tvp
const inputType = $(this).attr('class').split(' ').pop();
data[field] = {
...data[field],  // spread current items
[inputType] : $(this).val()  // set new input value
}
})
});
console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="mgscall" name="contactform" data-toggle="validator">
<div class="mb-3">
<div class="input-group" id="fld1">
<input type="text" id="phonecall1" class="form-control tvc" placeholder="Contact" aria-label="Username"
alt="1">
<span class="input-group-text"><i class="mdi mdi-exclamation"></i></span>
<span class="input-group-text"><i class="mdi mdi-truck-delivery"></i></span>
<input type="text" class="form-control phone-number tvp" placeholder="Ex: +[phone]" alt="1">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>
</div>
</div>
<div class="mb-3">
<div class="input-group" id="fld1">
<input type="text" id="phonecall2" class="form-control tvc" placeholder="Contact" aria-label="Username"
alt="2">
<span class="input-group-text"><i class="mdi mdi-exclamation"></i></span>
<span class="input-group-text"><i class="mdi mdi-truck-delivery"></i></span>
<input type="text" class="form-control phone-number tvp" placeholder="Ex: +[phone]" alt="2">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>
</div>
</div>
</form>

Answer 2

您可以使用$(e).find(".tvc")来获取输入值:

$(".btnGet").click(function(){
var values = [];
$("#mgscall .input-group").each(function(i,e){
var tvc = $(e).find(".tvc").val();
var tvp = $(e).find(".tvp").val();
values.push({"tvc":tvc,"tvp":tvp});
});
console.log(values);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="mgscall" name="contactform" data-toggle="validator">
<div class="mb-3">
<div class="input-group" id="fld1">
<input type="text" id="phonecall1" class="form-control tvc" placeholder="Contact" aria-label="Username" alt="1">
<span class="input-group-text"><i class="mdi mdi-exclamation"></i></span>
<span class="input-group-text"><i class="mdi mdi-truck-delivery"></i></span>                                            
<input type="text" class="form-control phone-number tvp" placeholder="Ex: +[phone]" alt="1">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>                                             
</div>
</div>
<div class="mb-3">
<div class="input-group" id="fld1">
<input type="text" id="phonecall2" class="form-control tvc" placeholder="Contact" aria-label="Username" alt="2">
<span class="input-group-text"><i class="mdi mdi-exclamation"></i></span>
<span class="input-group-text"><i class="mdi mdi-truck-delivery"></i></span>                                            
<input type="text" class="form-control phone-number tvp" placeholder="Ex: +[phone]" alt="2">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>                                             
</div>
</div>
<input type="button" class="btnGet" value="Get Values"/>
</form>