How do read/write <input> values in an HTML document with JavaScript? - javascript

I have an <input> in my document. There I want the user to do some input.
var myVar = document.getElementById('userInput').value;
Then I want this value to be shown in another <input>.
document.getElementById('Preview').value = myVar;
This code somehow doesn't work.
Can anybody help?
Thanks in advance!

Update based on further information in comments before:
<button onClick="calculateThatObscenityDeleted()">"Save"</button >
Submit buttons will submit forms, thus running the JS but immediately blanking the form.
(That might still not be the actual issue, the question is still missing most of the code)
Original answer before it was revealed that the question didn't reflect the problem:
var myVar=document.getElementById('userInput').value;
Don't forget the =.
(And, obviously, you need to use that code in an event handler so it isn't executed only when the document loads and before the user has typed anything.)

Is it form?
Try something like this:
oFormObject = document.forms['myform_id'];
oFormObject.elements["element_name"].value = 'Some Value';

Besides the typo, you have to bind an event handler to the first <input>:
var input_a = document.getElementById('userInput');
var input_b = document.getElementById('Preview');
input_a.onkeyup = function(){
input_b.value = input_a.value;
}

Related

Understanding "order matters" on external .js files in html

EDIT:
Okay, gonna try to use as little code as possible to explain my problem.
I have a select dropdown menu that has a function changetext() tied to it. Whenever a value is selected in the dropdown menu, text inside a tag is changed.
The script to the function is stored in an external js file and is placed at the bottom of my html file.
Inside the js file is something like this.
var selectormenu = document.getElementById("selector");
var spanTag = document.getElementById("texthere");
function changetext(){
if(selectormenu.value == "one"){
spanTag.innerHTML = "one";
}
}
By using this js file, I get a TypeError in my browser console. However, if I place var selectormenu and spanTag inside the function, the script works.
EDIT: Since the question case sensitivity was fixed, I am adjusting my answer. You need the DOM element to already be created, because document.getElementById needs to have something to select. Then, your function needs to be named before the parentheses. Finally, you need to call the function, because it won't run unless it's called.
<div id="divid>Hello World!</div>
<script>
var soandso = document.getElementById("divid");
function statsChange() {
soandso.innerHTML = "123";
}
statsChange();
</script>

Javascript Generating Text into Textbox?

I wrote this little bit of code but I'm not sure why it's not working? It's supposed to take in the persons name and depending on what they selected it will output a website with their name at the end of it.
JSFiddle
http://jsfiddle.net/tQyvp/135/
JavaScript
function generateDynamicSignature() {
var dynSig = "";
var user = document.getElementById("usernameInput");
var e = document.getElementById("scriptListInput");
var strUser = e.options[e.selectedIndex].text;
if (strUser == "example") {
dynSig = "http://example.com/users/";
}
document.getElementById("generateSignature").addEventListener('click', function () {
var text = document.getElementById('dynamicSignatureOutput');
text.text = (dynSig + user);
});
}
HTML
<select class="form-control" id="scriptListInput">
<option value="example">Example 1</option>
</select>
There are a few problems with your code, I'll try to list them all.
First, you never added the username input to your HTML.
Next, you seem mixed up on the way to access/set the text of an HTML input. You do this through the value field. For the username input, you forgot to access any property, so you'll need to change it to:
var user = document.getElementById("usernameInput").value;
You later used the text property of both the select element and the output. These should also both be value.
Another problem is that you've placed a listener inside a listener. Your outer function, generateDynamicSignature, listens for the onclick event of the button. This function only runs after the button is clicked. But inside this function, you attach a new listener. This inner listener will only run if someone clicks the button twice.
I've included these changes in a new fiddle:
https://jsfiddle.net/zdfnk77u/
where is usernameInput in your html?
in the if, use === instead of ==
If and when you add the missing "usernameInput" element in your HTML, all you'll have to do is...
dynSig='http://example.com/users/'+usernameInput.value;
I think part of the problem is that you want to access the value and not the text of input elements. So for text and strUser, you want to do text.value instead of text.text and such.
Also, based on the JSfiddle, you probably want to rewrite how you're using the document listener and the onclick of the html element. Every time the button is clicked it goes through the generateDynamicSignature and creates a listener to change the value, but doesn't necessarily change the value itself. If you move the logic of the generate function inside the click listener, that should fix most of your problems.
You create your generateDynamicSignature inside $(document).ready.
There are two approaches.
define function generateDynamicSignature outside
$(document).ready
or
bind your button.click to a handler inside $(document).ready
Do not mix these two.

Searching jQuery variable full of html [duplicate]

This question already has answers here:
parse html string with jquery
(4 answers)
Closed 8 years ago.
This may be a strange question -- Right now I have a variable that is full of HTML, and I want to use jQuery (or JS) to search that varaible for inputs with checkboxes, and return the information.
So:
alert($(this).parent().parent().html())
var thisIsThat = $(this).parent().parent().html();
alert(thisIsThat)
var Awesome = $(thisIsThat).find('input:checked');
And then after I get that variable, after a successful ajax call, I want to change a specific attribute inside of it, like so:
$(Awesome).attr('value', 'false');
Right now, "Awesome" is returning nothing, which then doesn't allow me to change the attribute like I want to. I may be on the wrong direction as well -- any advice appreciated!
Use this
var thisIsThat = $(this).parent().parent();
alert(thisIsThat)
var Awesome = $(thisIsThat).find('input:checked');
In this case thisIsThat is a object and you can find anything using that object
This is an example showing the same basic idea running off of a string which finds the checkbox fine and unchecks it.
<div id="out"></div>​
<script>
var htmlStr = '<div><input type="checkbox" checked="checked"/></div>';
var temp = $(htmlStr);
var cb = temp.find("input:checked");
cb.attr("checked",false);
jQuery("#out").append(cb);
</script>
jsfiddle
The problem I am betting is that you are checking the checkbox manually. It will not update the DOM attribute when you do that.
Here is a basic example to show you the problem.
<div id="one">
<input type="checkbox" />
</div>
<button>Tell</button>​
<script>
function tellMe(){
var myDiv = jQuery("#one");
var html1 = myDiv.html();
console.log(html1);
}
jQuery("button").click(tellMe);
</script>
Take a look this fiddle of the code above.
Open up the console, and click on the button. You will see it unchecked. Check the checbox and click the button again, same html is outputted even though the checkbox is checked.
change
var Awesome = $(thisIsThat).find('input:checked');
to
var Awesome = $(thisIsThat).find('input[type=checked]');
now loop over it
Awesome.each(function(){
if($(this).is(':checked'))
{
$(this).attr('checked',false);
}
});

Failed to set event handler in javascript

I want to add an event handler for input text controls. The controls is generated dynamically. My code is like:
JavaScript:
var settings_check = new Array("checkVMName()","checkDiskMB()","checkMemMB()","checkEsx()","checkDatastore()");
...
_inputbox = document.createElement("input");
_inputbox.type = "text";
_inputbox.id = settings[zindex];
_inputbox.onblur = settings_check[zindex];
_hint = document.createElement("hint");
_hint.id = settings[zindex] + "_Label2";
_hint.innerText = settings_hint[zindex];
mycurrent_cel2.appendChild(_inputbox);
mycurrent_cel2.appendChild(_hint);
But this way doesn't work. I checked the HTML with Firebug, and no "onblur" attribute for the input text control at all.
HTML
<tr>
<td>....</td>
<td><input type="text" id="Datastore">
<hint id="Datastore_Label2">start with /</hint>
</td>
</tr>
I also tried other ways to set event handler like
_inputbox.onblur = function(){alert("test");};
or
_inputbox.setAttribute("onblur",func);
Neither works. :(
If I manually add onblur=function(){...} for the input text control in the HTML with Firebug and execute, the onblur does work. So the question is: how can I set event handler for a control in JavaScript? Is there anything wrong in my code? Thanks.
You are creating an array of strings with function invocations in them, this is completely incorrect.
You need to assign references to the functions that you wish to be invoked when the event fires. You'd do this by simply storing the names of the functions (without the () or quotes) in your array, and it should work (the functions must be previously defined in the current scope as well):
var settings_check = [checkVMName, checkDiskMB, checkMemMB, checkEsx, checkDatastore];
So, in essence, settings_check is simply an array of function references.
See this jsFiddle example illustrating this concept.

Search submit button in all forms with textareas with jquery

I'm working on a Firefox-plugin which searches a webpage for all textareas and places a warning before the submit button.
my code looks like this
var submitWarning = content.document.createElement("div");
submitWarning.innerHTML = "Fancy Message";
$('textarea', window.content.document).each(function() {
var form = $(this, window.content.document).parents('form:first');
$(form, window.content.document).children('input[type=submit]').each(function() {
form.insertBefore(submitWarning, this);
});
});
if i search all submits with $('input[type=submit]'.each it works fine but since i added the thing with the textarea and the form:first i got problems (nothing happens)
p.s. i use the window.content.document thingy because its a ff-plugin and it won't work nothing without it
You need to change it a bit, like this:
var submitWarning = content.document.createElement("div");
submitWarning.innerHTML = "Fancy Message";
$('textarea', window.content.document)
.closest('form')
.find('input[type=submit]')
.before(submitWarning);
The argument syntax is $(selector, context), when finding the form, first there's .closest() which makes this easier, also when you have an element, you can just use $(this) inside it's .each(), no need to search for it again. Also, you can use .before() to make it easier :)
The :has() selector is the best choice for me. Get rid of your extensive code and use this instead.
var buttons = $("form:has(textarea) input[type=submit]", window.content.document);
$("<div>").html("Fancy Message").insertBefore(buttons);
Try var form = $(this, window.content.document).closest('form');. Not sure if that's the ticket, but it's the first thing off my head.

Categories