Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

JQuery Concat All Input Values

dday9

Super Moderator
Joined
Mar 25, 2011
Messages
9,563
Basically I have 0 or more <div> elements that have the following markup:
HTML:
<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

Freelancer
Joined
Jun 12, 2008
Messages
7,647
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>

:wave:

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

New member
Joined
Jul 19, 2019
Messages
32
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>
 
Top