I am working on a form that would allow users to enter multiple email addresses in an input field.
By searching around the net I cam across this jQuery plugin: .php/multiple-value-input-field-with-jquery/
(function( $ ){
$.fn.multipleInput = function() {
return this.each(function() {
// create html elements
// list of email addresses as unordered list
$list = $('<ul />');
// input
var $input = $('<input type="text" />').keyup(function(event) {
if(event.which == 32 || event.which == 188) {
// key press is space or ma
var val = $(this).val().slice(0, -1); // remove space/ma from value
// append to list of emails with remove button
$list.append($('<li class="multipleInput-email"><span> ' + val + '</span></li>')
.append($('<a href="#" class="multipleInput-close" title="Remove" />')
.click(function(e) {
$(this).parent().remove();
e.preventDefault();
})
)
);
$(this).attr('placeholder', '');
// empty input
$(this).val('');
}
});
// container div
var $container = $('<div class="multipleInput-container" />').click(function() {
$input.focus();
});
// insert elements into DOM
$container.append($list).append($input).insertAfter($(this));
// add onsubmit handler to parent form to copy emails into original input as csv before submitting
var $orig = $(this);
$(this).closest('form').submit(function(e) {
var emails = new Array();
$('.multipleInput-email span').each(function() {
emails.push($(this).html());
});
emails.push($input.val());
$orig.val(emails.join());
});
return $(this).hide();
});
};
})( jQuery );
I installed the plugin, below is a screenshot of my results:
My Questions:
How can we edit the plugin to make sure that the last value (email address) does not have a ma at the end?
Here is a Fiddle: /
And here is a link to the live install I am working on: / *please fill out the "Friends' Emails" field and submit the form to see the issue.
Your input is very much appreciated, thank you.
I am working on a form that would allow users to enter multiple email addresses in an input field.
By searching around the net I cam across this jQuery plugin: http://t2a.co/blog/index.php/multiple-value-input-field-with-jquery/
(function( $ ){
$.fn.multipleInput = function() {
return this.each(function() {
// create html elements
// list of email addresses as unordered list
$list = $('<ul />');
// input
var $input = $('<input type="text" />').keyup(function(event) {
if(event.which == 32 || event.which == 188) {
// key press is space or ma
var val = $(this).val().slice(0, -1); // remove space/ma from value
// append to list of emails with remove button
$list.append($('<li class="multipleInput-email"><span> ' + val + '</span></li>')
.append($('<a href="#" class="multipleInput-close" title="Remove" />')
.click(function(e) {
$(this).parent().remove();
e.preventDefault();
})
)
);
$(this).attr('placeholder', '');
// empty input
$(this).val('');
}
});
// container div
var $container = $('<div class="multipleInput-container" />').click(function() {
$input.focus();
});
// insert elements into DOM
$container.append($list).append($input).insertAfter($(this));
// add onsubmit handler to parent form to copy emails into original input as csv before submitting
var $orig = $(this);
$(this).closest('form').submit(function(e) {
var emails = new Array();
$('.multipleInput-email span').each(function() {
emails.push($(this).html());
});
emails.push($input.val());
$orig.val(emails.join());
});
return $(this).hide();
});
};
})( jQuery );
I installed the plugin, below is a screenshot of my results:
My Questions:
How can we edit the plugin to make sure that the last value (email address) does not have a ma at the end?
Here is a Fiddle: https://jsfiddle/William3780/oL14dgqp/
And here is a link to the live install I am working on: http://51146./free/refer-a-friend/ *please fill out the "Friends' Emails" field and submit the form to see the issue.
Your input is very much appreciated, thank you.
Share Improve this question edited Sep 30, 2015 at 8:52 William asked Sep 30, 2015 at 8:12 WilliamWilliam 4813 gold badges7 silver badges17 bronze badges 6- JsFiddle would be useful. – Molda Commented Sep 30, 2015 at 8:22
-
You have something like
tagin the first image. So when you get this , separated values back to its form? Since I've created a demo I could see that you get tag like UI once you click,and I found no other option to get it back to,separated values.. – Guruprasad J Rao Commented Sep 30, 2015 at 8:22 -
The problem should be
emails.push($input.val());. It push an empty value to the array, it will be better to check theinput.val() != ""then push it into the array. – R Lam Commented Sep 30, 2015 at 8:22 - You may see this example. jsfiddle/h3g3gLf8 You can clearly see that it pushed an empty string into the array. – R Lam Commented Sep 30, 2015 at 8:24
- updated the question with a jsFiddle and a link to the live install. – William Commented Sep 30, 2015 at 8:53
2 Answers
Reset to default 1well changed little bit of your code standards but created a working multiple email input. Here are the codes
HTML
<div class="multiple-val-input">
<ul>
<input type="text">
<span class="input_hidden"></span>
</ul>
</div>
CSS
.multiple-val-input{
height: auto;
min-height: 34px;
cursor: text;
}
.multiple-val-input ul{
float: left;
padding: 0;
margin: 0;
}
.multiple-val-input ul li{
list-style: none;
float: left;
padding: 3px 5px 3px 5px;
margin-bottom: 3px;
margin-right: 3px;
position: relative;
line-height: 13px;
cursor: default;
border: 1px solid #aaaaaa;
border-radius: 3px;
-webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
background-clip: padding-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #e4e4e4;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee));
background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
background-image: linear-gradient(to top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
}
.multiple-val-input ul li a{
display: inline;
color: #333;
text-decoration: none;
}
.multiple-val-input ul li a, .multiple-val-input ul li div{
display: inline;
margin-left: 3px;
}
.multiple-val-input input[type="text"]{
float: left;
border: none;
outline: none;
height: 20px;
min-width: 5px;
width: 5px;
}
.multiple-val-input span.input_hidden{
font-size: 14px;
position: absolute;
clip: rect(0,0,0,0);
}
JQUERY
$('.multiple-val-input').on('click', function(){
$(this).find('input:text').focus();
});
$('.multiple-val-input ul input:text').on('input propertychange', function(){
$(this).siblings('span.input_hidden').text($(this).val());
var inputWidth = $(this).siblings('span.input_hidden').width();
$(this).width(inputWidth);
});
$('.multiple-val-input ul input:text').on('keypress', function(event){
if(event.which == 32 || event.which == 44){
var toAppend = $(this).val();
if(toAppend!=''){
$('<li><a href="#">×</a><div>'+toAppend+'</div></li>').insertBefore($(this));
$(this).val('');
} else {
return false;
}
return false;
};
});
$(document).on('click','.multiple-val-input ul li a', function(e){
e.preventDefault();
$(this).parents('li').remove();
});
JSFiddle would be appreciated but if you are trying to remove a ma of last element of an array or array of items in a String. I can imagine a few approaches:
1) Regex
var lastCommaPatter = ",$";
var emails = "[email protected], [email protected], [email protected],";
email.replace(lastCommaPatter, "");
2) Coverting entire thing into a collection and remove the last blank element
var SEPARATOR = ",";
var emails = "[email protected], [email protected], [email protected],";
var emailsCollection = email.split(SEPARATOR);
var collectionSize = emailsCollection.length;
if(collectionSize > 0){
array.splice(emailsCollection, collectionSize - 1);
}