Get values from input-group using jquery-CodePudding

I am needing to get the two input values within the input group, and would like to know how best to do this with jquery.

<form id="mgscall" name="contactform" data-toggle="validator">
    <div >
        <div  id="fld1">
            <input type="text" id="phonecall1"  placeholder="Contact" aria-label="Username" alt="1">
            <span ><i ></i></span>
            <span ><i ></i></span>                                            
            <input type="text"  placeholder="Ex:  (000) 000-00-00" alt="1">
                <div >
                <input type="checkbox" aria-label="Checkbox for following text input">
                </div>                                             
        </div>
    </div>
    <div >
        <div  id="fld1">
            <input type="text" id="phonecall2"  placeholder="Contact" aria-label="Username" alt="2">
            <span ><i ></i></span>
            <span ><i ></i></span>                                            
            <input type="text"  placeholder="Ex:  (000) 000-00-00" alt="2">
                <div >
                <input type="checkbox" aria-label="Checkbox for following text input">
                </div>                                             
        </div>
    </div>
</form>

CodePudding user response：

checkout this snippet.

        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 >
            <div  id="fld1">
                <input type="text" id="phonecall1"  placeholder="Contact" aria-label="Username"
                    alt="1">
                <span ><i ></i></span>
                <span ><i ></i></span>
                <input type="text"  placeholder="Ex:  (000) 000-00-00" alt="1">
                <div >
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </div>
            </div>
        </div>
        <div >
            <div  id="fld1">
                <input type="text" id="phonecall2"  placeholder="Contact" aria-label="Username"
                    alt="2">
                <span ><i ></i></span>
                <span ><i ></i></span>
                <input type="text"  placeholder="Ex:  (000) 000-00-00" alt="2">
                <div >
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </div>
            </div>
        </div>
    </form>

CodePudding user response：

You can use $(e).find(".tvc") to get the input values:

$(".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 >
        <div  id="fld1">
            <input type="text" id="phonecall1"  placeholder="Contact" aria-label="Username" alt="1">
            <span ><i ></i></span>
            <span ><i ></i></span>                                            
            <input type="text"  placeholder="Ex:  (000) 000-00-00" alt="1">
                <div >
                <input type="checkbox" aria-label="Checkbox for following text input">
                </div>                                             
        </div>
    </div>
    <div >
        <div  id="fld1">
            <input type="text" id="phonecall2"  placeholder="Contact" aria-label="Username" alt="2">
            <span ><i ></i></span>
            <span ><i ></i></span>                                            
            <input type="text"  placeholder="Ex:  (000) 000-00-00" alt="2">
                <div >
                <input type="checkbox" aria-label="Checkbox for following text input">
                </div>                                             
        </div>
    </div>
    <input type="button"  value="Get Values"/>
</form>