Following is my HTML code
<div id="dl_address" class="dl-row">
<div class="dl-col1">
<span id="dl_addressMarker" class="dl-Marker">*</span>Address:
</div>
<div class="dl-col2">
<input id="dl_addressMarker" name="p.streetAddress" maxlength="100" size="15"
class="landing-qualpanel-input-standin" type="text" onClick="formOpt(id)" value="Home Address">
</div>
</div>
And Following is my javascript code
<script language="javascript" type="text/javascript">
function formOpt(x){
var y=document.getElementById(x).value;
alert(y);
}
</script>
I can't understand why i am getting Undefined. Kindly Help.
Thanks in advance
That's because you have two elements with the same Id, which isn't allowed in HTML and which makes it impossible for your function to get the input this way.
Change the id of your input and you'll be fine.
You could simplify the code by passing the element and not the id :
HTML :
<input id="dl_addressMarker2" name="p.streetAddress"
maxlength="100" size="15"
class="landing-qualpanel-input-standin" type="text"
onClick="formOpt(this)" value="Home Address">
JavaScript :
function formOpt(x){
var y = x.value;
alert(y);
}
You have 2 problems. (1) you should call your method like this: formOpt(this) which will pass the current element in. (2) You have repeated DOM ids.
Write is like this:
<script language="javascript" type="text/javascript">
function formOpt(x){
//x is now the input element. You can fetch its id property.
var y=document.getElementById(x.id).value;
// you can do other things with x also.
alert(y);
}
</script>
<div id="dl_address" class="dl-row">
<div class="dl-col1">
<span id="dl_addressMarker" class="dl-Marker">*</span>Address:
</div>
<div class="dl-col2">
<!-- I renamed the id on the input -->
<input id="dl_addressMarker_input" name="p.streetAddress" maxlength="100"
size="15" class="landing-qualpanel-input-standin"
<!-- pass this into the function -->
type="text" onClick="formOpt(this);" value="Home Address">
</div>
</div>
See working sample: http://jsfiddle.net/KXCeh/1/
you need to pass the value of id, and you also need to keep the ids unique for each and every element
<div class="dl-col2">
<input id="dl_addressMarker" name="p.streetAddress" maxlength="100" size="15"
class="landing-qualpanel-input-standin" type="text" onClick="formOpt('dl_addressMarker')" value="Home Address">
</div>
Related
I have set of input boxes to add names and designaions.and iwant to print those in a <p> tag when user click print button. how to proceed.
<div class="form-group">
<label for="inputRegNo" >Name & Designation<span style="color:#c0392b;padding-left:5px;">*</span></label>
<div class="form-group">
<input required type="text" name="fname[]" class="fname" onkeyUp="document.getElementById('refa5').innerHTML = this.value" placeholder="Name" />
<input required type="text" name="lname[]" placeholder="Designation" />
</div>
</div>
<div class="form-group">
<label for="inputRegNo" ></label>
<div class="form-group">
<input type="text" name="fname[]" placeholder="Name" class="fname" onkeyUp="document.getElementById('refa5').innerHTML = this.value" />
<input type="text" name="lname[]" placeholder="Designation" />
</div>
</div>
print
<div>
<label>Name & Designation</label>
<p id="refa5"> - </p>
</div>
its looks you are new in javascript.. it's simple give the name to all the input field like
<input type="text/checkbox" name="txtName">
and in javascript you can access this field value by
<script type="text/javascript">
var name = document.getElementsByName("txtName");
</script>
if you wish to print the element on button click simply specify their click event on javascript like
function onClick() {
alert("helo from click function");
}
and then on button ..
<input type="button" onclick="onClick()">
w3schools is a great resource for this. Here is some example code on how to do this :
<button onclick="myFunction()">Click me</button>
<input id="inputID"></input>
<p id="demo"></p>
<script>
function myFunction() {
var inputID = document.getElementById("inputID").value;
document.getElementById("demo").innerHTML = inputID;
}
</script>
What the code above does is it takes the value of an input, then it sets the innerHTML of a <p> element to it. You can obviously do this with other things like <h1> elements as well.
I want to user to press submit button so that their name and age is displayed in the input box with name="output"?
I have 3 input boxes, one asking for name and the other for age while the other one provides output. I am trying to use the function output() to display the last input box.
I am confused about where I am going wrong, do I need a .value?
<!doctype html>
<html>
<head>
<style>
.formdiv{
align: center;
}
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
function output(){
var name = getElementByName('firstName');
var Age= getElementByName('age');
var out = document.write(name+Age);
document.getElementByName('output') = out;
}
</script>
<h1><strong><em><center>Payment Details</center></em></strong> </h1>
<div class="formdiv">
<fieldset><center>
<legend> Enter the following Info:</legend>
<br />
<label> Name </label>
<input type="text" name="firstName" placeholder="John" required="required"></input>
<br/>
<br/>
<label>Age </label>
<input type="number" name="age" maxlength="2" required="required"></input>
</fieldset>
</center>
</div>
<div>
<center>
<button onClick="output()">Submit</button><br/>
<label for="output">Output</label>
<br/>
<input type="textbox" name="output"></input>
</center>
</div>
</body>
</html>
Here's a working version of your code.
There's no method getElementByName (but getElementsByName) - you should use document.getElementById() (Read about it here)
You should use the value of the input element.
<!doctype html>
<html>
<head>
<style>
.formdiv{
align: center;
}
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
function output(){
var name = document.getElementById('firstName').value;
var Age= document.getElementById('age').value;
document.getElementById('output').value = name+Age;
}
</script>
<h1><strong><em><center>Payment Details</center></em></strong> </h1>
<div class="formdiv">
<fieldset><center>
<legend> Enter the following Info:</legend>
<br />
<label> Name </label>
<input type="text" id="firstName" placeholder="John" required="required"></input>
<br/>
<br/>
<label>Age </label>
<input type="number" id="age" maxlength="2" required="required"></input>
</fieldset>
</center>
</div>
<div>
<center>
<button onClick="output()">Submit</button><br/>
<label for="output">Output</label>
<br/>
<input type="textbox" id="output"></input>
</center>
</div>
</body>
</html>
getElementsByName (note: Elements, not Element) returns a list of Elements, in this case your <input>s. So first of all, you need to select the first (in your case your only one) using getElementsByName(...)[0]. Then you get one Element.
However you do not want to output the entire element (which is an Object, not a String, and converted to a string it likely won't be what you expect), so you need to select the value property of that Element. So yes, you need to add .value, just as you assumed:
function output(){
var name = getElementsByName('firstName')[0].value;
var Age= getElementsByName('age')[0].value;
Then, document.write writes the argument to a new document directly, which results in an emtpy page with nothing else on it but that string. This isn't what you want, so you don't need that. ALl you do want is to assign a new variable called out with that string:
var out = name+Age;
Then to assigning the new value to the output field - you don't want to replace the Element by a string (that wouldn't even work), but it's value, so you need the .value again:
document.getElementsByName('output')[0].value = out;
}
That should do the trick.
(In addition to that, you might want to use name + " " + Age instead of simply name+Age, as otherwise you end up with "John Doe23" instead of "John Doe 23" which you likely want)
There are a few things wrong with your code:
there is no such thing as getElementByName - it is getElementById
changing to the above, you need to add ids to your input elements
you need to use the value of the returned object from getElementById
The above will get your code working, but also, the center tag is obsolete and you shouldn't use it
Inputs are self closing tags so you don't need </input>
<!doctype html>
<html>
<head>
<style>
.formdiv {
align: center;
}
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
function output() {
var name = document.getElementById('firstName').value;
var Age = document.getElementById('age').value;
var out = name + Age;
document.getElementById('output').value = out;
}
</script>
<h1><strong><em><center>Payment Details</center></em></strong> </h1>
<div class="formdiv">
<fieldset>
<center>
<legend>Enter the following Info:</legend>
<br />
<label>Name</label>
<input type="text" name="firstName" id="firstName" placeholder="John" required="required"></input>
<br/>
<br/>
<label>Age</label>
<input type="number" name="age" id="age" maxlength="2" required="required"></input>
</fieldset>
</center>
</div>
<div>
<center>
<button onClick="output()">Submit</button>
<br/>
<label for="output">Output</label>
<br/>
<input type="textbox" name="output" id="output"></input>
</center>
</div>
</body>
</html>
can anyone explain me what happen here??
i have this html code:
<div class="calculadora">
<div class="clear campos">
<label>Amount</label>
<input class="fi" id="amount" type="text" name="amount" value=""/>
</div>
<div class="clear campos">
<label>Down Payment</label>
<input class="fi" id="downPay" type="text" name="downPay" value=""/>
</div>
<div class="clear campos">
<label>Years</label>
<input class="fi" id="years" type="text" name="years" value=""/>
</div>
<div class="clear campos">
<label>Rate</label>
<input class="fi" id="rate" type="text" name="rate" value=""/>
</div>
<input id="cal" type="button" value="cacular"/>
<div class="result"></div>
</div>
And i'm making a jquery plugin, but i need to get all the attr('value') of each input, and i´m doing this way:
this.each(function(){
var obj = $(this),
vacio = parseFloat( $('.fi', obj).attr('value'));
// some code...
But what happens it's that only get the first value of the first input... why??
BUT!! if i make this way :
var s = $('.fi', obj).each(function(){
alert ($(this).attr('value'))
});
it workss!!! Why?? this is good???
Tks in advance if anyone can explain to me.
.attr() returns the value of the specified attirbute from the first element in the collection is called upon.
From the doc:
Get the value of an attribute for the first element in the set of matched elements.
When you make it the other way, you are extracting the value attribute data for each element in the matched set.
One way to achieve what you're after could be done by using the .map() function, which returns a jquery array:
var vals = $('.fi', obj).map(function(){
return this.value;
});
To transform it to a pure javascript array, you use vals.toArray();
Note: no need for jquery to get the value of an input because this in event handlers and in iteration on elements is the current DOMElement, so you can just do this.value.
How to update with jquery the label of preview div when im typing inside of the parent input of edit div?
Thank you.
<html>
<body>
<div id="preview">
<label id="companyName" class="workExperience">
This is my company
</label>
</div>
<div id="edit">
<label>Company Name: </label>
<input type="text" id="companyName" />
</div>
</body>
</html>
You'd have to have something along these lines in your code:
<script>
$("#companyName").keyup(function () {
var value = $(this).val();
$(".workExperience").text(value);
}).keyup();
</script>
However, I would NOT give them the same id value, as it might lead to some errors.
Good luck!
you can not have the same ID in the tag "label" and the tag "input".
<div id="preview">
<label id="companyName" class="workExperience">
This is my company
</label>
</div>
<div id="edit">
<label>Company Name: </label>
<input type="text" id="companyNameInput" />
</div>
$(document).ready(function(e){
$('#companyNameInput').bind('change', function(ev) {
$(this).closest('#edit').prev().find('#companyName').html($(this).val());
});
});
test
Please help!
I have some form elements in a div on a page:
<div id="box">
<div id="template">
<div>
<label for="username">Username</label>
<input type="text" class="username" name="username[]" value="" / >
<label for="hostname">hostname</label>
<input type="text" name="hostname[]" value="">
</div>
</div>
</div>
using jquery I would like to take a copy of #template, manipulate the values of the inputs and insert it after #template so the result would look something like:
<div id="box">
<div id="template">
<div>
<label for="username">Username</label>
<input type="text" class="username" name="username[]" value="" / >
<label for="hostname">hostname</label>
<input type="text" name="hostname[]" value="">
</div>
</div>
<div>
<label for="username">Username</label>
<input type="text" class="username" name="username[]" value="paul" / >
<label for="hostname">hostname</label>
<input type="text" name="hostname[]" value="paul">
</div>
</div>
I am probably going about this the wrong way but the following test bit of javascript code run in firebug on the page does not seem to change the values of the inputs.
var cp = $('#template').clone();
cp.children().children().each( function(i,d){
if( d.localName == 'INPUT' ){
$(d).val('paul'); //.css('background-color', 'red');
}
});
$("#box").append(cp.html());
although if I uncomment "//.css('background-color', 'red');" the inputs will turn red.
Why not just use a selector for input elements with the clone as root like so:
$( "input", cp ).val("paul");
instead of using the calls to children?
EDIT: It looks like as of jQuery 1.4, when you call clone, it should also copy the data of the elements instead of just the markup. That may solve your problem of having to copy over the values directly. Relevant piece of documentation (emphasis mine):
withDataAndEventsA Boolean indicating whether event handlers should be copied along with the elements. As of jQuery 1.4 element data will be copied as well.
I slightly modified your HTML by assigning a "hostname" class to the hostname input.
Here's the updated HTML:
<div id="box">
<div id="template">
<div>
<label for="username">Username</label>
<input type="text" class="username" name="username[]" value="" / >
<label for="hostname">hostname</label>
<input type="text" class="hostname" name="hostname[]" value="">
</div>
</div>
</div>
And here's a JS:
$(function() {
$('#template div:first').clone().appendTo("#box");
$('#box div:last .username').val("Paul");
$('#box div:last .hostname').val("google");
});
Also, you might want to take a look the jQuery Template proposal at http://wiki.github.com/nje/jquery/jquery-templates-proposal