document.write(); removes other HTML [duplicate] - javascript

This question already has answers here:
Why is document.write considered a "bad practice"?
(17 answers)
Closed 9 years ago.
I'm doing a test for a comment thing. All I want is to have a little text box where you type stuff and a button that says "Add Comment" that will document.write(); what you put in the text box under the add comment thing. But I'm getting a problem where document.write(); seems to be removing all the other HTML that was written out side the javascript (i.e. the textarea and the "Add Comment" button). When I press the "Add Comment" button, what I wrote in the textarea fills up the whole screen and seems to be blotching out the rest. Here is my code:
<html>
<head>
<script language="JavaScript">
function add1(){
var tf = document.getElementById('tf');
add2(tf.value);
}
</script>
</head>
<body>
<p>Type stuffz here:</p>
<textarea id="tf" wrap="logical" rows="10" cols="50"></textarea>
<!--<input type="textfiel" id="tf" value="Test">-->
<br>
<input type="button" onClick="add1()" value="Add Comment" >
<script type = "text/javascript">
function add2(input){
document.writeln(input);
}
</script>
</body>
</html>

You can not use document.write once the document has completed loading. If you do that then browser will open a new document and it will replace it with the current. So it is the design behavior of document.write
It would be better to use innerHTML to put HTML inside element
Try like this:
<html>
<head>
<script language="JavaScript">
function add1(){
var tf = document.getElementById('tf');
add2(tf.value);
}
</script>
</head>
<body>
<p id="test">Type stuffz here:</p>
<textarea id="tf" wrap="logical" rows="10" cols="50"></textarea>
<!--<input type="textfiel" id="tf" value="Test">-->
<br>
<input type="button" onClick="add1()" value="Add Comment" >
<script type = "text/javascript">
function add2(input){
var test = document.getElementById('test');
test.innerHTML = input;
}
</script>
</body>
</html>
Also check Why is document.write considered a “bad practice”?

Well instead of using document write, you should append or fill into targeted element, I modified your code a little bit, It might help you.
<html>
<head>
<script language="JavaScript">
function add1(){
var tf = document.getElementById('tf');
add2(tf.value);
}
</script>
</head>
<body>
<p id="test">Type stuffz here:</p>
<textarea id="tf" wrap="logical" rows="10" cols="50"></textarea>
<!--<input type="textfiel" id="tf" value="Test">-->
<br>
<input type="button" onClick="add1()" value="Add Comment" >
<script type = "text/javascript">
function add2(input){
var test = document.getElementById('test');
test.innerHTML = input;
}
</script>
</body>
</html>
If you wanna append only from original document, you can use it as
test.innerHTML = test.innerHTML + input;
Furthermore
How to append data to div using javascript?

Don't use document.write().Instead use innerHTML
Note:Your code will not work as you are using tf.value where tf is object of textarea which don't have value attribute. So I recommend to use innerHTML.
<html>
<script language="JavaScript">
<head>
function add1(){
var tf = document.getElementById('tf');
add2(tf.innerHTML);
}
</script>
</head>
<body>
<p id="test">Type stuffz here:</p>
<textarea id="tf" wrap="logical" rows="10" cols="50"></textarea>
<!--<input type="textfiel" id="tf" value="Test">-->
<br>
<input type="button" onClick="add1()" value="Add Comment" >
<script type = "text/javascript">
function add2(input){
var test = document.getElementById('test');
test.innerHTML = input;
}
</script>
</body>
</html>

The other comments are correct: document.write() is not something you want to be using. You'll still see that method suggested in some of the older books on JavaScript, but it's really a terrible way to modify the document, for many reasons I won't get into here.
However, no one's suggesting what you can do instead, so I'll point you in the right direction.
If you want to modify elements in your HTML, your best bet is to use the innerHTML property of DOM objects. For example, let's say you have a <div id="output"> that you want to add text to. You would first get a reference to that DOM element thusly:
var outputDiv = document.getElementById( 'output' );
Then you can either completely change the contents of that <div>:
outputDiv.innerHtml = 'Hello world!';
Or you can append to it:
outputDiv.innerHtml = outputDiv.innerHtml + '<br>Hello world!';
Or even more compactly with the += operator (thanks nplungjan):
outputDiv.innerHtml += '<br>Hello world!';
You should also look at jQuery at some point, which gives you a whole boatload of convenience functions to make these kind of manipulations a snap.
I hope this sets you in the right direciton.

