This code changes whatever the user types in the box to uppercase, and displays the result in the box.
<html>
<head>
<script type="text/javascript">
function upperCase(x)
{
var y=document.getElementById(x).value;
document.getElementById(x).value=y.toUpperCase();
document.getElementById("mySpan").value=y.toUpperCase();
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onkeyup="upperCase(this.id)">
<br/>
<span id="mySpan"></span>
</body> </html>
But how can I make it so that it displays it UNDER the text box? And that when the user types, the upper case text is displayed under the text box?
Thanks!
I would suggest the following, more maintainable approach, which uses the event registration model as opposed to the inline model:
JS:
<script>
document.getElementById("fname").onkeyup = function() {
document.getElementById("mySpan").innerHTML = this.value.toUpperCase();
}
</script>
Markup:
Enter your name: <input type="text" id="fname"/>
<br/>
<span id="mySpan"></span>
Demo: http://jsfiddle.net/karim79/GPZ8h/
Create a css class
.showUpperCase { text-format: uppercase; }
and add this to your span or textBox.
<span id="mySpan" class="showUpperCase"></span>
This doesn't change the characters entered, only shows them as upper-case.
That means that if you're handling input via a textBox, you'll have to
change to upper-case server-side as well. This is not an additional
chore, since you have to be wary of client-side handling and da a server-side verification, regardless of what the client does
Related
I need to display boilerplate text on a web page and give visitors the ability to update the text by submitting a value in a text box. I have two issues:
I can only use the text box value once but I want to use it multiple. I understand this is due to using document.getElementById. I should be using document.getElementByClassName however I am having troubles making this work.
I would like to include a default value within the boilerplate text that would then be replaced by the value from the text box. For example "your company" would be replaced with "XYZ Company" (or whatever the user submits in the text box).
I have the following code:
<!DOCTYPE html>
<html>
<body style="text-align:center;">
Company Name:
<input type="text"
id="myText"
value="">
<button type="button"
onclick="myFunction()">
Submit
</button>
<p>I would like to use the name, <strong><span id="demo"></span></strong>, multiple times in this text. I'd like to use it <strong><span id="demo"></span></strong> and again <strong><span id="demo"></span></strong>.</p>
<script>
// Here the value is stored in new variable x
function myFunction() {
var x =
document.getElementById("myText").value;
document.getElementById(
"demo").innerHTML = x;
}
</script>
</body>
</html>
What am I missing? Any direction is appreciated. Thanks in advance.
First of all, you should be using the classes, since ids are meant to be unique. Second, when calling getElementById() (or even querySelector()), you are only getting the first element that matches the query. You should give all of the the elements a shared class, select them all with querySelectorAll(), then loop over them all, as in the following:
<!DOCTYPE html>
<html>
<body style="text-align:center;">
Company Name:
<input type="text"
id="myText"
value="">
<button type="button"
onclick="myFunction()">
Submit
</button>
<p>I would like to use the name, <strong><span class="demo"></span></strong>, multiple times in this text. I'd like to use it <strong><span class="demo"></span></strong> and again <strong><span class="demo"></span></strong>.</p>
<script>
// Here the value is stored in new variable x
function myFunction() {
var x =
document.getElementById("myText").value;
// select all elements with class ('.') of 'demo'
const allDemoElements = document.querySelectorAll(".demo");
// loop over each element, and alter innerHTML
allDemoElements.forEach(el => {
el.innerHTML = x;
});
}
</script>
</body>
</html>
After trying multiple ways of what I want to do, which all failed, I'm asking here. This is probably pretty basic, but I just can't do it.
What I essentially want to do:
Create a variable
"Assign" a text box (value) to it
Automatically have the variable's content change to whatever is put into the text box
Potentially have the variable's value used somewhere else immediately
If the user had to press a button to update the element using the variable's value, that'd be OK, too, I just want to have this done.
Alright, I have to correct myself. Another try worked, with the result of 'undefined'.
<head>
<meta id="test3" charset="utf-8">
<link rel="stylesheet" href=".\css\Starter.css">
<title id="test1">TITEL</title>
<script>
function txtSet(txtInp) {
var txt = txtInp.value
document.getElementById('txtP').innerHTML = txt
}
</script>
</head>
<body>
<input type="text" id="txtInp" onkeyup="txtSet(txtInp.value)"></input>
<p id="txtP"></p>
</body>
Try this one:
<body>
<script>
var a = "";
function changeVariable(){
document.getElementById('demo2').value=document.getElementById('demo').value;
}
</script>
<input type="text" id="demo" onkeyup="changeVariable()"></input>
<input type="text" id="demo2"></input>
</body>
I think that you're searching for onkeyup if it's so: you can use as it follows:
In your html
<input type="text" name="name" id="id" onkeyup="yourFunction(this.value);">
and in your js file
var theVariable;
function yourFunction(theTextInTheTextBox){
theVariable = theTextInTheTextBox;
}
It could also be onkeypress or onkeydown events, just try the three to see which is the one that you're actually searching for. To see the difference between the three I advise you to take a look at this link
What I want to do is allow the user to input a string then display that string in the web page inside a div element, but I don't want the user to be able to add a bold tag or anything that would actually make the HTML text bold. How could I make it so the text entered by the user does not get converted into HTML code, if the text has an HTML tag in it?
Use createTextNode(value) and append it to your element(Standard solution) or innerText(Non standard solution) instead of innerHTML.
For a JQuery solution look at Dan Weber's answer.
here's a neat little function to sanitize untrusted text:
function sanitize(ht){ // tested in ff, ch, ie9+
return new Option(ht).innerHTML;
}
example input/output:
sanitize(" Hello <img src=data:image/png, onmouseover=alert(666) onerror=alert(666)> World");
// == " Hello <img src=data:image/png, onmouseover=alert(666) onerror=alert(666)> World"
It will achieve the same results as setting elm.textContent=str;, but as a function, you can use it easier inline, like to run markdown after you sanitize() so that you can pretty-format input (eg. linking URLs) without running arbitrary HTML from the user.
use .text() when setting the text in the div rather than .HTML. This will render it as text instead of html.
$(document).ready(function() {
// Handler for .ready() called.
$("#change-it").click(function() {
var userLink = $('#usr-input').val().replace(/.*?:\/\//g, "");
$('#users-text').text(userLink);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="form-control" id="usr-input">
<br>
<button id="change-it" type="button">Update Text</button>
<br>
<div id="users-text"></div>
Why not simply use .text() ?
$('#in').on('keyup', function(e) {
$('#out').text($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="in">
<br>
<div id="out"></div>
I am trying to get something that looks through a div with an id of 'Holder' and searches for a string. Preferably this string would be case-insensitive. This string would be have an input connected (variable is 'Terms'). Once the code has found all the paragraphs that have the string, add a class to them called 'Found'. I do not have that much knowledge with Jquery (just the very basics) so if anyone could help me, that would be fantastic!
Code so far:
<!DOCTYPE html>
</html>
<body>
<p id="header">Searcher</p>
<hr>
<p id="form">
<input autocomplete="off" id="Bar" name="Input" type="text" placeholder="Search for word or phrase">
<button type="button" id="sea" onClick="Search ()">Search</button>
<br>
</p>
<div id="Holder">
<p id="Note">This is a test paragraph uses to test.</p>
<p id="Note">For jquery. I want to search for this paragraph using "for jquery".</p>
</div>
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="test.js">
</script>
</body>
Here is a working code sample. You should read the comments because I made a few changes to how you were doing things in order to improve code quality. There is still more that could be done (like using a real form), but this should get you pointed in the right direction. If my comments aren't clear, feel free to ask why I made the changes that I did and I'll try to provide a better explanation.
<html>
<style>
.match-found {
background: yellow;
}
</style>
<body>
<p id="header">Searcher</p>
<hr>
<p id="form">
<!--
You should use a real form and attach to the submit handler, but I
feel the need to leave something as an exercise for the reader
-->
<input autocomplete="off" id="bar" name="input" type="text" placeholder="Search for word or phrase">
<button type="button" class="search-text" data-search-target="#holder">Search</button>
<br>
</p>
<div id="holder">
<p id="note">This is a test paragraph uses to test.</p>
<p id="note">For jquery. I want to search for this paragraph using "for jquery".</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
function search(searchTarget, term) {
// lowercase terms because uppercase should be reserved for constructors
// also made it singular because we're looking for an exact match, not
// a list several separate terms.
// (if I understand your problem description correctly)
term = term.toLowerCase();
// If you're searching for simple terms, regex would be better,
// but since I'm not sure how you'll actually be using this,
// lowercasing the string and searching for a containing string will
// provide more consistent results because we won't have to worry about
// escaping special characters and the like.
$(searchTarget).find('p').each(function() {
var searchText = $(this).text().toLowerCase();
if (searchText.indexOf(term) !== -1) $(this).addClass('match-found');
// match-found is more descriptive that 'found'.
// Also avoiding caps again because capitilization has specific meaning
});
}
// A better way to attach event listeners
$(document).ready(function() {
$('.search-text').click(function() {
var searchTarget = $(this).attr('data-search-target');
var searchText = $('#bar').val();
search(searchTarget, searchText);
});
});
</script>
</body>
</html>
$("#sea").on("click", function() {
$("#Holder > p:contains('" + $("#Bar").val() + "')").addClass("found");
});
The above code attaches a click event to the search button #sea. Using the :contains() selector it searches all <p> tags which are direct children of #Holder for the value of #Bar and adds the class "found".
https://jsfiddle.net/mz0ge2w8/1/
i am just tyring to write a simple code that would print a user's input. here's what i have:
<script type="text/javascript">
function displayText() {
var input = document.getElementById('input').value;
document.getElementById('p').innerHTML = input;
}
}
</script>
and
<font face="arial" size="5" color="blue">Input section</font> <br/>
Query Sequence
<form name="form">
<textarea id="input" rows="8" cols="60" id="input" ></textarea><br/>
<button type="button" style="height: 25px; width: 100px" onClick="displayText()">Display Date</button><br/>
<p id="p"></p>
</form>
i have no idea why it doesn't work...
and another little question: what is the difference between assigning an ID and a name to a form tag in html? thanks!
function displayText() {
var input = document.getElementById('input').value;
document.getElementById('p').innerHTML = input;
} <--- extra brace
}
EDIT: in response to the note:
what is the difference between
assigning an ID and a name to a form
tag in html
An ID uniquely identifies the element, and can be used in either CSS styling, or to quickly obtain the element in JavaScript as you are doing.
The name attribute is what's used by the server side to identify the element and get it's value. For example:
<textarea id="input" name="textinput" rows="8" cols="60" id="input" ></textarea>
If this form was posted to a PHP script, you would access the value with like this:
echo $_POST['textinput'];
You can also navigate to elements using the name, but it's not recommended.
the code works fine in you example tho i se a } to much maybe thats why yours dosent work.
all modern browsers have good development tools you should try them they will tell you about syntactic errors.
the id is the id of your element in your dom the name is the name of the field that the value of that input is gonna represent when you post a form.