JQuery Concat All Input Values
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.
Re: JQuery Concat All Input Values
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! :(
Re: JQuery Concat All Input Values
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>
