I am planning to design a form for collecting user communication details. These are typically comprised of address, name, phone number etc.
My requirement is to create a printer label-size box below the form to automatically start displaying how the address will look on the printed label.
Any pointers to do this using bootstrap JavaScript?
Take a look at Mutation Observer API:
here
and here
It lets you track changes in the DOM and invoke callback functions. I recently made an editable HTML table using it, it's pretty intuitive. You can watch for attribute changes, DOM tree changes, etc. So I suggest building a 'template' which will accomodate your variables (address, name, etc.), style it with Bootstrap and use the Mutation Observer API to fill it whenever you see fit.
You could also use good old event listeners and clone the user input from the form to the template below i.e. using 'onkeypress' event. Whenever something is typed it will be displayed on the template.
Related
I want to fill out html forms on a third party website by auto generating javascript code which manipulates DOM from Chrome console:
document.getElementById("g_address").value = "abcdefg"
First step works, javascript applies changes to input field.
However, if I press submit from console or manually, all the filled out data in the input fields disappears. The same happens if I start typing manually in any input field.
My question - is it the website which prevents me from doing it like this or is it in general not possible to this way.
It's impossible to say what's happening without any information about the site in question. I doubt the site is deliberately detecting and/or circumventing your effort, but it wouldn't be uncommon for a web site or app to have its own internal representation of the form values in memory, independent of the html inputs, such that the app state, not the DOM, is the source of truth for the values.
Keystrokes on the inputs might be updating the app state, which in turn triggers a re-render of the DOM to display the new value for that input.
Because you're bypassing those interactions the app doesn't know about your changes and they don't get recorded. Then, when you subsequently type in an input the app updates the DOM, setting the input to its last known value, which doesn't include your changes.
I'm working in LiveCycle creating a form that allows the user to duplicate a sub form as they need. In that set of fields there is a dropdown and if it is set to certain values a field that is normally hidden should display. I only want this to display in that instance of the sub form that they made that selection. So my question is how do I determine which instance fired off the event? If I get that I think I can go from there with making the change.
I'm still new to LiveCycle and the resources out there are scattered at best. Any help is appreciated.
PS I'm using Javascript and not FormCalc.
the easiest way is to use built-in functionality that helps you to address proper objects in your code. When you are typing your code in the script window, just hold Ctrl and mouse click the object you want to refer your code to. It will generate a correct short version DOM name for that object. If you hold Ctrl-Shift and then click, you'll get a full DOM address for that object.
For example, you have a 1-page form that has a subform, which can get multiple instances. Inside that subform you have a drop-down "Selector" which controls visibility of the text field called "Weight". Your DOM addresses will look like follows
form1.page1.subform.Selector - this is your drop-down
form1.page1.subform.Weight - this is your text field
Now because your script is located inside of the object in the same subform that has also the object you want to control, you don't even need to pay attention of any instance numbers.
In your script window of form1.page1.subform.Selector just type
if (this.rawValue == "Yes"){
Weight.presence = "visible";
}
It will address only the object that is located in the same subform with your drop-down controller.
I'm using an iframe to get the content of a registration form on a web page, and, as I have to show this registration form inside an HTML app for Android, I'd like to analyse the html inside the iframe to search for input textfields and to use my custom text field as "dummy" or "proxy" for the considered element:
Let me explain better:
As the web page wouldn't give the user the same easy approach as an app, instead of clicking on a textfield and having the problem that the virtual keyboard overlaps the other fields making it difficult to go further.
I want to create a div that covers the iframe and has a text field inside with the same functionality as the one clicked: by this way after entering the text into the dummy field and clicking an ok button aside, the clicked field would be updated and all the other things hidden (virtual keyboard, etc.).
It would be simple if the goal was just to copy a text from a field to another, but the real problem is that the clicked field could have some events like onkeypress or onchange (e.g. to autocomplete) and so on, and I should get the same behaviour on the dummy field.
In an imaginary world I'd do:
document.getElementById("dummy") = document.getElementById("original")
And then destroying and recreating the dummy whenever required.
Do you know if is there something possible to do?
You can't read a div from inside of an iframe after the iframe has loaded. The reason for this is to prevent hackers from making programs that can grab your credit card numbers from web-based forms through iframes and then use the apps to record them.
UPDATE
You would have to retrieve the entire form in the background, then render it again using webkit, then when the person clicks submit, you would have to submit the exact same form data to the host from your device.
Its possible, but I don't see a good reason why you would ever need to use that.
I'm trying to implement a search bar for a web page having basically the same properties of the Tag bar appearing when you ask questions on Stack overflow:
It should have the following properties:
Allow the user to directly type in it.
Pull up entries with same letters as the user is typing.
Allow to delete an entry by either deleting on keyboard or pressing on inserted elements.
I'm interested in understanding the underlying structure of such an element and how to setup listeners and functions that call each other, not simply the code. Could anyone please help me figure out the skeleton of the functions I need to implement?
Besides just using a jQuery UI plugin, the simplest way to do it would be with a text input box and a ul. You can use jQuery (or something else depending on if you are using a framework) to listen to any change in the input box.
At that point you have a choice depending on the rest of your app: The filtering can happen in the front end or the backend. Because databases tend to be fairly quick, it might make sense to filter within it if you have a very large set of data. Otherwise, you could just grab the entire list and use JS to filter it.
Either way, have a callback occur on that change that initiates the filtering and then renders the results into the ul.
I know on the regular create/edit entity it's trivial. What I'm looking at is when creating an entity via workflow, you can click on 'Set Properties' which opens a form that's different than the standard form. Is it possible to have a custom onload event in there?
One example of something we do is that we convert a text box into a drop down menu dynamically based on information in their CRM system. This breaks in the workflow form.
If you need me to clarify anything, please ask. I've included screen shots of what I'm talking about with the workflow form.
Nope, the form you see in the workflow designer is the current default form for that entity - it also has all the hidden/unused fields tagged onto the bottom.
All form JavaScript is disabled I believe. Perhaps look at another approach?
You're cross pollinating your concepts.
The Workflow form is something your end user will never see. As such, the screen you get is form that contains all fields for your entity.
The Dialog screen is the one you use when you require a user to interact with a controlled process. However, this too is not able to have the customizations you mention.
The concept of Webresources only affects Forms; and this is where your GUI-magic impresses your customer with your ability to help him (or her) better use your design.
(If this is unclear, the answer is "no", you cannot use your webresources and custom controls on workflows.)