Outputting an input value to a span - javascript

I uilt a simple page where a user selects a series of dates via a jquery datepicker (It has to support IE8). There's a botton that executesa function in JS that outputs these values to input boxes in a paragraph. Now this works perfectly, my problem is that the end user will be copying and pasting this info and the textbox lenght is often longer than the date string. I know that i can avoid this mess by using and innerHTML. I have been looking at several examples on this forum but I am not having any luck.
function sayHi(){
// THIS is WHERE input VARIABLES are set, followed by the OUTPUT
//this defines the First Week of Sickness Paid Start Date
var BPCName = document.getElementById("BPCName");
var OUTBPC = document.getElementById("OUTBPC");
var name = BPCName.value;
OUTBPC.value = " " +name+ ""
I essentially want "OUTPBC.value" to go within the span when the function is run. Should this appear as part of the sayHi function?
<script>
document.getElementById("OUTBPC").innerHTML = OUTBPC.value;
</script>
and should my paragraph look like
The Period of paid sickness began on
<span id=OUTBPC> </span>,<pP

You need to set innerHTML not value.
OUTBPC.innerHTML = " " +name+ ""; //replaces OUTBPC.value = " " +name+ "" in sayHi

Related

JavaScript. Help copying text from x.path and inserting into a popup text box

I am trying to create a script to insert a sentence into a pop-up box. The sentence will remain the same, with only the person's name changing.
I select a check box on the webpage, copy the person's name from the web page using the ClassName (also tried xPath), select the upload button and finally, enter a sentence with the person's name inserted. Everything works fine until I insert the code to copy the name.
I activate the script from a bookmark in firefox as this will be the first of many scripts, and it is in a convenient place when working.
I thought this would be simple, but it is causing me some problems. Any help on this would be greatly appreciated.
document.getElementById("1234").click();
NAME = document
.getElementsByClassName("CLASS_NAME");
.getText()
.then(function (value) {
return value;
});
document.getElementById("UploadBoxButton").click();
document.getElementById("Notes").value = "Hello " + NAME + ". How are you?";
document.getElementById("Notes").click();
Solved:
async function example() {
let NAME = document.querySelector("CSS PATH").textContent;
let CANDIDATE = NAME.trim()
document.getElementById("ELEMENTID").click();
document.getElementById("ELEMENTID").click();
document.getElementById("ELEMENTID").value = "Hello " + CANDIDATE;
}
example()
What is the problem exactly ? NAME hasn't the expected value ?
I think this is due to the use of async function. I mean, when NAME is called to set Notes value, getText() has probably not finished to be call asynchronously.
Moreover, where does getText() come from ? Can't you simply use :
document.querySelector("#1234").click();
const NAME = document.querySelector(".CLASS_NAME").textContent;
document.querySelector("#UploadBoxButton").click();
document.querySelector("#Notes").value = "Hello " + NAME + ". How are you?";
document.querySelector("#Notes").click();
And what is Notes ? Are you sure you can change its value like this ? Otherwise, try this :
document.querySelector("#Notes").textContent = "Hello " + NAME + ". How are you?";

Use app.response to obtain text and then append to text from another field

All,
I have been trying to figure this out for a few days now, but to no avail.
I am trying to use a check mark as the trigger to first ask the user to input some text, and then "concatenate" that text with the text from a previous text field.
I can copy the text form one field to the other, but can not figure out how to incorporate the app.response part of the goal.
Any help would be appreciated
here is what I am using currently and it is located in Actions as a "Mouse up - Run a Javascript"
var fFrom = this.getField("MOB Address");
var fTo = this.getField("Relative");
if(event.target.value=="Off"){
fTo.readonly=false;
fto.value="";
}else{
fTo.readonly=true;
fTo.value=fFrom.value;
The return value from app.response is the entered text. You'd use it like this where your field is named "foo"...
var responseText = app.response({
cQuestion: "How are you today?",
cTitle: "Your Health Status",
cDefault: "Fine",
cLabel: "Response:"
});
if (responseText != null) {
var originalValue = this.getField("foo").value;
this.getField("foo").value = originalValue + " " + responseText;
}
The text entered into the response dialog will get appended to the end of any text already in the "foo" field. I'm not sure how you want that added to your code above but hat's how it's used.
Joel,
OK...I have it working, and I thik I understand what you did. I had tried something similar, but couldn't get it to work for some reason.
Anyway...my question now is...since I am using a checkmark field as the trigger for this action, how can I build in code so that this only happens when the checkmark is clicked to "true" or "Yes"? I would also like to clear the receiving field if the checkmark is unchecked or set to "False" or "Null".
As it stands, anytime you click the checkmark field to mark is checked or unchecked, it runs the code.
Here is what I ended up with:
var cRes = app.response({cQuestion: "Enter Nearest Relative First and Last name:", cTitle: "Nearest Relative", cDefault: "", cLabel: "Response:"
});
if(cRes != null){
var fFrom = this.getField("MOB Address").value;
this.getField("Relative").value = cRes + "\r" + fFrom;
}
I tried integrating my original code with this, but...couldn't get it to work.
Again...thanks for your help!

How could I insert a function that allows the user to determine the URL depending on what they entered into a search box

I'm currently building something for work and I have 2 text field boxes where the user can input some text and then a "View Report" Button
What I wish to have is when the button is clicked the user is redirected to a url that looks a bit like this
http://example.com/reports/example/reports/TEXTFIELD1/reports/example/TEXTFIELD2/reports.aspx
So that the URL stays the same with the exception of the two bits that the user enters to determine the url
I have had something similar before where I had an onclick java function that took users to http://example.com/TEXTFIELD1 but I'm not sure whether this is transferable to my current issue as I have multiple parts of the url I wish to edit and are buried in a long url
All help appreciated and I hope I have explained this clearly enough if not please let me know and i will try and provide more context
You can use Template literals to create your link or simply use "+".
document.location.href = `http://example.com/reports/example/reports/${TEXTFIELD1}/reports/example/${TEXTFIELD2}/reports.aspx`
or
document.location.href = "http://example.com/reports/example/reports/" + TEXTFIELD1 + "/reports/example/" + TEXTFIELD2 + "/reports.aspx"
where TEXTFIELD1 and TEXTFIELD2 are values from your text fields.
Looking at your pen I saw some problems, which caused your code to fail.
I'll give my best to explain why.
var fieldOne = document.getElementById(‘field-one’).innerHTML
var fieldTwo = document.getElementById(‘field-Two’).innerHTML
let button = document.getElementById('button');
button.addEventListener('click', () => {
window.location.href = ‘www.website.com/reports/‘ + fieldOne + ‘/reports/‘ + fieldTwo + ‘/reports.aspx’
});
So first of all you can not use those ‘ quotation marks in JS. Use one of these ' " `.
The 2nd problem you're facing is that you're getting the field values wrong in 2 ways. To get the value of an input field, you have to use .value instead of .innerHTML.
The other problem is that you're getting the value of the input field when the document is ready -> so they are always empty.
Additionally you wrote field-Two, which should be field-two (JS is case-sensitive)
Apart from these mistakes, your code should work. So let me rewrite it:
let button = document.getElementById('button');
button.addEventListener('click', () => {
var fieldOne = document.getElementById('field-one').value
var fieldTwo = document.getElementById('field-two').value
var url = `www.website.com/reports/${fieldOne}/reports/${fieldTwo}/reports.aspx`;
// or
var url = 'www.website.com/reports/'+ fieldOne +'/reports/'+ fieldTwo +'/reports.aspx';
window.location.href = url;
});
As you can see, I save the URL in a variable. That's not necessary, but I prefer to do it for the simplicity of the code. There are also 2 different ways of declaring it. Both work, it's your choice what you prefer (note the different quotation marks wheter you use template literals or not)

Set value of textarea at desired line

So I can append text to a textarea using this method
document.getElementById('myArea').value += msg;
This tacks the new input onto the end of the current input.
Suppose the textarea already contains text. Suppose also that using "=" instead of "+=" and inputting the values textarea already had along with the new ones is not a possible solution in this context
How would one input new text to this textarea on the correct line and in the correct position with respect to the text that is already in place?
Here is a YouTube video demonstrating the problem
https://www.youtube.com/watch?v=GpwEuI3_73I&feature=youtu.be
UPDATE:
Instead of sending one letter at a time, I sent the whole textarea each time a key is pressed. Obviously more computationally taxing, but that's the only solution I have right now. I am still interested in hearing any better solutions if you have one!
I'm assuming you send only the last character typed (as in your original approach), and it is stored in a variable named "newChar".
Take this as pseudo-code, although I hope it does not require many changes to actually work:
// deserialize the text of the target textearea
var txt = targetTextarea.text;
var txtAsArray = txt.split(/\r?\n/);
var txtLine = txtAsArray[cursorRowNum];
// write the new character in the right position (but in memory)
txtLine = txtLine.substr(0, cursorColNum) + newChar + txtLine.substr(cursorColNum);
// now serialize the text back and update the target textarea
txtAsArray[cursorRowNum] = txtLine;
txt = txtAsArray.join("\n");
targetTextarea.text = txt;
A reference used was: How in node to split string by newline ('\n')?
Regarding performance, there is no additional network activity here, and we are accessing the DOM only twice (first and last line). Remember than accessing the DOM is around 100 times slower than plain variables in memory as shown by http://www.phpied.com/dom-access-optimization/ .
That "txt = txtAsArray.join("\n");" might need to be "txt = txtAsArray.join("\r\n");" on Windows. Detecting if you are in one or the other is explained at How to find the operating system version using JavaScript as pointed by Angel Joseph Piscola.
Hi this will add text to existing text in textarea
i have try that
var msg = "Hi How are you ?";
document.getElementById('myArea').value += msg;

Slip input type value live using javascript

i'm trying to live edit a text box value so that the result will be split every two character,
adding a column and starting from some default character.
what i have till now is this code, that obviously doesn't work:
$('#textboxtext').keyup(function (){
var text = $("#textboxtext").val();
//$(text).attr('maxlength', '12');
var splitted = text.match(/.{2}|.{1,2}/g);
var result = ("B8:27:EB:" + splitted.join(':'));
});
i need the live split and the default character inside the textbox but i really don't know where to start...
From your code, it seems like you're trying to create a text box that has some very specific behavior. It looks like it needs to format its value in such a way that it always begins with certain 'prefix' of B8:27:EB:, and every subsequent pair of characters is is separated by a :. This is actually a very complex behavior and you have to consider a number of different interactions (e.g. what happens when the user attempts to delete or modify the prefix). I usually try to avoid such complex controls if possible, however here is a quick implementation:
$('#textboxtext').keyup(function (e){
var prefix = "B8:27:EB:",
text = $(this).val(),
splitted, result;
if (text.indexOf(prefix) == 0)
text = text.substr(9);
else if (prefix.indexOf(text) == 0)
text = "";
text = text.replace(/:/g, '');
splitted = text.match(/.{1,2}/g) || [];
result = prefix + splitted.join(':');
$(this).val(result);
});
Demonstration
Type inside the text box and see what happens. Also note, there are all kinds of interaction that this implementation doesn't account for (e.g. right-clicking and pasting into the text box), but it's a start.

Categories