Develop Reference

Javascript in HTML: How to insert a user input into the middle of a string automatically?

ProgLang: Javascript in HTML
Issue: I'm getting a user input via a comment box (their name) and want to have it inserted mid strings throughout the rest of the code. For example: 'Are you okay, first name, I was worried!'
I tried to use ${firstname}, but it didn't print the rest of the string in the resulting comment box.
Enter Your First Name
<br><input type="text" id=firstname name="firstname" onblur="addNameToCommentBox(this)"><br><br>
.
Opening Sentence <br>
<input type="checkbox" onclick="addToCommentBox(this);" name="grade" value="statement1. statement1. " + ${firstname}.`+ "statement1. statement1.">Statement1. indentifier user read on page<br>
Second Sentence <br>
<input type="checkbox" onclick="addToCommentBox(this);" name="grade" value="statement2. statement2. ">Statement2. indentifier user read on page<br>
<br>
...
Resulting Block<br>
<textarea id="comment" rows="10" cols="80"></textarea><br>
</form>
<script>
function addNameToCommentBox(nameElement) {
var comment = $("#comment");
comment.val(comment.val() + " " + nameElement.value); }
function addToCommentBox(checkboxElement) {
var comment = $("#comment");
if (checkboxElement.checked === true) {
comment.val(comment.val() + " " + checkboxElement.value);
} else {
var currentComment = comment.val();
currentComment = currentComment.replace(checkboxElement.value, "");
comment.val(currentComment);
Could you please advise me?

You can set your template like "statement1.statement1 {0} statement1. statement1."
And then write a function to get message by passing arguments.
function getComment(template, args){
return args.reduce((acc, element) => {
console.log(element);
acc = acc.replace(/{\d}/, element);
return acc;
}, template);}
Codepen link: https://codepen.io/nithinthampi/pen/gOYJopP

You have forgot to use $ before the parameters. Try this
<script>
function addNameToCommentBox(nameElement) {
var comment = $("#comment");
comment.val(comment.val() + " " + $(nameElement).value); }
function addToCommentBox(checkboxElement) {
var comment = $("#comment");
if (checkboxElement.checked === true) {
comment.val(comment.val() + " " + $(checkboxElement).value);
} else {
var currentComment = comment.val();
currentComment = currentComment.replace( $(checkboxElement).value), "");
comment.val(currentComment);

php javascript onclick value change

I want to remove the "http" if it is put in the url part of the input link, before the data is sent.
this my input code look onclick=
<input style=" outline: none;" type="button" onclick="formatText ('link:url');" class="btn btn-yeni" value="link"/>
This my javascript code (the received data is sent to another file and replaced.)
<script type="text/javascript">
function formatText(tag) {
var Field = document.getElementById('entry_girdi');
var val = Field.value;
var selected_txt = val.substring(Field.selectionStart, Field.selectionEnd);
var before_txt = val.substring(0, Field.selectionStart);
var after_txt = val.substring(Field.selectionEnd, val.length);
Field.value += '(' + tag + ')';
}
</script>
what i want to do If the input value is "link: http: //example.com" I would like to change it and post it as "link: example.com".

Can you try in your url string :
var result = url.replace(/(\w+:|^)\/\//, '');
result variable will hold "link : example.com" in place of "link : http://example.com"

Use the replace() function to replace part of a string.
function formatText(tag) {
var Field = document.getElementById('entry_girdi');
Field.value = Field.value.replace("http://", "");
Field.value += '(' + tag + ')';
}

ajax autocomplete same data with multiple textbox jquery

i have one issue with jquery autocomplete, its working with one textbox perfect but when i create multiple textbox using jquery with same ID at that time its working for only first textbox not for another textbox .
my question is i want to create multiple textbox and implement same autocomplete data with all text box
this is my code for create textbox using jquery
var totalSelect = $('#max_player').val();
$('#competitor_box').empty();
for (var i = 1; i <= totalSelect; i++) {
var ajaxauto = '<div class="form-group col-sm-3"><label for="tournament_name">Pocker # '+i+'</label><input id="autocomplete-ajax" type="text" class="form-control" autocomplete="off"></div>';
$('#competitor_box').append(ajaxauto);
}
this code for ajax autocomplete
$('#autocomplete-ajax').autocomplete({
// serviceUrl: '/autosuggest/service/url',
lookup: countriesArray,
lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
return re.test(suggestion.value);
},
onSelect: function(suggestion) {
$('#selction-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
},
onHint: function (hint) {
$('#autocomplete-ajax-x').val(hint);
},
onInvalidateSelection: function() {
$('#selction-ajax').html('You selected: none');
}
});
please help me for this issue its very important for me
thanks all.

var totalSelect = $('#max_player').val();
$('#competitor_box').empty();
for (var i = 1; i <= totalSelect; i++) {
var ajaxauto = '<div class="form-group col-sm-3"><label for="tournament_name">Pocker # '+i+'</label><input class="txtAutocomplete" type="text" class="form-control" autocomplete="off"></div>';
$('#competitor_box').append(ajaxauto);
}
Autocomplete function
$('.txtAutocomplete').autocomplete({
// serviceUrl: '/autosuggest/service/url',
lookup: countriesArray,
lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
return re.test(suggestion.value);
},
onSelect: function(suggestion) {
$('#selction-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
},
onHint: function (hint) {
$('#autocomplete-ajax-x').val(hint);
},
onInvalidateSelection: function() {
$('#selction-ajax').html('You selected: none');
}
});

why did you use the same ID for severals input ? use classes if you have to tag multiples elements, for example .autocomplete-ajax-input on each textbox. And then declare your autocomple function with $('.autocomplete-ajax-input').autocomplete

javascript - autocomplete hightlight text issue

I have a search engine that display a list of results when you search something.
The problem is that when I slect one of those results, in the input will apear this text : "<span style='font-weight:bold; color:" and not the word wich is for search.
For example if I want to search the word "football", in the search input will appear this text :"<span style='font-weight:bold; color: and not the word "football".
Also in the url the var t appears as a <span> code and not the word "football"
My code is this :
$("#search-field").data('ui-autocomplete')._renderItem = function(ul, item) {
var re = new RegExp("^" + this.term) ;
var t = item.label.replace(re, "<span style='font-weight:bold; color:#000;'>" +
this.term +
"</span>");
return $('<li></li>')
.data("item.autocomplete", item)
.append('' + t + '')
.appendTo(ul);
};

Unhide hidden words that have been removed from text box

I would like to allow users to select given words from a word bank and place those into a text box, where they will be removed (hidden) from the word bank. If the user makes a mistake and wants the word back, they can delete it from the text box which will place it back in the word bank.
How can this be done? (Please forgive the horrific ms paint image)
HTML:
Create sentence:
<input type="text" id="textBox" value="" />
<br/>
<button onclick="submitMe()" id="testButton" >Submit Response </button>
<br/>
<div class="wordBank_Headings">Word Bank:
<span class="wordBank_Words"></span>
</div>
JavaScript:
You will see here a portion that says /*THIS IS THE PORTION I AM HAVING TROUBLE WITH*/. I am trying to get all words from text box... if word is hidden and does not exist in text box... add it back to the Word Bank.
$(document).ready(function() {
playerResponse();
$(".bank-word").click(function (event) {
//append each newly selected word to $('#textBox').val()
$('#textBox').val($('#textBox').val() + " " + $(this).attr('word'));
//hide word from word bank
$(this).hide();
/*THIS IS THE PORTION I AM HAVING TROUBLE WITH*/
//Get all words from text box
//if word is hidden and does not exist in text box... add it back
$.each($('#textBox').val().split(/\s+/), function(index, word) {
console.log( index + ": " + word);
$('li.bank-word').find(':hidden').each(function(index) {
log("index : " + index + ", " + $(this).text());
$(this).show(); //reveal word in word bank again after we find that it is hidden AND has been deleted from text box
});
});
});
});
var words = {
"task1" :
{
'Ni' : 'you',
'Wo' : 'I',
'Hao' : 'good',
'Shi' : 'am'
}
}
function bank() {
$(".wordBank_Words").empty();
for (obj in words) {
for (key in words[obj]) {
$(".wordBank_Words").append("<li class='bank-word' word='" + key + "' ><b>" + key + "</b>: " + words[obj][key] + "</li>");
}
}
}
function submitMe() {
//will eventually verify input from textbox
var value = document.getElementById('test').value;
alert(value);
}
EDIT:
var array = [];
var i = 0;
$.each($('#textBox').val().split(/\s+/), function(index, word) {
array.push(word);
log("ARRAY: " + array[i] + array.length);
i++;
console.log( index + ": " + word);
for (obj in words) {
for (key in words[obj]) {
//if word doesn't exist in text box, and doesn't exist in word bank, add it
if (!isInArray(key, array) && is in wordbank...) {
key.show(); //pseudo code
}
}
}
});
function isInArray(value, array) {
return array.indexOf(value) > -1;
}