我有一个添加标签的表单，其中包括输入字段和按钮。用户可以输入多个标签。标签用逗号分隔。
一切工作正常，但我想使用javascript，jquery将添加的标签值存储在变量中。
到目前为止，这是我所做的-
$("#tags input").on({
focusout: function () {
var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
if (txt) $("<span/>", {text: txt.toLowerCase(), insertBefore: this});
this.value = ""; // To remove entered value after inserting comma
},
keyup: function (ev) {
// if: comma|enter (delimit more keyCodes with | pipe)
if (/(188|13)/.test(ev.which)) $(this).focusout();
}
});
$('#tags').on('click', 'span', function () {
if (confirm("Remove " + $(this).text() + "?")) $(this).remove();
});
$(document).on('click', '#select_all', function () {
if (this.checked) {
$('.all').each(function () {
this.checked = true;
});
} else {
$('.all').each(function () {
this.checked = false;
});
}
});
$('#add_tag_btn').click(function () {
// Here I want to store added tags values in variable.
var added_tags=$('#tags span').html();
alert(added_tags);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div id="tags">
<input type="text" value="" class="form-control" id="add_tag"placeholder="Add tag" />
</div>
<input type='button' class='btn btn-primary' id='add_tag_btn' value='Add'>
</form>这是答案...
您只需要循环单击按钮即可获取变量中的每个标签值。
在按钮上单击创建一次数组以获取变量中的所有标签值
的HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div id="tags">
<input type="text" value="" class="form-control" id="add_tag"placeholder="Add tag" />
</div>
<input type='button' class='btn btn-primary' id='add_tag_btn' value='Add'>
</form>
JS
<script>
$("#tags input").on({
focusout: function () {
var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
if (txt)
$("<span/>", {text: txt.toLowerCase(), insertBefore: this});
this.value = ""; // To remove entered value after inserting comma
},
keyup: function (ev) {
// if: comma|enter (delimit more keyCodes with | pipe)
if (/(188|13)/.test(ev.which))
$(this).focusout();
}
});
$('#tags').on('click', 'span', function () {
if (confirm("Remove " + $(this).text() + "?"))
$(this).remove();
});
$(document).on('click', '#select_all', function () {
if (this.checked) {
$('.all').each(function () {
this.checked = true;
});
} else {
$('.all').each(function () {
this.checked = false;
});
}
});
</script>
点击按钮。
// Button Click
$('#add_tag_btn').click(function () {
var added_tags = [];
i = 0;
$('#tags span').each(function ()
{
added_tags[i++] = $(this).text();
});
alert(added_tags);
});
希望对您有帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句