Related

How to change content of page from input "forever"? (create primitive blog)

var text = document.getElementById('text');
var previousText;
function send() {
previousText = document.getElementById('text-place').innerHTML;
document.getElementById('text-place').innerHTML = text.value + "<br><br>" + previousText;
document.getElementById('text').value = "";
}
<!DOCTYPE html>
<html>
<body>
<input type="text" name="enter" class="enter" placeholder="Your text..." value="" id="text" />
<button onclick="send();" id="button">Send</button>
<p id="text-place"></p>
</body>
</html>
Hello, I need your help about one thing. I would like to create a primitive blog, but I can not figure out how to take value from the input of a "forever" be written to the tag so see it anyone, who comes to the site. I tried to search and I found only cookies in PHP. I have this JavaScript code, but I find out, that it's impossible. Does anyone here how to do it?Thanks in advance.

Set Input Value to Javascript Variable

Let's say I have a variable called x in javascript. How can I set the value of a text input (HTML) to that variable? For example:
The value of the input will now be Swag
<input type="text" value="Swag" />
But if I want the value to be a javascript variable? How do I do? Something like this? (I am just guessing, trying to make my point clear)
<input type="text" value="variable.x" />
You can set it in your javascript code like:
<input id="myInput" type="text" value="Swag" />
<script>
var test = "test";
document.getElementById("myInput").value = test;
</script>
This is a better solution and will probably avoid confusion for newbies...
<!DOCTYPE html>
<html>
<body>
<h1>Input and Display Message</h1>
<p>Enter a message</p>
<input type="text" id="msg" ><br>
<button onclick="displayMessage()">Click me</button>
<p id="showinputhere"></p>
<script>
function displayMessage(){
let themsg = document.getElementById("msg").value;
if (themsg){
document.getElementById("showinputhere").innerHTML = themsg;
}
else{
document.getElementById("showinputhere").innerHTML = "No message set";
}
}
</script>
</body>
</html>

Populating Textbox on website using javascript

I am working on a project that i would need to populate textbox's inside of BMC Web Remedy with information with JavaScript/HTA File. -- Essentially I just need to Push text into textbox's on the site
I can't seem to figure out how to populate the information onto the page itself though, was wondering if I could get some guidance of if this is possible/how i would go about doing this, or just pointed in the right direction.
Just to clarify as an example on the web site:
http://www.brivers.com/resume/scripts/tutorial-hta-textbox.php
Having data push into the name/address/city field
Something like this only I'm not sure how to push it to the website field itself
**sorry just to clarify the field I am wanting to push this to is external of the application, is there a way to push this to a text field on (literally any) website? for example a username/password textbox on any site
<script language="javascript" type="text/javascript">
function PushData_NSO(){
var userinput = txtPhoneNum.value;
document.getElementById('txtName').value = userinput;
}
</script>
<body>
<p> <input id="txtPhoneNum" type="text" value=""> </p>
<p> <input type="button" onclick="PushData_NSO()"> </p>
</body>
You're trying to do getElementById('txtName') where the html is <input id="txtPhoneNum" />. This will never work because the id isn't the same as the one you're trying to access.
For errors like this, you could use the developer tools (Chrome, IE, Firefox shortcut F12) to see if there are errors in the console.
Furthermore the variable txtPhoneNum isn't defined. If you'd want it to be the input-element you should first do txtPhoneNum = document.getElementById('txtPhoneNum').
I've created a plunker to illustrate.
Get the data from HTML like this,
var userinput = document.getElementById('txtPhoneNum').value;
// do something with userinput
To display data in HTML you should use,
document.getElementById("whateverID").innerHTML = "changed user input";
try this:
<script type="text/javascript">
function PushData_NSO(){
var userinput = document.getElementById('txtPhoneNum').value;
document.getElementById('txtName').value = userinput;
}
</script>
<body>
<p> <input id="txtPhoneNum" type="text" value=""> </p>
<input type="text" id="txtName" value="" />
<input type="button" onclick="PushData_NSO()" value="push "/>
</body>
When you use getElementById('ValueOfID'), the javascript searches all the elements in the html where the id attribute is the same value as "ValueOfID" (in this case).
The .value after getElementById means you are going to do something with that value, in this case you change it to whatever is in the "userinput" variable.
So in your case you need to do:
<script language="javascript" type="text/javascript">
function PushData_NSO(){
var userinput = txtPhoneNum.value;
document.getElementById('txtPhoneNum').value = userinput;
}
</script>
Please try this:
<script language="javascript" type="text/javascript">
function PushData_NSO(){
//First get the value or text, for an instance, just say "sampleText".
var userinput = document.getElementById('txtPhoneNum').value;
//Secondly get the id of the textbox and using that append the value to that textbox.
document.getElementById('txtName').value = userinput;
}
</script>
I think this is what your after
<form>
<input id="txtPhoneNum" type="text" value=""/>
<input type="button" onclick="PushData_NSO()" value="Add Number to Div"/>
</form>
<br/>
<div id="txt">The number will replace this text</div>
<script>
function PushData_NSO(){
var userinput = document.getElementById('txtPhoneNum').value
document.getElementById('txt').innerHTML = userinput;
}
</script>
Here is a JSFIDDLE showing it in action, if you have any questions about this feel free to ask

