JQuery Concat All Input Values

**dday9** · Mar 3rd, 2016, 03:25 PM

Basically I have 0 or more <div> elements that have the following markup:

HTML Code:

<div>
  <header>
    <input class="btnClose" type="button" value="X" />
    <label> New Driver</label>
  </header>
  <main>
    <label>* Full Name</label>
    <input class="txtName" required="required" type="text" />
    <label>* Date of Birth</label>
    <input class="txtDOB" required="required" type="date" />
    <label>License</label>
    <input class="txtLicense" type="text" />
  </main>
</div>

What I'm wanting to do is return a string of each <div> with the label, followed by the next input's value on their own separate line. So if I have 2 <div> and the values are:
David D.
08/12/1991
ABC123

Shaggy H.
01/01/2016
empty

Then the string returned would be:
Full Name: David D.
Date of Birth: 08/12/1991
License: ABC123

Full Name: Shaggy H.
Date of Birth: 01/01/2016

I don't know if it is possible to do it within a few lines or if I'm going to have to loop through each div, then loop through each label and each input.

**akhileshbc** · Jan 13th, 2017, 12:36 PM

Sorry for the late response! Was not here in the forums recently.

Anyway, this would be one way to accomplish it:

jQuery:

Code:

$(function(){
  $('#btnConcat').on('click', function(){
    var strFinalOutput = '';
    
    $('#input_div div').each(function(){      
      var n = $(this).find('main *').length / 2;
      var strOutput = '';
      for(var i = 0; i < n; i++)
      {
        var in_element = $(this).find('main input').eq(i);
        var lbl_text = $.trim( $(this).find('main label').eq(i).text().replace('*', '') );
        if( $.trim( in_element.val() ) != '' )
          strOutput += lbl_text + ': ' + $(in_element).val() + '<br>';          
      }
      
      strFinalOutput += strOutput + '<br><br>';
    });
    
    $('#result').html( strFinalOutput );
  });
});

HTML:

Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
  
  <div id="input_div">
    <div>
      <header>
        <input class="btnClose" type="button" value="X" />
        <label> New Driver</label>
      </header>
      <main>
        <label>* Full Name</label>
        <input class="txtName" required="required" type="text" />
        <label>* Date of Birth</label>
        <input class="txtDOB" required="required" type="date" />
        <label>License</label>
        <input class="txtLicense" type="text" />
      </main>
    </div>

    <div>
      <header>
        <input class="btnClose" type="button" value="X" />
        <label> New Driver</label>
      </header>
      <main>
        <label>* Full Name</label>
        <input class="txtName" required="required" type="text" />
        <label>* Date of Birth</label>
        <input class="txtDOB" required="required" type="date" />
        <label>License</label>
        <input class="txtLicense" type="text" />
      </main>
    </div> 
  </div>
  
  <br>
  <hr>
  
  <button id="btnConcat">OUTPUT</button>
  
  <div id="result"></div>
</body>
</html>

I have been trying to post this reply for more than an hour now! And because of some SPAM prevention system of the forum, my response is not getting saved!

**Sherin** · Sep 16th, 2019, 05:08 AM

Code:

  <script type="text/javascript">

function get(){
$(".divData").each(function(){
    var name=$(this).find(".txtName").val();
    var dob=$his).find(".txtDOB").val();
    var license=$(this).find(".txtLicense").val();

$("#result").append("<br/> " +(name.length>0 ? "<b>Full Name:</b>"+name :"")  +(dob.length>0 ?"<br/><b>DOB:</b>" +dob :"" )+( license.length>0 ?"<br/><b>License:</b>" +license :"")+"<br/>");
  });

}
 
</script>

Thread: JQuery Concat All Input Values

Thread Tools

Display

JQuery Concat All Input Values

Re: JQuery Concat All Input Values

Re: JQuery Concat All Input Values

Posting Permissions