Making a textbox appear/exist - javascript or jquery? - javascript

If the user enters a certain word into a text box I would like a second text box to appear on the screen (for them to enter new information). Does anyone know how to do this in javascript or jquery (and if in JQuery what library must I include?)

You can do it using JavaScript keyUp event, if you would like to make it using jQuery, this page is a good place to start.

What you want to do is add a onkeyup function to the textbox and inspect the value of the textbox everytime your method is called, based on this value you can then do whatever else is necessary

I will program it up in javascript (which I know quite well but haven't used in a while) using the onkeyup event - I didn't want to reinvent the wheel so thought I'd ask as surely someone has done this before but I realise now from being voted down that stackoverflow is not open to this kind of approach - i.e. you need to put in the time and only if failing ask a question.
I was hoping also for some advice about using jquery which I haven't used much but of course it can be done in javascript

Related

How to display radio button on an alert box

Is it possible to have a radio button in an alert box?
The requirement is, not to use any modal box, that why we just think if it's possible with alert box or confirm box. then we can good to go.
Any help will appreciate.
Sample Screenshot is below.
i don't guess. i know that this is in fact impossible.
the reason is simple:
alert(), prompt() aswell as confirm() were part of html + js since js exists.
they never got deprecated though they break the asyncronous flow of javascript.
this is essentially why they only allow you to play around with strings.
they were never intended to be feature rich.
they were actually invented out of the blue because the inventor (Brendan Eich) thought they'd come in handy. (wich at that time was more than enough for everyone)
they are by design blocking operations and should be avoided as much as possible.
to get around them simply create a so called modal dialog (thats basically a <div> with position: fixed above the pages content.
benefit:
you can easily make it appear as you want and you would not break any network connections or behavior of your application.
PS:
don't use w3schools as reference for learning or anything else.
they are a low quality database. you should look stuff up on mdn or other sites but should seriously avoid w3schools since it's not feature complete on any topic.
keep in mind this is an opinion.
It is impossible to use radio inside of alert window.
Message parameter in window.alert(message); has a string type and you cannot put Object or HTML there (will be transfomed to string).
Do not overuse window.prompt() Method , as it prevents the user from accessing the other parts of the page until the box is closed.
Window prompt Usage Note

jQuery: sync two text fields without using val()

My question is similar to this or this question.
However all the answers there use jQuery's val function to copy the value between the fields.
I cannot use val since the source input field will be readonly.
Therefore I want to capture the keyboard events on a source input field and based on these populate a target text field. Can it be done?
I was hoping something like this would do it, but it doesn't work.
$(".src").keyup(function(e){
$(".target").trigger(e);
});
Any ideas?
Your question doesn't make much sense. You say:
the source input field will be readonly and thus will only be able to listen to keyboard events.
... but that doens't make much sense. If it's readonly, you cannot focus the field... meaning you cannot give it keyboard events. Regardless, you can always get and set the value of a field, even if it's readonly or disabled. If you don't want to use jQuery's val() - then use plain JS.
$(".src").keyup(function(e){
document.getElementsByClassName('target')[0].value = e.target.value;
});
Update: Now I think I understand your question. Your main goal is that you want to modify the color of the caret by hiding the focused field and writing to another field. Not sure why you want to do this as I assure you your users don't care and you run the risk of interfering with the users experience... and as I type this message I don't even notice the color of the caret in Chrome... buuuut, I have a feeling that you still think that your inputs are more special than others. I feel for your users who try and put the cursor at an earlier point in the input to fix a typo... I digress.
Instead of 2 inputs, create a single input, set it's opacity to 0, and write the entire value to a DIV whenever it changes. This has many benefits:
You get many of the default behaviors of the input without actually needing to see it (eg. cursor on hover on desktop, keyboard navigation, etc).
Your form can still do a vanilla submit without needing to copy values or any other javascript weirdness.
Any other code, validation scripts, etc don't need to change - the input is still getting a value and emitting all events.
https://jsfiddle.net/2sp92bpy/1/

Jquery detect textbox programmatic change

Long story short I am cowboying some code in which a custom framework I am using allows me to insert a script to manipulate the page to do what I want.
I want to fire a function, but only after the textbox I want to use has been populated from the webservice that gets called.
In Jquery/Javascript is there anyway to call a function like the jquery change function, but one that can detect when the textbox has been changed from javascript, and not by the user in the browser.
I currently just have:
$("#mytexbox").on('input propertychange paste change',function() {
doSomething();
});
But this does not fire when the original function in locked code sets the value of the textbox.
Note: I can not just overload the original function as most of it is built up from dynamic server side code that I can't mimic in Javascript.
I also want to avoid having to use setTimeout() as this is unreliable and not really a nice solution.
Thanks in advance!
Maybe you can use a hidden div or input and check the changes on this instead of changes on #mytextbox. Obviously, the user can not change the hidden div, but the script can. You get the trick? ;)

How to simulate keypress in an iFrame using javascript or query

I am currently trying to write a script using javascript along side a bit of html and some css - but let's stick with Javascript as thats where, I think, my problem comes from...
In short what I want my program to do is these following points:
I have an iFrame in the main window of my program.
The iFrame is used to access a website (obviously duh :P)
There is a button outside of the iFrame.
That button will call a function when pressed by the user.
HERE'S MY PROBLEM:
I want that function to simulate the press of a keyboard key (in that case, a number key followed by the ENTER key twice.
The thing is, I need to 'simulate' these keypress inside the iFrame, so they interact with the website that is access through the iFrame.
In short, I can't seem to find a way to interact with the website in iFrame from outside of it. I would prefer a solution using pure JS but I'm fully aware that there would probably be a much simpler solution using Jquery. So I'm open to either one of them.
I don't think that pieces of my code would help as there is basically nothing coded so far, besides the main function and the basic layout of the page. I'm ready to redo the whole architecture of what I've done so far if needed.
Thanks for you help.
Yann

Apply with LinkedIn Plugin - Language Support

First of all I am disappointed that the plugin itself is only in English. If the user clicks the Apply with LinkedIn button and logs into a French profile, for example, it displays correctly. Only to return to a page with the plugin displaying "Already Applied" in English.
To get around this I wrote some javascript to replace the "Apply with LinkedIn" and "Share" text with French equivalents after the buttons load. The issue I now have is with the "Already Applied" version of the button. It appears that it loads asynchronously to the actual plugin meaning that it overrides my French text in some cases, but other cases it does not.
I know that I can harness the onsuccess event when an application is submitted. However when that LinkedIn user revisits the page the "Already Applied" text does not always appear in the correct language.
Question 1: Has anyone had luck with any techniques to achieve the desired results?
Question 2: When oh when will LinkedIn finally properly support this?
Any help or direction is much appreciated.
Thanks!
UPDATE:
I can confirm that Igor F.'s solution to use the setInterval function and check every 100ms for a change was the best option and worked flawlessly in all tested browsers.
Thanks for all the help and suggestions!
The plugin seems to receive its information asynchronously from the server and act upon it, i.e. change the content of the page. Have you tried listening to DOM mutation events?
Here is an example how they work when the user causes a change in the web page:
<html>
<!-- This is just mock-up to allow user to modify the DOM -->
<body>
Text to add: <input id="in1" type="text"/>
<button onclick="addNode();">Add node</button>
<p id="toAdd"></p>
</body>
<script type="text/javascript">
function addNode() { // adds a text node to the <p> element
document
.getElementById("toAdd")
.appendChild(document
.createTextNode(document
.getElementById("in1")
.value
)
);
}
///////////////////////////////////////
// Here comes the interesting part: !!!
document
.getElementById("toAdd") // listen to modifications of the <p> element
.addEventListener(
"DOMSubtreeModified", // in this case all modifications of its subtree
function() {
alert('Modified!'); // change this to whatever fits your purpose
}
);
</script>
</html>
More about mutation events here. If you want to support IE < 9, you'll need a different approach. Maybe periodically check, e.g. every 100 ms, whether the web page contains the English button and change it into French. See setInterval(). This should be future-proof (mutation events are deprecated), but probably even more inefficient (slow).
In any case, it's a hack. Only LinkedIn can provide a clean solution, e.g. allowing for a language code parameter for the plugin.
From what I gather, this is the problem you're seeing:
The button initially loads with the text "Already Applied".
You modify the button text to change the text to French.
LinkedIn modifies the button text to change it to "Already Applied".
...and it's intermittent because sometimes 3 happens before 2.
I can't think of a "good" solution to this problem, though I would like to hear if Igor's answer works. I can think of a good hack:
The asynchronous call must be targeting the button somehow, probably through its classname*. So after you've changed the text to French, change the classname to something else. This way the asynchronous call will fail, and your text will never be overridden.
The consequence is that LinkedIn will lose all access to this button, but since it's an Already Applied button, I don't think that will matter. You also risk losing CSS attributes selected using the classname, but looking at a LinkedIn button in the wild, I think the styles are all inlined anyway (and you could always duplicate them yourself under a new classname if you had to.)
Good luck!
* It's also possible that LinkedIn is storing a JavaScript reference instead of targeting via the classname. This will be harder to track down, but the same rule applies: find whatever part of the page LinkedIn uses to identify that button, and destroy it.

Categories

Resources