Javascript Textbox to Variable - javascript

I have been working on a little project for a day or two. The code is the following.
<!DOCTYPE html>
<html>
<head>
<script>
function search()
{
document.getElementById("text1").value
window.location.hash = "myVariable";
}
</script>
</head>
</body>
<form name="myform">
<input type="text" name="text1" value="">
<input type="button" value="Search" onclick="search()">
</form>
<div style="height: 4000px"></div>
<span id='yeah'>I have successfully jumped.</span>
<div style="height: 4000px"></div>
</body>
</html>
Now you may be wondering what am I trying to accomplish with this code? Well, I want to be to enter a value in the text box and then it will jump me to the section (the section is the value in the text box). It is sort of like a search engine, but it is not.
For example the section is yeah. When a user enters yeah in the text box it is supposed to jump them to the yeah section. Instead nothing happens. And despite looking all over the Internet I have not found an answer that satisfies my needs, so I would kindly ask that you please explain to me what my problem is and possibly give me a solution to my problem.
I am using the Mozilla Firefox web browser (if that information is necessary).

Try this:
function search()
{
var elID= document.getElementById("text1").value;
var el = document.getElementById(elID);
el.scrollIntoView(true);
}
The Element.scrollIntoView() method scrolls the element into view
Online Demo

Dalorzo's should work, but jQuery could be the better option than raw javascript if you plan to add more than just this function.
Here's a fiddle of what you're trying to do.
$("#button1").click(function() {
var t = $("#text1").val();
alert(t);
$('html, body').animate({
scrollTop: $("#"+t).offset().top
}, 2000);
});

Related

Text Area in JSP Enter to implement a functionality

I am using Spring MVC and I have created a textArea in it, I want to add a functionality: When user presses 'Enter' two times the cursor will automatically go to next line and indicate the paragraph number in the new line:
Here is the code for TextArea:
<textarea name="notings" style="width:800px ; height:200px" ></textarea>
Example:
Users types something ...
................................ //Presses enter key 2 times consecutively
types something else....
I am clueless in implementing this functionality. I am a starter at front end development and don't know javascript as well. A little help will be much appreciated.
If someone could point me towards the right direction, that will also help alot
Thanks in advance
You try this way
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var pn=1;
var count=0;
function newLineFun(e)
{
if(e.keyCode==13)
{
count++;
if(count==2)
{
count=0;
var oldData=$("#txtArea").val();
$("#txtArea").val(oldData+pn);
pn++;
}
}
else{
count=0;
}
}
</script>
</head>
<body>
<textarea id="txtArea" name="notings" style="width:800px ; height:200px" onkeypress="newLineFun(event)"></textarea>
</body>
</html>

Make result box appear after searchbar

So, I am creating a website and I need to make a result box appear with a list of possible results after the user searches something in the search bar.
It's something like this: http://s24.postimg.org/4qqgz0t6d/Sem_T_tulo.png
The results box will only appear after the user clicks the "search" button.
I am only looking for the javascript code that makes that box appear. The search algorithm is another problem that I think I can handle.
Do you guys know something that can help me? At least something where I can start from...
Thanks.
This should get you down the right path:
<!DOCTYPE html>
<html>
<head>
<style>
#results-container
{
height:200px;
width:400px;
border:1px solid #A9A9A9;
}
</style>
</head>
<body>
<form action="#">
<input type="text" />
<button id="search-button" type="submit">Search</button>
</form>
<div id="results-container" style="display:none;">
Results go in here.
</div>
<script>
document.getElementById("search-button").addEventListener("click", function(e){
e.preventDefault();
document.getElementById("results-container").style.display = 'block';
});
</script>
</body>
</html>
You would obviously have to handle all of the search related events but this demonstrates how to show the results container after submitting. I also recommend using a javascript framework such as http://jquery.com/ especially if you'll be using AJAX for the dynamic generation of results.

How do I get HTML button value to pass as a parameter to my javascript?

