Hi,
I have to extract the value entered in the first text box and based on the value entered have to populate the second text box.
Eg:if the value entered in first text box is like home/version then I have to extract the home and version entered in the text box and the second text box should contain home/version along with that it should contain additional say date information home/version/date.
Can somebody help me do it?
Thanks
51 6577
Post what code you have so far. Once you access an element using document.getElementById(), you can use the value property to get/set values - see link.
PS. Please Use a Good Thread Title in future. Thanks!
Hi,
I have to populate one text box based on the value entered in the previous text box
eg:if the first text box contains abc/efg/hij then the next text box should contain abc/efg/xyz only if the first text box has abc/efg otherwise user has to enter the value into the next text box.
Thanks
- </head>
-
<script type='text/javascript'>
-
function test1()
-
{
-
var a = document.getElementById("first").value;
-
var b = a.split('/');
-
if( b[0] == "abc"){
-
document.getElementById("second").setAttribute("value",a);
-
}
-
}
-
</script>
-
<body>
-
<input type="text" id="first" onChange="test1();"/><br><br>
-
<input type="text" id="second"/>
-
</body>
-
</html>
this is the code that I am using can i use a function inside setAttribute?
Yes, you can replace 'a' with a function call as long as it returns a string.
PS. please use code tags when posting code. Thanks.
- <script type='text/javascript'>
-
function test1()
-
{
-
var a = document.getElementById("first").value;
-
var b = a.split('/');
-
var d =b[0];
-
var c = b[1];
-
if( b[0] == "abc"){
-
document.getElementById("second").setAttribute("value",test2(d,c));
-
}
-
}
-
-
function test2(d,c)
-
{
-
if ( c == "def" ) {
-
var f = "klm";
-
var x = d+'/'+c+'/'+f;
-
return x;
-
}
-
}
-
-
</script>
-
<body>
-
<input type="text" id="first" onChange="test1();"/><br><br>
-
<input type="text" id="second"/>
-
what is wrong with this code? am not getting the required result
-
function test1(){
-
var a = document.getElementById("first").value;
-
var b = a.split('/');
-
var d =b[0];
-
var c = b[1];
-
if((d == "abc")&&(c == "klm")){
-
document.getElementById("second").value=test2(d,c)
-
}
-
}
-
function test2(d,c){
-
var f = "klm";
-
var x = d+'/'+c+'/'+f;
-
return x;
-
}
can I include in the setAttribute("value",test2(c,d)) a function which is not within the javascript scope but a function which is within the scope of the html/php? - <script type='text/javascript'>
-
function test1()
-
{
-
var a = document.getElementById("first").value;
-
var b = a.split('/');
-
var d =b[0];
-
var c = b[1];
-
if( b[0] == "abc"){
-
document.getElementById("second").setAttribute("value",test2(d,c));
-
}
-
}
-
-
function test2(d,c)
-
{
-
if ( c == "def" ) {
-
var f = "2009";
-
var x = c+'/'+'xyz'+'/'+f;
-
return x;
-
}
-
}
-
can I use functions which are not present in this particular file to be called in the javascript function test2()
As long as it's within the same page, it should be OK.
When you say you don't get the required result, please elaborate. What do you expect and what do you get instead?
PS. Please enclose your posted code in [code] tags (See How to Ask a Question). Thanks.
if the function is not present in the present page then how do I access that function in the javascript function??
Then include it using script tags, e.g. - <script type="text/javascript" src="file.js"></script>
Actually what I wanted is the values b[0] and b[1] has to be passed to a php function where the processing will be done and then the result of that php function has to be returned to the setAttribute.
Why didn't you say that earlier?! ;)
What you need is Ajax (if you want to avoid a page reload) unless you can convert the PHP function to JavaScript. If you're new to Ajax, check out the links in the Off-site Links sticky.
- <?php
-
$c=$_GET['c'];
-
$d=$_GET['d'];
-
if($c=="cat") {
-
$e=$d.$c;
-
}
-
?>
-
<script type='text/javascript'>
-
function test1()
-
{
-
var a = document.getElementById("first").value;
-
var b = a.split('/');
-
var d =b[0];
-
var c = b[1];
-
if( b[0] == "dog"){
-
location.href="c.php?d="+d+"&c="+c;
-
var js= <?php echo $e; ?>
-
document.getElementById("second").setAttribute("value",js);
-
}
-
}
-
-
</script>
-
<body>
-
<input type="text" id="first" size="40" onKeyUp="test1();"/><br><br>
-
<input type="text" id="second" size="40"/>
-
</body>
-
what is wrong with this code??
A lot. You need to put the PHP code in a separate file. To use Ajax, you need to use the XMLHttpRequest object, not location.href. Get a simple Ajax page working first and then extend to your particular problem.
I am new to this javascript so can anyone please tell me how can my problem be solved using ajax.
Thanks
Have you tried one or two of the tutorials in the thread I linked to? Get that working and understand it first, then you can work on your problem.
Can you please help me with the code its urgent:(
I can't do it for you, but I can help. Is the latest version of your code still the one you posted in post #15?
How exactly does ajax solve the problem?I could not understand them in the tutorial
It can, if you want to avoid a page reload. Is that a requirement?
Yes its the same code and i want to avoid a page reload can you help me asap....
How do I pass a variable in ajax to php code and how to extarct it in the php file?
- function test1()
-
{
-
var a=document.getElementById("first").innerHTML;
-
var b=a.split('/');
-
var c=b[0];
-
var d=b[1];
-
if(c!="snow") {
-
document.getElementById("second").innerHTML="";
-
return;
-
}
-
xmlHttp=GetXmlHttpObject();
-
if(xmlHttp==null) {
-
alert("your browser does not support ajax");
-
return;
-
}
-
var url="cd.php";
-
url=url+"?d="+d;
-
url=url+"&sid="+math.random();
-
xmlHttp.onreadystatechange=StateChanged;
-
xmlHttp.open("GET",url,true);
-
xmlHttp.send(null);
-
}
-
-
function GetXmlHttpObject()
-
{
-
var xmlHttp=null;
-
try
-
{
-
// Firefox, Opera 8.0+, Safari
-
xmlHttp=new XMLHttpRequest();
-
}
-
catch (e)
-
{
-
// Internet Explorer
-
try
-
{
-
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
-
}
-
catch (e)
-
{
-
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
-
}
-
}
-
return xmlHttp;
-
}
-
-
function StateChanged()
-
{
-
if (xmlHttp.readyState==4)
-
{
-
document.getElementById("second").innerHTML=xmlHttp.responseText;
-
}
-
}
-
</script>
-
<body>
-
<input type="text" id="first" size="40" onKeyUp="test1();"/><br><br>
-
<input type="text" id="second" size="40"/>
-
</body>
-
</html>
-
and the php code is
[PHP]<?php
$fog=$_GET['d'];
echo $fog;
?>
[/PHP]
What is wrong with this code am not able to print anything in the second text box.
Can somebody reply to it fast plz...
Instead of setting the text box's innerHTML, set its value property.
even that is not working:(
Are you getting any errors? Post the latest version of your code with the changes you've made (using code tags please).
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-
"http://www.w3.org/TR/html4/loose.dtd">
-
<html>
-
<head>
-
<title>Untitled Document</title>
-
<script type="text/javascript">
-
function test1()
-
{
-
var a=document.getElementById("first").value;
-
var b=a.split('/');
-
var c=b[0];
-
var d=b[1];
-
if(c!="fog") {
-
document.getElementById("second").value="";
-
return;
-
}
-
xmlHttp=GetXmlHttpObject();
-
if(xmlHttp==null) {
-
alert("your browser does not support ajax");
-
return;
-
}
-
var url="cd.php";
-
url=url+"?d="+d;
-
url=url+"&sid="+Math.random();
-
xmlHttp.onreadystatechange=StateChanged;
-
xmlHttp.open("GET",url,true);
-
xmlHttp.send(null);
-
}
-
-
function GetXmlHttpObject()
-
{
-
var xmlHttp=null;
-
try
-
{
-
// Firefox, Opera 8.0+, Safari
-
xmlHttp=new XMLHttpRequest();
-
}
-
catch (e)
-
{
-
// Internet Explorer
-
try
-
{
-
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
-
}
-
catch (e)
-
{
-
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
-
}
-
}
-
return xmlHttp;
-
}
-
-
function StateChanged()
-
{
-
if (xmlHttp.readyState==4)
-
{
-
document.getElementById("second").value=xmlHttp.responseText;
-
}
-
}
-
</script>
-
</head>
-
<body>
-
<input type="text" id="first" size="40" onkeyup="test1();"/><br><br>
-
<input type="text" id="second" size="40"/>
-
</body>
-
</html>
php code is - <?php
-
$fog=$_GET['d'];
-
echo $fog;
-
?>
Please enclose your posted code in [code] tags (See How to Ask a Question).
This makes it easier for our Experts to read and understand it. Failing to do so creates extra work for the moderators, thus wasting resources, otherwise available to answer the members' questions.
Please use [code] tags in future. Thanks.
Moderator.
Are there any errors? If so, post the message(s) that you see.
Is the PHP file called cd.php?
Am not getting any errors its just that second text box is not getting populated, and the php file is called cd.php
And one more thing can I include a javascript file in the header of the html file and still have more javascript functions in the same html file??
The answer to your question is yes, you can.
I just tested your code in Firefox and it works absolutely fine (except for undefined temporarily appearing which you can easily get rid of). Which browsers are you testing on?
Ya now its working.....thanks for all the help
You're welcome. Glad it is!
Did you make any changes? What was the problem in the end?
I had another doubt, the php code can it have call to functions which are defined in a different directory?
That's a PHP question, but yes. If you have problems on that front, start a new thread in the PHP forum.
You're welcome :) Post back to the forum if you have more questions.
hi, can I make the second text box readonly after populating it with a value? how to do it??
that works for pretty much all input type elements
- #
-
# "http://www.w3.org/TR/html4/loose.dtd">
-
# <html>
-
# <head>
-
# <title>Untitled Document</title>
-
# <script type="text/javascript">
-
# function test1()
-
# {
-
# var a=document.getElementById("first").value;
-
# var b=a.split('/');
-
# var c=b[0];
-
# var d=b[1];
-
# if(c!="fog") {
-
# document.getElementById("second").value="";
-
# return;
-
# }
-
# xmlHttp=GetXmlHttpObject();
-
# if(xmlHttp==null) {
-
# alert("your browser does not support ajax");
-
# return;
-
# }
-
# var url="cd.php";
-
# url=url+"?d="+d;
-
# url=url+"&sid="+Math.random();
-
# xmlHttp.onreadystatechange=StateChanged;
-
# xmlHttp.open("GET",url,true);
-
# xmlHttp.send(null);
-
# }
-
#
-
# function GetXmlHttpObject()
-
# {
-
# var xmlHttp=null;
-
# try
-
# {
-
# // Firefox, Opera 8.0+, Safari
-
# xmlHttp=new XMLHttpRequest();
-
# }
-
# catch (e)
-
# {
-
# // Internet Explorer
-
# try
-
# {
-
# xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
-
# }
-
# catch (e)
-
# {
-
# xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
-
# }
-
# }
-
# return xmlHttp;
-
# }
-
#
-
# function StateChanged()
-
# {
-
# if (xmlHttp.readyState==4)
-
# {
-
# document.getElementById("second").value=xmlHttp.responseText;
-
# }
-
# }
-
# </script>
-
# </head>
-
# <body>
-
# <input type="text" id="first" size="40" onkeyup="test1();"/><br><br>
-
# <input type="text" id="second" size="40"/>
-
# </body>
-
# </html>
-
In this code how do I make the second text box readonly??
looks like line 57 is: - document.getElementById("second").value=xmlHttp.responseText;
I think if you add: - document.getElementById("second").disabled=true
before the close squigly ( ' } ' ) on line 58 it should do it
I have introduced a check box only if the check box is clicked only then the second text box has to be populated how can i check everytime whether the check box is clicked or not?
- "http://www.w3.org/TR/html4/loose.dtd">
-
<html>
-
<head>
-
<title>Untitled Document</title>
-
<script type="text/javascript">
-
function test1()
-
{
-
var a=document.getElementById("first").value;
-
var b=a.split('/');
-
var c=b[0];
-
var d=b[1];
-
if(c!="fog") {
-
document.getElementById("second").value="";
-
return;
-
}
-
xmlHttp=GetXmlHttpObject();
-
if(xmlHttp==null) {
-
alert("your browser does not support ajax");
-
return;
-
}
-
var url="cd.php";
-
url=url+"?d="+d;
-
url=url+"&sid="+Math.random();
-
xmlHttp.onreadystatechange=StateChanged;
-
xmlHttp.open("GET",url,true);
-
xmlHttp.send(null);
-
}
-
-
function GetXmlHttpObject()
-
{
-
var xmlHttp=null;
-
try
-
{
-
// Firefox, Opera 8.0+, Safari
-
xmlHttp=new XMLHttpRequest();
-
}
-
catch (e)
-
{
-
// Internet Explorer
-
try
-
{
-
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
-
}
-
catch (e)
-
{
-
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
-
}
-
}
-
return xmlHttp;
-
} }
-
-
function StateChanged()
-
{
-
if (xmlHttp.readyState==4)
-
{
-
document.getElementById("second").value=xmlHttp.responseText;
-
}
-
}
-
</script>
-
</head>
-
<body>
-
<input type="text" id="first" size="40"/>
-
<input type="checkbox" id="third" onClick="test1()";/><br><br>
-
<input type="text" id="second" size="40"/>
-
</body>
-
</html>
-
If only the the check box is clicked only then the second text box has to be populated, even for the first time the check box is clicked and then later if it is unchecked then it should not populate the second text box for the second time.
Can somebody plz help me??
Please enclose your posted code in [code] tags (See How to Ask a Question).
This makes it easier for our Experts to read and understand it. Failing to do so creates extra work for the moderators, thus wasting resources, otherwise available to answer the members' questions.
Please use [code] tags in future.
Moderator.
I have introduced a check box only if the check box is clicked only then the second text box has to be populated how can i check everytime whether the check box is clicked or not?
Use the checked property of the checkbox.
I have used this
if(document.getElementById("third").checked==true) but its not working can somebody tell me the reason??
Use a button or onkeyup (as you had earlier) to call the function, not onclick on the checkbox.
Post your reply Sign in to post your reply or Sign up for a free account.
Similar topics
1 post
views
Thread by Swadh |
last post: by
|
3 posts
views
Thread by Alonso |
last post: by
|
1 post
views
Thread by vj |
last post: by
| |
11 posts
views
Thread by eureka |
last post: by
|
3 posts
views
Thread by joseph.mccastlain |
last post: by
| |
2 posts
views
Thread by Ronald |
last post: by
| | | | | | | | | | | |