We Keep Coding

Replace Form Input Selected Text

I have an old asp page that had a small image that could be clicked to change some selected text in a form text input box to italics using javascript. This was working fine for many years, but a user just informed me that it no longer seems to be working. In looking around for a solution, it seems the createRange() function is no longer supported by many current browsers, causing the browser to throw an error, and getSelection() should now be used instead.
The old script is listed below.
<script type="text/javascript">
var j; // this is the currently selected form element i.e., line number
function getelement_num(k) {
j = k;
return;
}
function format_sel(v) {
var str = document.selection.createRange().text;
document.form1.strMessage.focus();
var sel = document.selection.createRange();
sel.text = "[" + v + "]" + str + "[/" + v + "]";
return;
}
</script>
I have modified the format_sel function as follows:
function format_sel(v) {
var str = window.getSelection().toString;
document.FrontPage_Form2.elements[j].focus();
var sel = window.getSelection().toString;
sel.text = "<" + v + ">" + str + "</" + v + ">";
return;
}
So, the getSelection() seems to be working fine. If I alert(sel), it returns the selected text. However, the sel.text portion is not replacing the selected text in the input field of the form.
My question is, how should I modify the code above so that the selected text in the form input field will be replaced with the modified text as found in sel.text?
Pertinent HTML code (with only 1 of 9 form fields shown for brevity):
<a title="Select text in fields below and then click this button to add Italics" href="#" onclick="format_sel('i');" ><img alt="Select text in fields below and then click this button to add Italics" border="0" src="images/italic.gif" width="21" height="19" align="middle" class="style33" /></a>
<input name="Title" id="Title" type="text" placeholder="Add Title" style="border: 1px solid #B5DB38; width: 250px" onfocus="lastFocus=this; getelement_num('0');" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" /></td>
I should note that I also have code that will insert special characters into the form as well, which is what the storeCaret code is for. That seems to work fine.
Many thanks for the assistance.

There seem to be two types of problem with this code.
The first one is that if you want to get the string value of the selection, you should use toString() instead of toString. Using the latter will give you a reference to the function toString instead of the returned value. I don't know what your alert function is calling, but it doesn't seem correct.
The second problem is that your sel variable is currently a function, and even if you did it correctly (using toString()) you would get a string which has no .text attribute. What you should be calling there is actually
var sel = window.getSelection();
So that you get a reference to the Html Element, which does have the .text attribute.

Ok, in searching around a little bit, I found some code that seems to work. I modified it slightly for my own purposes (see below), but the original code by Er. Anurag Jain can be found here: https://stackoverflow.com/a/11170137/2121627.
Many thanks as well to #user2121627 for their suggestions on amending and testing the code.
<script type="text/javascript">
var j; // this is the currently selected form element i.e, line number
function getelement_num(k) {
j = k;
return;
}
function format_sel(v) {
var elem = document.FrontPage_Form2.elements[j];
var start = elem.selectionStart;
var end = elem.selectionEnd;
var len = elem.value.length;
var sel_txt = elem.value.substring(start, end);
if (sel_txt != "") {
document.FrontPage_Form2.elements[j].focus();
var replace = "<" + v + ">" + sel_txt + "</" + v + ">";
elem.value = elem.value.substring(0, start) + replace + elem.value.substring(end, len);
}
}
</script>
Here is a jsfiddle for those interested: https://jsfiddle.net/jwfetz/kzcywvnh/42/

HTML Textarea not compatible with JavaScript email form (I can work with 220 characters only)

