[英]How to style add input field from add in a form style?
i meet some issue with my html when i have added a input to my add click let me show you what in mean in the image below当我在添加点击中添加输入时,我的 html 遇到了一些问题,让我向您展示下图中的含义
The add and remove are there as i have created a new input when click on add and remove the new input when dont need it添加和删除在那里,因为我在单击添加时创建了一个新输入,并在不需要它时删除了新输入
Here my code for my input field and function这是我的输入字段和 function 的代码
<div class="form-group row">
<label for="validationNumber" class="col-2 col-form-label">Contact:</label>
<div class="col-4">
<input id="validationNumber" name="phonenumber" type="text" class="form-control" pattern="\b\d{8}\b" required>
<a onclick="add()"><label style="cursor: pointer;">Add</label></a>
<a onclick="remove()">remove</a>
<div id="new_chq">
</div>
<input type="hidden" value="1" id="total_chq">
<div class="invalid-feedback">
Enter a correct PhoneNumber!
</div>
</div>
</div>
<script>
$('.add').on('click', add);
$('.remove').on('click', remove);
function add() {
var new_chq_no = parseInt($('#total_chq').val()) + 1;
var new_input = "<div><input type='text' id='new_" + new_chq_no + "'pattern='^[0-9]{8}$' required><div class='invalid-feedback'>Enter a correct PhoneNumber!</div></div>";
$('#new_chq').append(new_input);
$('#total_chq').val(new_chq_no);
}
function remove() {
var last_chq_no = $('#total_chq').val();
if (last_chq_no > 1) {
$('#new_' + last_chq_no).remove();
$('#total_chq').val(last_chq_no - 1);
}
}
</script>
Now i wan is how can i style my add remove to the right of the contact: input box and How can i make my new input not squeeze them together?现在我是如何在联系人右侧设置我的添加删除:输入框以及如何使我的新输入不将它们挤在一起?
You forgot this class='form-control'
你忘记了这个class='form-control'
You should change this line你应该改变这一行
var new_input = "<div><input type='text' id='new_" + new_chq_no + "'pattern='^[0-9]{8}$' required><div class='invalid-feedback'>Enter a correct PhoneNumber!</div></div>";
to this对此
var new_input = "<div><input type='text' id='new_" + new_chq_no + "'pattern='^[0-9]{8}$' class='form-control' required><div class='invalid-feedback'>Enter a correct PhoneNumber!</div></div>";
hope this could help you:希望这可以帮助你:
<div class="form-group row">
<label for="validationNumber" class="col-2 col-form-label">Contact:</label>
<div class="col-6">
<div class="row">
<div class="col-9 form-group">
<input id="validationNumber" name="phonenumber" type="text" class="form-control " pattern="\b\d{8}\b" required>
</div>
<div class="col-form-label">
<a class="d-inline m-1" onclick="add()"><label style="cursor: pointer;">Add</label></a>
<a class="d-inline m-1" onclick="remove()">remove</a>
</div>
</div>
<div class="row form-group">
<div class="col-9" id="new_chq">
</div>
</div>
<input type="hidden" value="1" id="total_chq">
</div>
</div>
I changed ur js code a little too:我也改变了你的 js 代码:
<script>
$('.add').on('click', add);
$('.remove').on('click', remove);
function add() {
var new_chq_no = parseInt($('#total_chq').val()) + 1;
var new_input = "<input class='form-control mb-3' type='text' id='new_" + new_chq_no + "'pattern='^[0-9]{8}$' required><div id='newAlert_" + new_chq_no + "' class='invalid-feedback'>Enter a correct PhoneNumber!</div>";
$('#new_chq').append(new_input);
$('#total_chq').val(new_chq_no);
}
function remove() {
var last_chq_no = $('#total_chq').val();
if (last_chq_no > 1) {
$('#new_' + last_chq_no).remove();
$('#newAlert_' + last_chq_no).remove();
$('#total_chq').val(last_chq_no - 1);
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.