How to retrieve hidden field value using javascript? - javascript

I've asp.net web site , I used master page for the design. I've child page which is placed in the contentplaceholder. On the child page i used one hidden field as -
<input id="Hidden1" type="hidden" value="This is hidden text"/>
I want to display the hidden field value using alert() function from javascript on the page load event. How to do this?
I tried following thing in my script but it is not working-
(function msgShow() {
var e1 = document.getElementById('Hidden');
alert(e1.value);
})();
Thanks.

window.alert(document.getElementById("Hidden1").value);
Make sure this code is executed after the DOM is ready.

With jQuery you do like this:
$(document).ready(function() {
alert($('#Hidden1').val());
});
without jQuery you do:
alert(document.getElementById('Hidden1').value);

Just like with any other element, you can get it with document.getElementById('Hidden1').value

Refer the code given below to know how to get
<html>
<body>
<script type="text/javascript">
function printIt(){
alert(document.getElementById('abcId').value);
alert(document.formName.elements['abcName'].value);
}
</script>
<h1>Access Hidden value in JavaScript</h1>
<form name="formName">
<input type="hidden" id="abcId" name="abcName"
value="I am Hidden value"/>
<input type="button" value="Get Value" onclick="printIt()" />
</form>
</body>
</html>

document.getElementById('Hidden1').value;
and alert the return value

<script type="text/javascript">
function dis() {
var j = document.getElementById("<%= Hidden1.ClientID %>").value;
alert(j);
}
</script>
<input id="Hidden1" type="hidden" runat="server" value="Hello" /><br />
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return dis();" />

With pure JavaScript:
var value = document.getElementById(id).value;

Also be sure not to reference a DOM element before it exists - like I just did and spent an hour trying to figure why even HelloWorld would not work.

Related

html event focus not working

<body onload="getfocus()">
<input id='txt1' />
<input type="button" onblur="getfocus()" value="Test"/>
<script>
function getfocus(){
document.getElementById("txt1").focus();
}
</script>
</body>
In the above code, getfocus() works as expected on body onload but onBlur of button it doesn't work as expected i.e. txt1 doesn't get focus.
kindly, let me know why txt1 is not getting focused on 'onblur' event.
You need to add a tab-index attribute to #txt1, otherwise your browser will tab out of the document (which for me using Chrome went to the address bar).
<body onload="getfocus()">
<input id='txt1' tab-index="1" />
<input type="button" onblur="getfocus()" value="Test"/>
<script>
function getfocus(){
document.getElementById("txt1").focus();
}
</script>
</body>
As an aside, you'll notice that if you add another arbitrary third input after the second one, it will start working too.
Edit
Try adding onblur='getfocus() on #txt and onclick="getfocus()" on the button.
SNIPPET
It seems that tab-index='1' works great.`
<body onload="getfocus()">
<input id='txt1' tab-index='1' onblur='getfocus()' />
<input type="button" onclick="getfocus()" value="Test" />
<script>
function getfocus() {
document.getElementById("txt1").focus();
}
</script>
</body>

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

JavaScript - retain "textbox2" value for it to be available after refresh/reopen page

I have 2 textboxes. After writing something in the first one and clicking the OK button the value appears in textbox2 also.
I need that value to be saved after page refresh and not be modified untill someone introduces a new value in textbox1 and hits OK again.
<html>
<head> </head>
<script type="text/javascript">
function myfunction()
{
var first = document.getElementById("textbox1").value;
var textbox2 = document.getElementById("textbox2");
textbox2.value = first;
}
</script>
<body>
<input type="text" name="textbox1" id="textbox1" />
<input type="submit" name="button" id="button1" onclick="myfunction()" value="OK" />
<br/>
Your answer is:
<input type="text" name="textbox2" id="textbox2" readonly="true"/>
</body>
</html>
As per my knowledge, you can make the "Textbox2" a server control by declaring runat="server" which would retain the value even after server hit as shown below.
<input type="text" name="textbox2" id="textbox2" readonly="true" runat="server" />
Then store it in session (in case of C#) or something similar in the server side to restore the value.
Hope this Helps!!
This should do it every time. http://jsfiddle.net/CKLAg/
first, simplify your html a bit:
<input type="text" name="textbox1" id="textbox1">
<button name="button" id="button1" onclick="myFunction();">OK</button>
<br/>Your answer is:
<input type="text" name="textbox2" id="textbox2" readonly="true">
Then, add the following functions to check for localStorage, save and load storage on demand:
Note, that you will have to use jQuery to get the document ready state and set the input element when the DOM is ready.
$('document').ready(function(){
var prevAnswer = loadStorage;
$('#textbox2').attr('value', prevAnswer);
});
function loadStorage() {
if (supports_html5_storage) {
if (localStorage.getItem('myAnswer')) {
var answer = localStorage.getItem('myAnswer');
return answer;
}
}
}
function myFunction() {
var first = document.getElementById("textbox1").value;
var textbox2 = document.getElementById("textbox2");
textbox2.value = first;
if (supports_html5_storage) {
alert('storing');
localStorage['myAnswer'] = first;
}
}
function supports_html5_storage() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
}
}

TextField value when tried to get in javascript using jQuery is empty

I am trying to get a value from a textField onclick of submit button to a javascript function and trying to alert the same to the user. I am using JSP and Jquery(in javascript) for this.
JSP -
<input id="employeeName" type="text" name="empName" value=ben/>
<input type="button" value="search employee" onclick="abc();" />
JAVASCRIPT -
function abc() {
var typedEmployee = $('#employeeName').val();
alert(typedEmployee );
}
Problem - when i execute this, i get typedEmployee value "" and the alert is empty.
I have also tried using -
var typedEmployee = document.getElementById('employeeName').value;
Still the same issue.
I have used this method before and that works fine.
Could someone help me out with this please???
This little bit of jQuery works.
<input id="employeeName" type="text" name="empName" value="ben" />
<input type="button" id="getName" value="search employee" />
Remove the onClick from before and add an id="getName" to the button
Place the following in the head section of your page.
<script type="text/Javascript">
$(document).ready(function(){
$('#getName').click(function(){
var typedEmployee = $('#employeeName').val();
alert(typedEmployee);
});
});
</script>
EDIT - Code above changed to show how to place on the page
http://jsfiddle.net/jasongennaro/dkQFq/
Just remove the single quote from the beginning of both input type ans see if it works.
You need to put value ben under quotes & remove the single quote.
Your jquery works just fine in my FF 5.0
Try this:
<input id="employeeName" type="text" name="empName" value="ben" />
<input type="button" value="search employee" onclick="abc();" />
<script type="text/javascript">
function abc() {
var typedEmployee = $('#employeeName').val();
alert(typedEmployee );
typedEmployee = document.getElementById('employeeName').value;
alert('employee = ' + typedEmployee);
}

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