I have developed the javascript email form, which was discussed here:
HTML Assigning the checkbox to the form action already defined
and everything works fine, also with jQuery elements.
The problem unfortunately lies in the textarea, where the text input seems to be limited for no reason.
According to the word counter here:
https://textool.io/character-counter/
I can work only with 220 characters. If I exceed this limit, the mailto: fails.
When I put i.e. one sentence, everything is alright. The problem emerges when I cross some unknown limit of characters. Then the email is not populated.
The full code is here:
https://jsfiddle.net/pq63e4yr/
and the situation depicted here:
I have "discovered" it by using the lorem ipsum text from here:
https://www.lipsum.com/
and now I am trying to find where the problem might be. I saw, that MS Edge has the similar problem
FormData constructor loses textarea value in Edge
but it looks like the Chrome too...
The sample of code (apart from the link above) looks as this:
document.getElementById("cfsubmit").addEventListener("click", function() {
var check = document.getElementById("cfemail");
var formEl = document.forms.cityfibre_form;
var formData = new FormData(formEl);
var jobAddress = formData.get('address');
var jobPostcode = formData.get('postcode');
var surveyorName = formData.get('surveyor');
var feedback = formData.get('feedback');
var subject = jobAddress + ", " + jobPostcode + " - site survey submission from " + surveyorName;
var body = 'SURVEYOR: ' + surveyorName + '\n' +
'ADDRESS: ' + jobAddress + ' ; POSTCODE: ' + jobPostcode + '\n' +
'FEEDBACK: ' + feedback;
var mailTo = "mailto:mk#gmail.com?subject=" + encodeURI(subject) + "&body=" + encodeURI(body);
if (check.checked == true) { // If checked then fire
let link = document.createElement("a");
link.href = mailTo;
link.click();
link.remove();
}
mainForm.submit();
});
<figure class="feedback">
<label class="feedtitle" for="Message">Leave
feedback</label>
<textarea id="opfeedback" name="feedback"></textarea>
<br>
<div class="emailreceipt">
<input type="checkbox" id="cfemail" name="email">
<label class="checking" for="cfemail">Send me an email
receipt of my responses</label>
</div>
</figure>
and I have no idea what's going on here. Is the formData.get attribute limited with characters?
The similar question:
Getting around mailto / href / url character limit
says about the 2083 characters limit, since according to this counter: https://textool.io/character-counter/
I can work only for 220 characters. I use the Chrome browser.
Is there some reason behind it?

Random quotation mark being inserted into generated onclick html parameter