Using JavaScript so button inserts text into current text field

Very simply, I want to write some code that shows a list of buttons. When one is clicked, a chunk of predefined text is inserted into whichever text field the cursor is in at that moment. I can get the text to insert, but only in one text field.
I need this text to be expandable, as it will be used on several pages with different numbers of text field.
The code I have so far is below. I know I need to somehow insert the variable inFocus from the second JavaScript function into the first parameter of the onClick="insertText() function (currently just called txt1).
Am I barking up the wrong tree or is this the correct way to go?
I’ve tried playing with the JavaScript in the main code and come up with this, to no avail. Any ideas?
<script type="text/javascript">
function insertText(text)
{
var elemID = false;
$('input, textarea').focus(function() {
elemID = $(this).attr('id');
});
var elem = document.getElementById(elemID);
elem.innerHTML += text;
}
</script>
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
function insertText(elemID, text)
{
var elem = document.getElementById(elemID);
elem.innerHTML += text;
}
</script>
<script>
var inFocus = false;
$('input, textarea').focus(function() {
inFocus = $(this).attr('id');
});
$('#mybutt').click(function() {
alert('Cursor was last in element id: ' + inFocus);
});
</script>
</head>
<body>
<form>
<textarea cols="50" rows="10" id="txt1"></textarea><p>
<textarea cols="50" rows="10" id="txt2"></textarea></p>
<textarea cols="50" rows="10" id="txt3"></textarea>
<?php do { ?>
<input type="button" value="<?php echo $row_tooltips['word']; ?>" onclick="insertText('txt1', '<?php echo $row_tooltips['link']; ?>');">
<?php } while ($row_tooltips = mysql_fetch_assoc($tooltips)); ?>
</form>
</body>
</html>
<html>
<head>
<script src='jquery.js'></script>
<script>
$(document).ready(function(){
$('.buttonClick').click(function(){
});
$( ".textFocus" ).focusout(function() {
$('#' + this.id).val('This text is append when mouse out from textfield.');
});
});
</script>
</head>
<body>
<button id='b1' class='buttonClick'>button1</button>
<button id='b2' class='buttonClick'>button2</button>
<button id='b3' class='buttonClick'>button3</button>
<button id='b4' class='buttonClick'>button4</button>
<button id='b5' class='buttonClick'>button5</button><br />
Textbox1: <textarea cols="50" rows="10" id="txt1" class='textFocus'></textarea><br />
Textbox2: <textarea cols="50" rows="10" id="txt2" class='textFocus'></textarea><br />
Textbox3: <textarea cols="50" rows="10" id="txt3" class='textFocus'></textarea>
</body>
</html>
I think ,this should help you.Or You need to give more details to me.And to insert data from database,you need to use id of field and call function using ajax and insert that value to textfield.
You have jQuery, so you should rid of onclick="" on your button and use the jQuery way.
Example:
$('input[type=button]').click(function(){
$('#txt1').val('the text you want to insert....');
});
You can compose the jQuery selector from a "#" and your id:
$('#mybutt').click(function() {
$('#' + inFocus).val('the text you want to insert....');
});
This inserts the text into the element with the id that is inFocus.
It will throw an error if no textarea is selected, e.g. inFocus is false.
Inline javascript event attributes are IMO bad practice especially when jQuery is loaded. jQuery makes attaching events to DOM object a breeze.
Using button instead of input type="button" is usually a better idea as your display and value are separate.
See the code comments for more information.
Fiddle:
http://jsfiddle.net/54mES/
HTML
<textarea cols="50" rows="5" id="txt1"></textarea>
<textarea cols="50" rows="5" id="txt2"></textarea>
<textarea cols="50" rows="5" id="txt3"></textarea>
<br>
<button type="button" value=" word1 " class="insert-word">word1</button>
<button type="button" value=" word2 " class="insert-word">word2</button>
JavaScript
var input_position = 0, last_input = false;
// if the input[type="text"] or textarea has a keyup or mouseup event then run this
$('input[type="text"], textarea').on('keyup mouseup', function () {
last_input = $(this);
// gets the last input's position
if('selectionStart' in this) {
input_position = this.selectionStart;
} else if('selection' in document) {
this.focus();
var Sel = document.selection.createRange();
var SelLength = document.selection.createRange().text.length;
Sel.moveStart('character', -this.value.length);
input_position = Sel.text.length - SelLength;
}
});
$('button.insert-word').click(function () {
if(!last_input) return; // if an input wasn't selected don't run
var last_input_value = last_input.val(); // value of input
var word_to_insert = this.value; // value of button
// split the last input's value then insert the word
last_input.val([
last_input_value.slice(0, input_position),
word_to_insert,
last_input_value.slice(input_position)
].join(''));
});

