Necesito obtener los dos valores de entrada dentro del grupo de entrada y me gustaría saber cuál es la mejor manera de hacerlo con 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: +(000) 000-00-00" 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: +(000) 000-00-00" alt="2"> <div class="input-group-text"> <input type="checkbox" aria-label="Checkbox for following text input"> </div> </div> </div> </form>echa un vistazo a este fragmento.
let data = {} let groups = $('form .input-group').each(function (index) { let id = $(this).attr('id'); // create field name from id and index. eg 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. eg 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: +(000) 000-00-00" 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: +(000) 000-00-00" alt="2"> <div class="input-group-text"> <input type="checkbox" aria-label="Checkbox for following text input"> </div> </div> </div> </form>Puede usar $(e).find(".tvc") para obtener los valores de entrada:
$(".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: +(000) 000-00-00" 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: +(000) 000-00-00" 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>