I'm trying to add parameters to an onclick function when generating HTML via javascript. When I inspect the code it is putting a quotation mark in the onclick function's parameter.
var lengthOfCats = ArrayOfCategories.length;
for (var a = 0; a < lengthOfCats; a++) {
$("#CatTable").append("<div class='better-table-cell'>" + ArrayOfCategories[a].Name + "</div>\
<div class='better-table-cell'>" + ArrayOfCategories[a].DepartmentName + "</div>\
<div class='better-table-cell'>" + ArrayOfCategories[a].Active + "</div>\
<div class='better-table-cell'>\
<button onclick=OpenUpdateCat(" + ArrayOfCategories[a].CategoryID + "," + ArrayOfCategories[a].Name + ");" + ">Edit</button>\
</div>");
Here is an image of the HTML that is getting generated for the edit button.

The browser is normalising the HTML and putting quote marks around the attribute value.
The problem is that because the attribute value includes spaces, and you didn't put the quote marks in the right spots yourself, the attribute value finishes in the middle of the JavaScript.
The next bit of JS is then treated as a new attribute.
Mashing together strings to generate HTML is fundamentally a bad idea. Ensuring all the right things are quoted and escaped is hard.
Use DOM to generate your HTML instead.
It is a little longer, but clearer and easier to maintain in the long run.
var $cat_table = $("#CatTable");
var lengthOfCats = ArrayOfCategories.length;
for (var a = 0; a < lengthOfCats; a++) {
$cat_table.append(
$("<div />").addClass("better-table-cell").text(ArrayOfCategories[a].Name)
);
$cat_table.append(
$("<div />").addClass("better-table-cell").text(ArrayOfCategories[a].DepartmentName)
);
$cat_table.append(
$("<div />").addClass("better-table-cell").text(ArrayOfCategories[a].Active)
);
$cat_table.append(
$("<div />").addClass("better-table-cell").append(
$("<button />").text("Edit").on("click", generate_edit_handler(ArrayOfCategories[a].CategoryID, ArrayOfCategories[a].Name))
)
);
}
function generate_edit_handler(cat_id, name) {
return function () {
OpenUpdateCat(cat_id, name);
};
}

Assigning dynamic ids to elements using jQuery

Hi I am using jQuery and creating tags in a loop.
Ex -
for(var i=0;i<length;i++){
jQuery("#dailydata").append("<table class='table'><tr>"+
"<th>Min Temp : </th><td>"+ data[i]</td>" +
"</tr></table>";
if(data[i] <=10){
//add color to th
}else{
//add different color to th
}
}
I am creating a Table Row in every loop and appending to a HTML element. and just after that I am checking the value and according to that value I want to change the background color of the tag.
Can somebody tell me how to achieve this?

There are several methods.
The method you're using to build the tags isn't the most elegant, but you could adapt it to achieve the result you're after as follows...
jQuery("#dailydata").append("<table class='table'><tr>"+
"<th id='"+ (data[i]<=10?'blue':'red') + "'>Min Temp : </th><td>"+ data[i]</td>" +
"</tr></table>";
I suggest you also read the jQuery docs on how to use 'attr' and 'prop' to add id's (and other attributes/properties) to jQuery elements without hacking the text together as in my example.
jQuery 'attr': https://api.jquery.com/attr/
jQuery 'prop': https://api.jquery.com/prop/

The simplest way basing on your code:
for (var i = 0; i < length; i++) {
var color;
if(data[i] <=10) {
color = "ff0000";
} else{
color = "0000ff";
}
jQuery("#dailydata").append(
"<table class='table'><tr>" +
"<th style="background-color:#" + color +
">Min Temp : </th><td>" + data[i]</td>" +
"</tr></table>");
}

Firstly:
You should not use numeric values (0,1,2,3,etc) for ids. The HTML specification say this:
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
Secondly:
Your code is weight... Did you create a variable called "length" in lines not shown in your example? I assume in your for loop you meant i<data.length
So with that in mind use an alphabetical prefix to your ids:
// Note jQuery("#dailydata") same as $("#dailydata") unless you override the use of the "$" symbol
for(var i=0; i<data.length; i++) {
var newElementId = "some_prefix_"+i;
var newElementToAppend = $("<div>").attr("id", newElementId);
$("#dailydata").append(newElementToAppend);
}

You can just add an extra if condition to check the value of i
Here in this example , assume length is value greater than i. Also in your example you are using data[i] but the loop will run on length variable.There is a typo here data[i]</td>" It need to be data[i]+"</td>". Also the append method be closed with )
var length = 15;
for (var i = 0; i < length; i++) {
if (i < 10) {
jQuery("#dailydata").append("<table class='table'><tr>" +
"<th class='less10'>Min Temp : </th><td>" + i + "</td>" +
"</tr></table>");
} else {
jQuery("#dailydata").append("<table class='table'><tr>" +
"<th class='more10'>Min Temp : </th><td>" + i + "</td>" +
"</tr></table>");
}
}
.less10 {
color: green
}
.more10 {
color: blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dailydata">
</div>

JavaScript/HTML/CSS - Multiple forms on one page

I'm trying to create a simple web page in JavaScript, HTML, and CSS. The web page generates 5 div elements. Each div element includes a random number, text input, and submit button. My code below does that.
The user then should be able to enter the random number into the text input box and click the submit button. The script should check if they entered the correct answer or not.
I'm not sure if this is possible? I understand how to write the code for just a single form on the page but this example is using 5 forms on a single page that are dynamically generated. Any help would greatly be appreciated.
<html>
<head>
<style type="text/css">
#test {
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
}
</style>
</head>
<body>
<script>
for (i = 0; i < 5; i++) {
document.write('<div id="test">');
var ranNum = Math.floor(Math.random()*10);
document.write(ranNum);
document.write("<p>Enter the number above:</p>");
document.write("<form id=\"form1\" name=\"form1\" method=\"post\" action=\"\"><input type=\"text\" name=\"answer\" id=\"answer\" /><input type=\"submit\" name=\"button\" id=\"button\" value=\"Submit\" /></form>");
document.write('</div>');
}
</script>
</body>
</html>

You don't even interact with the server to check if it was the correct answer.
So, yes, you can easily do that.
Use jquery, make those numbers properties to a global object, properties named after #id of your inputs, so when user clicks, just compare the value of input with the property of your global object with the same name.
eg:
window.myObject = {}
myObject.div1 = // your code for random number
myObject.div2 = // again, code for random number
And so on, even better put your random number code into a function and call
it for each property.
then just set the divs values as properties:
$("div.div1").append("<span class='value'>" + myObject.div1 + "</span>");
Or maybe even you could create a loop to do it so you don't need to type it for all divs.
After that, test your inputs:
$("div.div1").find("submit").click(function(){
// here you collect the data from your form, lazy to type
// and test it for equality with coresponding myObject.div1
// or with the value in <span class="value>
//e.g.
if ($(this).parent().find(".mytextinput").val() == $(this).parent().find("span.value").val())
{ //do something} else {//do something else }
});
Of course, this presumes you can use jquery.

as has been pointed out in the comments, make sure id's are always unique. I wouldn't use ajax for something this simple, you can check the values client side. See below for a working solution.
for (i = 0; i < 5; i++) {
document.write('<div id="div-' + i + '">');
var ranNum = Math.floor(Math.random()*10);
document.write(ranNum);
document.write("<p>Enter the number above:</p>");
document.write("<form id=\"form-" + i + "\" name=\"form-" + i + "\"><input type=\"text\" name=\"answer\" id=\"answer-" + i + "\" /><input type=\"submit\" name=\"button\" id=\"button-" + i + "\" value=\"Submit\" onclick=\"checkAnswer(this); return false;\"/></form>");
document.write('</div>');
}
function checkAnswer(element) {
var thisAnswer=element.form.parentElement.textContent.substring(0,1);
var answerGiven=element.form.children[0].value;
if (thisAnswer==answerGiven) {
alert("correct!");
} else {
alert("wrong!");
}
}