I have here a set of inputs that gets concatenated automatically on the last input.
The problem is, I would like to change it so that it won't concatenate empty inputs.
The way it's being used right now is the user have to manually erase the auto-generated spacing or comma by the empty input. This doesn't have to be...
Please see my simple code:
$('#month2, #day2, #year2, #pl1a, #pl2a, #div2, #title2, #subtitle2, #chapter2, #subchapter2, #section2, #stat1a, #stat2a').bind('keypress blur', function() {
$('#input13').val('Act '
$('#month2').val() ' '
$('#day2').val() ', '
$('#year2').val() ', ' 'P.L. '
$('#pl1a').val() '-'
$('#pl2a').val() ', ' 'Div '
$('#div2').val() ', ' 'Title '
$('#title2').val() ', ' 'Subtitle '
$('#subtitle2').val() ', ' 'Ch '
$('#chapter2').val() ', ' 'Subch '
$('#subchapter2').val() ', ' '§ '
$('#section2').val() ', '
$('#stat1a').val() ' Stat. '
$('#stat2a').val() ', provides:' );
});<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<form autocomplete="off">
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="month2" placeholder="Month"/> <br/>
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="day2" placeholder="Day"/> <br/>
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="year2" placeholder="Year"/> <br/>
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="pl1a" placeholder="117"/> <br/>
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="pl2a" placeholder="XXX"/> <br/>
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="div2" placeholder="Div"/> <br/>
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="title2" placeholder="Title"/> <br/>
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="subtitle2" placeholder="Subtitle"/> <br/>
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="chapter2" placeholder="Chapter"/> <br/>
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="subchapter2" placeholder="Subchapter"/> <br/>
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="section2" placeholder="Section"/> <br/>
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="stat1a" placeholder="134"/> <br/>
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="stat2a" placeholder="Page"/>
</form>
<form class="mt-3" autocomplete="off">
<input class="form-control form-control-sm inputcopybtn no-enter" type="text" id="input13" placeholder="Result"/>
</form>Additionally, if those empty inputs won't be concatenated, it means I now have to change my code a little bit since it auto-generate some important text after the input for the next input, so that it will instead add it before the input information.
e.g.
$('#div2').val() ', ' 'Title '
$('#title2').val() ', ' 'Subtitle '
The "Title" string after the "div2" input should be a part of the input below it, preceding the "Title" input and so on...
like this:
$'Title ' ('#title2').val() ', '
CodePudding user response：
You can use something like this:
$('#month2, #day2, #year2, #pl1a, #pl2a, #div2, #title2, #subtitle2, #chapter2, #subchapter2, #section2, #stat1a, #stat2a').bind('keypress blur', function() {
function date() {
var m = $('#month2').val();
var d = $('#day2').val();
var y = $('#year2').val();
if (m && d && y) {
return 'Act ' m ' ' d ', ' y;
}
}
function pla() {
var p1 = $('#pl1a').val();
var p2 = $('#pl2a').val();
if (p1 && p2) {
return 'P.L. ' p1 '-' p2;
}
}
function getValue(element, prefix = '') {
var value = $(element).val();
if (value) {
return prefix value;
}
}
// filter will remove empty elements when function return undefined
$('#input13').val([
date(),
pla(),
getValue('#div2', 'Div '),
getValue('#title2', 'Title '),
getValue('#subtitle2', 'Subtitle '),
getValue('#chapter2', 'Ch '),
getValue('#subchapter2','Subch '),
getValue('#stat1a'),
getValue('#stat2a', ' Stat. '),
'provides:'
].filter(Boolean).join(', '));
});<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<form autocomplete="off">
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="month2" placeholder="Month"/> <br/>
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="day2" placeholder="Day"/> <br/>
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="year2" placeholder="Year"/> <br/>
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="pl1a" placeholder="117"/> <br/>
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="pl2a" placeholder="XXX"/> <br/>
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="div2" placeholder="Div"/> <br/>
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="title2" placeholder="Title"/> <br/>
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="subtitle2" placeholder="Subtitle"/> <br/>
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="chapter2" placeholder="Chapter"/> <br/>
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="subchapter2" placeholder="Subchapter"/> <br/>
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="section2" placeholder="Section"/> <br/>
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="stat1a" placeholder="134"/> <br/>
<input class="form-control form-control-sm mt-1 no-enter" type="text" id="stat2a" placeholder="Page"/>
</form>
<form class="mt-3" autocomplete="off">
<input class="form-control form-control-sm inputcopybtn no-enter" type="text" id="input13" placeholder="Result"/>
</form>You have code that is little bit complex than you can handle split the code into a functions.