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

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);
}

Related

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

Grabbing value and appending to textarea with Javascript?

I'm stuck!
I have this simple form:
<p><input type="text" name="hometown" id="hometown" size="22" /></p>
<p><textarea name="comment" id="comment"></textarea></p>
What I need is to append the input value from #hometown to textarea! It mustn't replace text already written there. In the best case, it'd just print at the end of whatever is written on ''submit'' click.
This is how far I've got with my Javascript, but nothing seems to work.
function addtxt(input) {
var hometown = document.getElementById('hometown').value;
var obj=document.getElementById(comment)
var txt=document.createTextNode(lol)
obj.appendChild(txt)
}
Textarea has value property to operate with its contents. Just use += to append text:
document.getElementById("comment").value +=
document.getElementById("hometown").value;
Try this
var oldval=$('#comment').val();
var newval=$('#hometown').val();
S('#comment').val(oldval+' '+newval);
Here's an example for you I've put on JSFiddle, using pure javascript and the onClick listener
http://jsfiddle.net/vyqWx/1/
HTML
<input type="text" name="hometown" id="hometown" size="22" />
<textarea name="comment" id="comment"></textarea>
<input type="submit" onClick="doMagic();">
JS
function doMagic(){
var homeTown = document.getElementById("hometown").value;
document.getElementById("comment").value += homeTown;
}

I Need A Javascript Code That Will Place The Word "Search" In An Empty DIV Value Tag Using The id=

I have no access to the html, I need JavaScript code that will add the word "Search" to the value="" that is blank for the input with id "ReportQuery".
How should I code it?
Here is the code below:
<div>
<input name="data[Report][query]" type="text" class="input_firm" value="" onChange="this.form.submit();" onClick="if( this.value == 'Search' ) { this.select(); }" id="ReportQuery" />
<input type="submit" value="Search" />
</div>
if its a div
$('div#idDiv').text('search');
if its an input (because you comment .value :S)
$('input#idDiv').val('search');
See this article, it comes with many examples and details:
http://www.javascript-coder.com/javascript-form/javascript-form-value.phtml
BTW, this is about the "direct" JS way, no jQuery involved, e.g.
oFormObject = document.forms['myform_id'];
oFormObject.elements["element_name"].value = 'Some Value';
$('#ReportQuery').val('Search');
http://jsfiddle.net/L9YS4/
A good place to start for learning jQuery:
http://jqfundamentals.com/

How to retrieve hidden field value using 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.

input text change onclick button value

Actually i want to create a page switcher, all i need for this is an input with type text where will be entered the number of the page, and i have the second input with type button and onclick value:
<input type="text" value="#number of the page#" />
<input type="button" onclick="_go_page_('cf_pages_form_name1','#number of the page#');" />
I cant figure it out how to take this #number of the page# and put it in onclick dynamically using javascript... please smb help!
<input type="text" id="txtPageNumber" value="2" />
<input type="button" id="btn" value="click" onclick="_go_page_('cf_pages_form_name1','#number of the page#');" />
$(document).ready(function(){
$("#btn").click(function(){
var $val = $("#txtPageNumber").val();
alert($val);
_go_page_('cf_pages_form_name1',$val);
});
});
});
Assuming number is the id of the text field.
You can get the value of the text field like this:
$('#number').val();
And pass that is the onclick event
You can use an ID on the page selector input to get the value.
function goToPage(pageNumber) {
// go to pageNumber
}
<input type="text" id="pageSelector" value="#number of the page#" />
<input type="button" onclick="goToPage($('#pageSelector').val())" />
You've tagged this with jQuery so I'm assuming you're using jQuery.
lets your input type is like this
then in jquery try something like this...
$('#pageNo').keyup(function(){
pageNo = $(this).val()
}
then pass this to your button onclick function
i will answer in "very easy to understand" without jquery:
you have to get the value of the first inputfield. this should your function do. but first the inputfield needs an id(f.g. 'number').
code in function:
var pagenumber = document.getElementById('number').value;
then you have to put the number into the url (document.href).

Categories

Resources