We Keep Coding

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)

How do you compare JavaScript innerHTML return values, when there's a special character involved?

I have a web page with a form on it. The "submit" button is supposed to remain deactivated until the user fills in all the necessary fields. When they fill in a field, a checkmark appears next to it. When all the checkmarks are there, we're good to go.
A checkmark might be set by code like this:
if (whatever) checkLocation.innerHTML = CHECKMARK;
Here's the code I'm using to do the final check. It just loops through all the locations where there may be checkmarks. If it finds a location without a mark, it disables the submit button and leaves. If it gets through them all, it activates the button and returns true.
function checkSubmitButton() {
var button = document.getElementById(SUBMIT_BUTTON);
for (var i=0; i<CHECK_LOCATIONS.length; i++) { // should be for-each, but JS support is wonky
var element = document.getElementById(CHECK_LOCATIONS[i]);
console.log(CHECK_LOCATIONS[i] +": " +element.innerHTML);
// if found unchecked box, deactivate & leave
if (element.innerHTML != CHECKMARK) {
button.disabled = true;
return false;
}
}
// all true--activate!
console.log("ACTIVATING BUTTON!");
button.disabled = false;
return true;
}
Here's the problem: this works so long as the const CHECKMARK contains something simple, like "X". But specs call for a special HTML character to be used: in this case ✓, or ✓. When I do the comparison (in the if line) it ends up comparing the string "✓" to the string "✓". Since these two are not equal, it doesn't recognize a valid checkmark and the button never activates. How can I compare the contents of the HTML element my constant? (And hopefully make the code work even if down the road somebody replaces the checkmark with something else.)
Thanks.

There is no problem with the check character and it behaves exactly like the X character. The problem is, that your html have the checkmark character stored as html entity in hex string. If you compare checkmark to checkmark it works just fine: https://jsfiddle.net/m7yoh026/
What you can do in your case is to make sure the CHECKMARK variable is the actuall checkmark character, not the html entity.
Other option is to decode the html entity: https://jsfiddle.net/m7yoh026/3/
var CHECKMARK = '✓'
var decoded_checkmark = $('<textarea />').html(CHECKMARK).text();
console.log($('div')[0].innerHTML)
if ($('div')[0].innerHTML == decoded_checkmark) {
$('body').append('checkmark recognized<br>')
}

You can convert a character to its HTML entity equivalent like so:
var encoded = raw.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
return '&#'+i.charCodeAt(0)+';';
});

Well, here's what I ended up doing: I made a function called encodeHtml() that takes a character or string, writes it to a brand new div, and then returns what's contained in that div:
function encodeHtml(character) {
var element = document.createElement("div");
element.innerHTML = character;
return element.innerHTML;
}
Then I can compare to what it returns, since it automatically changes "✓" to "✓", and will work with any unforeseen changes to that character. It's a bit of a kludge, but it works. (It's still not clear to me why JavaScript does this automatic conversion...but there are many design choices in which JavaScript mystifies me, so there you go.)
Thanks all for the help.

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.

Run and display code as text without repeating

I want to store javascript code in an object, and then run parts of it when the user clicks a button. So far I have this:
var exampleCode = {
test: "$('body').css('background: pink');"
}
$(document).ready(function(){
console.log(exampleCode.test);
exampleCode.test;
});
I have two questions, the first is, how to I get the code to actually run?
The second is, what do I do if I want to have some html in my javascript, say like the following line of code:
$('body').append('<div class="whatever"></div>');
This wont play well with the double quotes around the object value.
My goal with all of this is to be able to both run and display code as text on the same page without having the code written twice, so if you have other suggestions, that would be great.

You can't acually do a "string of code", so the only way to run you code is to do this :
var exampleCode = {
test: function(){$('body').css('background', 'pink');}
}
$(document).ready(function(){
console.log(exampleCode.test); //No "()" for the function
exampleCode.test();
});
You save a function in the object and the you call it.
If you want to append the text of the function, you can do this :
$('body').append(String(exampleCode.test))
This will append the function, however there is no formating
However, you can use the javascript function .replace() to do a little bit of formating.
//Really weak example, can be optimised
var txtCode = String(exampleCode.test)
txtCode = txtCode.replace(';', ';<br/>')
txtCode = txtCode.replace('{', '{<br/>')
txtCode = txtCode.replace('}', '}<br/>')
var code = $('<code/>').html(txtCode)
$('body').append(code)
Additional information: You can escape character with "\".
Doing alert('How\'s it?') will pop the alert "How's it?" and alert("See that : \"!") will pop the alert "See that : "!".