html form.input.value is not getting printed why?

...
<script type="text/javascript">
function printvalues() {
document.write("This is my first JavaScript!");
document.write(form.inputobj1.value);
document.write(form.inputobj2.value);
}
</script>
<form name="form">
<input name="inputobj1" value="123" />
<input name="inputobj2" value="abc"/>
<input type="button" onclick =" printvalues();">
</form>
why this line is not printing the value document.write(form.inputobj1.value);
The document.write overwrites the current document. Once done that, the whole <form> element disappears from the DOM and hence it and its input elements cannot be found.
Replace document.write(...) by for example alert(...) and it should work.
Alternatively you can write it as innerHTML of another element. E.g.
<script type="text/javascript">
function printvalues() {
var div = document.getElementById("divId");
div.innerHTML += "This is my first JavaScript!";
div.innerHTML += form.inputobj1.value;
div.innerHTML += form.inputobj2.value;
}
</script>
<form name="form">
<input name="inputobj1" value="123" />
<input name="inputobj2" value="abc"/>
<input type="button" onclick =" printvalues();">
</form>
<div id="divId"></div>
Note that this is not the "best practice", but since you're learning... When done with core Javascript, I recommend you to get yourself through jQuery. It's a Javascript library which greatly eases DOM manipulation like that and more ;)
document.write()
is probably not what you want. It will overwrite the entire contents of the page. The reason you're getting that error is because when you call document.write, it removes all the previous content, and thus the page will no longer have a form element.
Normally you would use a function such as document.getElementById to get a DOM element. For example:
alert( document.getElementById('inputobj1_id').value );
For DOM element:
<input id="inputobj1_id" name="inputobj1" value="123" />
<script type="text/javascript">
function printvalues() {
var x = document.form.inputobj1.value;
var y = document.form.inputobj2.value
document.write("<Html><head></head><body><h1>");
document.write("This is my first JavaScript!</h1></br><h3>");
document.write(x);document.write("</h3></br><h3>");
document.write(y);document.write("</h3></body></html>");
}
</script>
<form name="form">
<input name="inputobj1" value="123" />
<input name="inputobj2" value="abc"/>
<input type="button" value="click" onclick =" printvalues();">
</form>

Categories

Resources