HTML Forms - Prewritten text - javascript

This may not be the best area for this question and if so I am sorry for that. However, I am trying to create a dead simple form that enters pre-written data into the fields when they hit a key. So example:
User Enters: Hello world, My name is...
But the input field will instead progressively write
Form: G'day, the weather is great today.
I've seen this done a few times but for some bloody reason I can't track down the tutorial for it.
Any help would be greatly appreciated.
Edit: I would like it to basically be this youtube

Use the jQuery tickertype plugin: http://www.hungry-media.com/code/jQuery/tickerType/

Related

How can I fill in simple forms using bookmarklets? Trouble shooting my simple code

Good afternoon,
To save time at work, I am trying to use js autofill scripts. Bookmarklets seems to be the best way of doing this but the simple code I have doesn't seem to work.
As a test page, I have been trying- http://gangstaname.com/names/gangsta#.Ymf-cujMJPa
as it's a simple site with just one form with an id.
I've created a bookmark and changed the code to
javascript:document.getElementById("NameGangstaForm").value = "Mark";
In theory from what I've read, upon clicking this it should change the field value from blank to 'Mark' but instead it blanks the whole page and inserts the new name in the top left corner.
Apologies for the page and my apparent lack of knowledge but any help would be greatly appreciated.
#NameGangstaForm is <form> you want to select <input> with element ID #NameName
javascript:document.querySelector("#NameName").value = "Mark";void(0);
it better to use querySelector() instead of getElementById() because in the future you can easy switch to jQuery or CSS

How to achieve suggestions in input field

Hi I had come across a question how to achieve suggestions in the input field while typing for example (in browser url bar while we typing first 3 to 4 letters it give suggestion if the url is correct we go with it else with single delete key press remove the suggested content). This need to be done with input field. Is this scenario is possible? Thanks.
There's a big range of possibilities here.
If the contents of the list are static or easily generated via code, you can use a native HTML <datalist> element.
If you are wanting autocomplete in the form using the user's previously-provided data, you can just enable via the <input autocomplete> attribute
If you're wanting far more customization, it's going to have to be some JavaScript that does the dirty work for you. Stack Overflow is not a good forum for getting library suggestions, but you should survey what's available in your current development stack.
This is absolutely achievable, have a look at - typehead.js
It's a javascript project for doing exactly what you're asking, I believe it's compatible with boostrap too.
Autocomplete suggestions are a very common Web Component. If you are using jQuery, you might want to try this component published by Materialize. If you are using, say, Polymer, you might want to try paper-autocomplete. If you are using vanilla javascript, you could try typeahead, or something like this autocomplete library. Most other modern web frameworks will have some alternative. I wouldn't really recommend making one from scratch.

Search function through text in my page using javascript

I am attempting to create a search bar for looking through text on my website without using external code (such as google's custom search engine).
I have been searching this for a while and without using php it doesn't seem like there is a good solution.
I have so far found this fiddle, but don't entirely understand how it works as I am new to js http://jsfiddle.net/pdgucocw/ (code from jsfiddle copied here:
function contains(text_one, text_two) {
return text_one.toLowerCase().indexOf(text_two.toLowerCase()) != -1;
}
$("#searchText").keyup(function(){
var searchText = $(this).val();
$("ul li").each(function() {
$(this).toggle(contains($(this).text(), searchText));
});
});
right now I have this:
<p id="q">
Some text, which is a lot of text, text text.
</p>
<p id="searchthru">
Lots of text
</p>
<form>
<input name="search" >
<button type="submit" name="Submit" onclick="return false;">Submit</button>
</form>
Which is, as you can see, just HTML.
I know this question is rather broad right now, so I'll try to specify what i'm attempting to do with it.
I have a landing page on the website, and then another page with quite a bit of text on it. The text page is well kept with aptly named headers and id's and so forth. I want a search bar on the text page (or even the landing page, but unless php is the only solution I would like to stay away from it).
Then, when someone puts something in the search bar, it can either search through the text in the headers and present the match, or search through all the text and then present the header text as the "options" for which to jump to in the search.
edit: This is to say to do whichever is more feasible/better user experience. I don't want the search bar to do both simultaneously, that makes little sense in my application.
For example, they type in "Water Parks" and they will be presented with options such as "Water Parks" "Parks" "Amusement Parks" "Theme Parks" etc. Then when they click their option, they will be brought to the correct section. If they type in "water" then the search bar will only bring up "Water Parks" assuming that the word 'water' is used multiple times but only in the Water Parks section.
I would very much appreciate it if someone would explain (as if to a 5 year old who is really good at understanding syntax but doesn't know what the functions do) the javascript code as they write it.
Eventually I would like to split up the text into many pages and I think that I would have to use php for that (from what I've read so far) but I would REALLY prefer a pure js solution. If this is impossible or otherwise just a bad idea, feel free to teach me php. Thank you so much.

Suggested values from the database

i want to suggested text values when user can type the letter in particular text box for example i will type a in my text box it will be retrieve all a value from the database and it suggested (eg: i type "a" means Air, apple, append like that) in mvc 2
You have not posted any code that you tried but if you want from scratch then have a look at following
This Jquery plugin might help you http://jqueryui.com/autocomplete/. On clicking View Source you can get all the code.
You can also have a look at this code http://www.devbridge.com/projects/autocomplete/jquery/
i think this might help. You type in a name and it brings up suggestions from a database.
http://www.w3schools.com/ajax/ajax_aspphp.asp
hope this is what you are looking for

Epub text box does not work

am having one task in epub (i.e) quiz .so the problem what iam phasing is,once the user read the question means he enter his answer in text box. so the problem is text box does not show the key pad for typing the answer.is any some other solution for this problem using java script?.is it possible
you can add javascript or a javascript plugin like jquery but there are some changes you will have to make to your code. I added a flex slider with just a few changes. First take out the leading xml call in the html file then use a cdata wrap for your script. If you go to my youtube channel I did a couple of videos on it about a year ago. http://www.youtube.com/watch?v=geAnFKbW9wI
Hope this helps.
You can use like below, am using this for interactive FL books.
<div contenteditable="true">_</div>
and also you can refer this for contenteditable change events.

Categories

Resources