Filling text boxes sequentially
I have 5 text boxes (with pre-filled data) representing address lines 1,2, ... 5 respectively. The requirement is to check if TEXTBOX 1 is empty and then move the data from textbox 2 to 1, textbox 3 to 2, and so on. This is to ensure that there are no blank text fields between consecutive text fields. How do I succeed in jQuery? If all text fields are empty, I will show the field error I was looking for.
Here I am just trying to store the data in a variable.
custData.CustAddr1 = $("#txtCustAddr1" + value).val().trim() == "" ? $("#txtCustAddr2" + value).val() : $("#txtCustAddr1" + value).val();
In the above code, I need to check all 5 text boxes. If txtbox1 is empty, use data from textbox 2, otherwise from 3 else 4 else 5.
source to share
Vanilla JavaScript (jQuery solution below)
Here is a solution that doesn't use jQuery. It uses linear time and doesn't update the textbox values when not needed, so you shouldn't call this often.
The idea at a high level is to keep track of what is the first empty textbox and, after going through all the textboxes, move the textbox values to this empty one when we meet them.
You can output an error message if at the end of this function the first empty text field is still the first ( firstEmpty === 0
in the demo code below).
function enforceSequential(selector) {
var firstEmpty = -1, current = -1,
textboxes = document.querySelectorAll(selector);
for (let textbox of textboxes) {
current++;
if (textbox.value === '') {
if (firstEmpty < 0) {
firstEmpty = current;
}
} else if (firstEmpty >= 0) {
textboxes[firstEmpty].value = textbox.value;
textbox.value = '';
firstEmpty++;
}
}
}
document.getElementById('run').addEventListener('click', () => enforceSequential('.box'));
input {
display: block;
margin: 0 0 1em 0;
}
<input type="text" class="box" value="foo" />
<input type="text" class="box" value="" />
<input type="text" class="box" value="bar" />
<input type="text" class="box" value="" />
<input type="text" class="box" value="" />
<input type="text" class="box" value="baz" />
<button id="run">Run script</button>
jQuery variant
Of course, if you want to use jQuery, you can.
function enforceSequential(selector) {
var firstEmpty = -1,
textboxes = $(selector);
textboxes.each((current, textbox) => {
textbox = $(textbox);
if (textbox.val() === '') {
if (firstEmpty < 0) {
firstEmpty = current;
}
} else if (firstEmpty >= 0) {
textboxes.eq(firstEmpty).val(textbox.val());
textbox.val('');
firstEmpty++;
}
});
}
$('#run').on('click', () => enforceSequential('.box'));
input {
display: block;
margin: 0 0 1em 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="box" value="foo" />
<input type="text" class="box" value="" />
<input type="text" class="box" value="bar" />
<input type="text" class="box" value="" />
<input type="text" class="box" value="" />
<input type="text" class="box" value="baz" />
<button id="run">Run script</button>
source to share