Your question, your audience. Choose who sees your identity—and your question—with question security.
<form action="reflect.php" method="post">
<div class="form-group">
<input type="text" id="skills" name="skills" class="col-md-12" value="" readonly style="width:100%; background-color:#ccc;padding:1px 3px; margin-left:3px; cursor:pointer; float:right; margin-left:5px;">
<span style="float:right; margin-top:-25px; font-weight:bold;font-size:15px; cursor:pointer; position: relative;" id="clear_skills" title="Clear Skills"> X </span>
<br/><br/>
<div class="skills-container"></div>
<input type="text" name="typeahead" value="" class="typeahead tt-query form-control col-md-12" autocomplete="off" placeholder="Add More Skills" style="width:200px;"/>
</div>
<div class="alert alert-danger" id="error" style="display: none">You have already selected this skill.</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script>
var counter = 0;
$(function() {
$('input.typeahead').typeahead([{
name: 'typeahead',
valueKey: 'skill',
remote: {
url: 't1638.php?key=%QUERY',
filter: function (parsedResponse) {
$('#error').hide();
return parsedResponse;
}
},
}]);
$(".typeahead").focusin(function(){
if(this.value!='') {
var skills = $("#skills").val();
var ifSkillAlreadyExist = skills.indexOf(this.value); // ifSkillAlreadyExist ending till , comma
//console.log((checkString.match(/,/g) || []).length); // Check Occurance count of , (comma)
if(ifSkillAlreadyExist == '-1') {
$('.skills-container').append(
$('<div/>', {
class: 'skill-item',
html: this.value
}).append(
$('<a/>', {
class: 'skill-remove glyphicon glyphicon-remove'
})
)
);
if (skills.length > 0) skills += ', ';
$("#skills").val(skills + this.value);
}
else {
// Don't do this - rather add an error to the page
//alert('You have already selected this skill.');
$('#error').show();
}
}
this.value = "";
});
$('body').on('click', '.skill-remove', function() {
var val = $(this).parent().text();
$(this).parent().remove();
var inp = $('#skills').val().split(',');
var res = [];
while(inp.length > 0) {
var top = inp.pop().trim();
if (top != val) {
res.push(top);
}
}
$('#skills').val(res.join(', '));
});
});
</script>
Working sample here
i want to send this value in other page by get or postA simple jQuery example showing just the moving parts of the AJAX communication is profiled in this article.
Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.
Have a better answer? Share it in a comment.
Join the community of 500,000 technology professionals and ask your questions.