Javascript displays more text boxes depending on a pull down option? - javascript

I don't know if this is possible in Javascript but I am trying to achieve this. I don't know the terminology so I thought I would post it on here with pseudo code to help you understand what I want to implement.
Pseudo Code:
User Selects Option from pull down.
If selection matches criteria
Add text boxes to the form
Else if selection is something else
Add invisible text box with NULL value
I would like to code it myself but if you could post some reference material or links as I have not done much with Javascript.
Thanks

For your first and second entries, google for 'html select onchange'.
You'll want to check out document.createElement for "Add text boxes to the form"
To make your text box invisible, check out the CSS display property, setting it to none or block (or inline)
I've tried to keep this answer very short without code samples because it sounds like you want to do it yourself. Add a comment to my answer if you want more of an example.
EDIT
Also of note, along with document.createElement, you will want to look at appendChild to add the created element to an HTML element, most likely some FORM element in your page.

Related

Select dropdown (option, select) css javascript

I'm currently trying to make a select dropdown (option, select) with a design like the following picture
enter image description here
When selected > 10 then the select dropdown option appears input text to fill in the desired amount.
Has anyone ever made something like this.
Thank you.
I think you'll just add an if statement for > 10 then the input display will change from none to whatever you want.
The kind of drop down list requested can not be constructed simply using a combination of HTML select and option elements. This is because the only permitted content type of Option elements is text, although HTML character entities may be used. (If you need to expand character references when setting an option element's content, use its innerHTML property instead of texContent.)
I would suggest searching for an already available HTML/JavaScript/CSS widget fulfilling a similar purpose, whether it be a self contained package or library plugin, before starting to write your own code from scratch.

Chrome extension on text changed event on text field, then replace text

I'm working on a Chrome Extension which I want to replace certain characters in a specific text field on one specific website. It is basically to change emoticon text (like ":-D") into the proper emoji's, such as "😄". I tried a few things I found online (I'm not very good with JS):
- A MutationObserver and then look for all text fields with a certain name, then replace all emoticons by hand. Didn't really do the job properly and also kept firing up the print window for some reason
- Event listener added with event 'keyup' but it doesn't seem to fire up.
Hope you guys know a good solution!
This question does not give anywhere near enough information to answer. Are you using the program for input fields on the website? What solutions have you tried? Where is the code? Essentially, you are asking us to write the entire program for you. This forum is meant for programming help, NOT doing the entire program for you. You need to fix the question to be more specific.
If you just want to replace text elements, you would have to use the select elements by tag name to select all text elements on the page and then search through each of these for the sets of emoticons. Once finding these, you would have to change the elements inner html to fit the emoticon from UTF-8.

Transfer selected item from select to div and back

I'm trying to achieve something, but I don't know if it is even possible.
On a page I have a selectbox with a number of options. There's also a div section on the same page.
I would like to be able to select one or more options, press a button and make the selected items disappear from the selectbox, and appear inside the div. And all this sorted as well.
Now, I have got this part of the code working (have to admit that I "borrowed" the code from several places...)
code:
JSFiddle
The second part I'd like to achieve is to be able to select the elements in the div, click another button, and have the elements removed from the div and re-appear in the selectbox. Sorted again.
I think I have to change the type of the element when transferring from selectbox to div (maybe into an li ?), in order for them to be selectable, and on the way back, convert the type to <option> again, but I don't know how....
What happens now when I select an option and bring it to the div, the text in the div also has the form '<option>'...'</option>' , because it has been exactly copied.
I'm hoping I'm making sense here, and I hope there is someone who can point me in the right direction. If I'm going about this in the completely wrong way, please tell me.
By the way, it's easy if I was using two selectboxes, but I can't. It has to be one selectbox and one div......
Thanks, Hans
As we said in main post comments, here are some issues you have :
How to select elements in jQuery
I know that you know, but in your example you want to move elements from a div to another, you'll need for that to put each value in a div (then you'll be able to select each one).
How to make div selected
Your second issue is that you want to be able to select divs in the right box to copy them back in the select :
$("body").on("click", ".rightElements", function(key, element){
$(element).addClass("selected");
})
Then you can do :
$(".rightToLeftButton").click(function(){
// Your $(".selected") divs value go to the select
});
This piece of code provides new issues :
How can I unselect selected on clicking other divs ?
How can I select multiple divs ?
Etc. etc.
(I'm sure with practice, tests, and logic you'll do it!)
If you achieves these points, you can achieve all others of your problems, when you have a problem you can't explain with an unique phrase (who can be long :)), ask you if there are not several issues, separate them and look for answers !
It seems rude but you should take a look at :
http://eloquentjavascript.net/
https://jquery.com/
https://developer.mozilla.org/en/docs/Web/JavaScript
https://stackoverflow.com/tags/javascript/info
Regards,

What is the most simple and visually good way to imitate html elements selection like in winform designer?

I doing kind of special purpose html editor.
I have an TreeView of html tags hierarchy on the page.
I want to make html elements selection when I change selected node in TreeView.
For example, if I selected div or table or button in TreeView, I want to make that element look like selected on the page shown right near TreeView.
How could I do that? Changing element bgcolor is kinda not good in rare cases, when element do not support it. Would be perfect to show bold rectangle around selected element, but I don't know how.
I know how to invoke JS from WebBrowser, I ask about JS solution. Some ideas for what function like that would do:
function SelectObject(element_id)
{
}
I want smething like that:
If you're happy with background color change, use it. For elements which does not "support" background change, use element-type-specific thing, which you can implement later.
Or, you should use an overlay. There's an article how to find out position of elements http://www.codeproject.com/Articles/35737/Absolute-Position-of-a-DOM-Element

Javascript: Getting and saving text selection ranges in a database

I'm building a gramma-checker system for a client, where users can add comments/suggestions to a given text. When a user selects some text, a button appear to create a comment/suggestion to that given text selection. My problem comes when I want to save the text selection range in a database, along with the comment/suggestion.
I'm currently trying to solve the problem by using Rangy (http://rangy.googlecode.com/).
These are the ideas I'v tried so far:
Using the rangy serializer to serialize the range. The problem with
this approach is that the DOM is changing each time a new
comment/suggestion is added, and therfore not allowing for a
successful deserialization.
Using the rangy selection wrapper and save that directly in the
database, but like the idea above, the target elements content is
changing with each comment/suggestion, which again makes the approach
not work as intended.
Any suggestions to how I could solve this problem would be appriciated.
I haven't used rangy. But here is one way I would approach it.
Get a selected text from a element (tutorial here)
Then add a wrapper span with a specific id to it. (You might want to fetch a unique id from your server)
Then show a form to enter comments.
On Submit, send the span id and comment to server and store it in database.
When re rendering you can easily assign a class to this span to mark it and show comments on hover using css.
This will give you a system like google document where you can comment on text.
Let me know if that helps or you need more explanation on how to accomplish individual steps.
Advantage of this is you dont need to send the selected text back to server or worry about serializing. Just the id of span you wrapped it in.

Categories