I have multiple buttons corresponding to multiple text areas to clear. I need to send to have a function to handle all of these buttons and handle each seperately
<html>
<head>
<script src="jquery-1.6.js"></script>
<script type="text/javascript">
function getUniqueButtonValue(value)
{
alert(value);
$("value").hide();
}
</script>
</head>
<body>
<button id=someUinqueId value=something>Clear Selection</button>
</body>
</html>
Setting aside the fact that you're placing a unique id in the value attribute rather than the id attribute... here's a fiddle.
$(document).ready(function(){
$("button").click(function(){
var me = $(this);
// do whatever with me
alert(me.val());
me.hide();
});
});
There seem to be numerous problems with the code you've posted in your question. Firstly, (unless you're using <!DOCTYPE html> as your doctype) you can't have id values starting with a number.
Secondly, the jQuery (I'm assuming it's jQuery and not some other JS library) in your getUniqueButtonValue function is not going to work, because the selector is going to look for a value element, which is unlikely to exist.
I'm assuming that the value attribute of your button is meant to correspond to the id of another element, which you want to hide when the button is clicked.
As you have what appears to be jQuery code in your example, I will give you a jQuery solution to this, as it's far simpler:
$(document).ready(function() {
$("button").click(function() {
alert(this.value);
$("#" + this.value).hide();
});
});
Also, you don't close your body tag, but I'm guessing that's just a mistake in copying and pasting the code into the question.
You can do this:
<button id=123 value=uniqueId545 onclick="javascript:getUniqueButtonValue($(this).val());">Clear Selection</button>
try this
$("#123").click(function(){
getUniqueButtonValue($(this).val());
});
I'm not sure what you are trying to do here. If i guess correctly this is what you want (ids shouldn't begin with a number so I put an 'a' before the 123:
$("#a123").click(function(){
getUniqueButtonValue($("#a123").getAttribute('value');
}
function getUniqueButtonValue(value)
{
alert(value);
$("#"+value).hide();
}
</script>
</head>
<body>
<button id=123 value=uniqueId545>Clear Selection</button>
</html>
You can save yourself a lot of work by trying:
<button class="clearbutton" value="#Foo">Clear Foo</button>
<input type="text" name="foo" id="foo" />
With the following JavaScript:
$('.clearbutton').click(function(e) {
$($(this).val()).val('');
});

Javascript text field live view

I am trying to make a similar bit of code like at the bottom of this page to leave a comment. I have the basic code but the output does not register new lines (or HTML, but that isn't important). I have the function below called on key-up on the text field. Any help would be greatly appreciated. Thanks
Here is the whole page (Now working)
<html>
<body>
<form>
<textarea id="text" onkeyup="outputText()"></textarea>
</form>
<div id="outputtext" style="width:500px;">
</div>
</body>
<script type="text/javascript">
function outputText()
{
var text = document.getElementById('text').innerHTML;
document.getElementById('outputtext').innerHTML = (text + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1<br>$2');
}
</script>
</html>
document.getElementById('outputtext').innerHTML = (text + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1<br>$2')
Have you tried getting the textarea contents as
var text = document.getElementById('text').value; instead?
I think it's good for you to take a look at how tools like jQuery can make your live easier in this kind of cases. Your particular question is a bit unclear however...can you give us more details?
You can use the <pre> (preformatted) tag so that html and carriage returns are represented without doctoring the field input
html:
<input id="text" type="text" />
<pre id="outputtext"></pre>
jQuery:
$(document).ready(function () {
$('#text').keyup(function () {
$('#outputtext').html($(this).val());
});
});

How to focus on a form input text field on page load using jQuery?

This is probably very simple, but could somebody tell me how to get the cursor blinking on a text box on page load?
Set focus on the first text field:
$("input:text:visible:first").focus();
This also does the first text field, but you can change the [0] to another index:
$('input[#type="text"]')[0].focus();
Or, you can use the ID:
$("#someTextBox").focus();
You can use HTML5 autofocus for this. You don't need jQuery or other JavaScript.
<input type="text" name="some_field" autofocus>
Note this will not work on IE9 and lower.
Sure:
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#myTextBox").focus();
});
</script>
</head>
<body>
<input type="text" id="myTextBox">
</body>
Why is everybody using jQuery for something simple as this.
<body OnLoad="document.myform.mytextfield.focus();">
Think about your user interface before you do this. I assume (though none of the answers has said so) that you'll be doing this when the document loads using jQuery's ready() function. If a user has already focussed on a different element before the document has loaded (which is perfectly possible) then it's extremely irritating for them to have the focus stolen away.
You could check for this by adding onfocus attributes in each of your <input> elements to record whether the user has already focussed on a form field and then not stealing the focus if they have:
var anyFieldReceivedFocus = false;
function fieldReceivedFocus() {
anyFieldReceivedFocus = true;
}
function focusFirstField() {
if (!anyFieldReceivedFocus) {
// Do jQuery focus stuff
}
}
<input type="text" onfocus="fieldReceivedFocus()" name="one">
<input type="text" onfocus="fieldReceivedFocus()" name="two">
HTML:
<input id="search" size="10" />
jQuery:
$("#search").focus();
Sorry for bumping an old question. I found this via google.
Its also worth noting that its possible to use more than one selector, thus you can target any form element, and not just one specific type.
eg.
$('#myform input,#myform textarea').first().focus();
This will focus the first input or textarea it finds, and of course you can add other selectors into the mix as well. Handy if you can't be certain of a specific element type being first, or if you want something a bit general/reusable.
This is what I prefer to use:
<script type="text/javascript">
$(document).ready(function () {
$("#fieldID").focus();
});
</script>
place after input
<script type="text/javascript">document.formname.inputname.focus();</script>
The line $('#myTextBox').focus() alone won't put the cursor in the text box, instead use:
$('#myTextBox:text:visible:first').focus();
$("#search").focus();
You can also use HTML5 element <autofocus>
The Simple and easiest way to achieve this
$('#button').on('click', function () {
$('.form-group input[type="text"]').attr('autofocus', 'true');
});

Categories