<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<form id="Form" method="post" action="">
<div>
<label for="id1">Поле1</label>
</div><div>
<input type="text" name="id1" id="id1">
</div><div>
<label for="id2">Поле2</label>
</div><div>
<input type="text" name="id2" id="id2">
</div><div>
<label for="id3">Поле3</label>
</div><div>
<input id="id3" name="id3" type="text" data-rule-required="true" placeholder="100.00" data-marker="3" pattern="[0-9]{4,15}\.[0-9]{2}" />
</div><div>
<label for="all">Поле для вывода объединенных данных</label>
</div><div>
<input type="text" name="all" id="all" minlength="17" data-rule-required="true" data-msg="Не все данные заполнены верно" required>
</div><div>
<button type="submit" name="signup" value="Отправить" id="send">Отправить</button>
</div>
</form>
body {
text-align: center;
}
const selectors = '#id1,#id2,#id3';
const update = () => $('#all')
.val(
selectors.split(',')
.map(selector => $(selector).val())
.map(value => {
if (value.match(/^\s*$/)) return '_';
if (value.match(/^\d*[\.\,]?\d*$/)) {
return Number(value.replace(',', '.')).toFixed(2);
}
return value;
})
.join('-')
);
$(selectors).on('input', update);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.