create a textbox that will change value of a text

Question

1.00/5 (2 votes)

See more:

how to create a textbox where users enter a value that will change the result of another text below it.

example

HTML

<form>
<input type="text" value="">
<input type="button" value="Apply" >
</form>
<p>The Value is <value></p>

when the apply button is clicked the <value> will print the value provided by user.

Posted 1-May-15 5:47am

Member 11657400

Updated 1-May-15 5:55am

Thomas Daniels

v2

Add a Solution

Comments

ZurdoDev 1-May-15 12:00pm

Just google for some javascript example of how to get text value and how to get text value. Quite easy.

John C Rayan 1-May-15 12:05pm

Your title is confusing because all you have to do is get the value of textbox using document.getElementById("id_of_textbox").value and assign to the target element. Where do you want to change the value as suggested by your title.

4 solutions

Solution 4

The complete solution is as following.

HTML

<html>
<title>Get Value</title>

<script type="text/javascript">
function ShowValue() {
    document.getElementById('value').innerHTML = document.getElementById("txtBox").value;
}
</script>
<body>

<form>
<input type="text" value="" id="txtBox">
<input type="button" value="Apply" onclick="ShowValue()">
</form>
<p>The Value is <span id="value"></span></p>

</body>
</html>

Posted 1-May-15 8:14am

BD Star

Solution 3

Solution 1 explains what you can do. A convenient way for such manipulation would be using jQuery.

First, you can get the jQuery wrappers of the HTML elements using selectors:
http://api.jquery.com/category/selectors[^].

For example, given the id attributes from Solution 1, you can get

C#

var input = $("#inputTxt");
var button = $("#applyBtn");
var span = $("#value");

Then you can add an event handler and use jQuery .val() to read and write value on button click.

JavaScript

button.click(function(){
    var value = input.val();
    span.val(value);
});

Please see:
https://api.jquery.com/click[^],
http://api.jquery.com/val[^].

If you need to learn jQuery (highly recommended), please see:
http://en.wikipedia.org/wiki/JQuery,
http://jquery.com,
http://learn.jquery.com,
http://learn.jquery.com/using-jquery-core,
http://learn.jquery.com/about-jquery/how-jquery-works (start from here).

—SA

Posted 1-May-15 6:22am

Sergey Alexandrovich Kryukov

Comments

Thomas Daniels 1-May-15 12:30pm

+5

Sergey Alexandrovich Kryukov 1-May-15 12:31pm

Thank you.
—SA

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

jgakenhe · Accepted Answer · 2015-05-01T06:11:00

This should work for you.

XML

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script language="JavaScript">
function ShowMessage() {
    var message =  document.getElementById("text").value;
    document.getElementById('display').innerHTML = "You entered: " + message;
}
</script>
</head>
<body>
<form>
Enter: <input type="text" name="message" id="text">
</form>
<input type="submit" onclick="ShowMessage();"><br />
<span id="display"></span>
</body>
</html>

Thomas Daniels · Accepted Answer · 2015-05-01T06:07:00

You have to use JavaScript[^] for that.

First, wrap the <value> in a span tag and give IDs to the elements. That way you can easily access them from JavaScript:

HTML

<form>
<input type="text" value="" id="inputTxt">
<input type="button" value="Apply" id="applyBtn">
</form>
<p>The Value is <span id="value">[value]</span></p>

Then, add a <script> tag to your head tag, and put the JavaScript code in there. The code will add a click event handler to your button, and when the button is clicked, it will fetch the text from the textbox and put it in the span in the paragraph:

HTML

<script type="text/javascript">
window.onload = function() {
    document.getElementById("applyBtn").onclick = function() {
        var txt = document.getElementById("inputTxt").value;
        document.getElementById("value").textContent = txt;
    };
};
</script>

More information on the used methods in the JavaScript code:

create a textbox that will change value of a text

4 solutions

Solution 4

Solution 3

Solution 2

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us