how to return a value to a document.getElementById()

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
tycoon79
Forum Newbie
Posts: 4
Joined: Fri Jan 23, 2009 5:12 am

how to return a value to a document.getElementById()

Post by tycoon79 »

pickle | Please use [ code=php ], [ code=text ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.


Hi all..what i'm trying to do is change the backgroundColor of my input text with js..

this the js part

Code: Select all

 
function CreateCFormArray(){
    var y=document.getElementsByName("cf");
    //alert(y[0].value);
        for(i = 0; i < y.length; i++) {
            if(y[i].id=='cf1' && y[i].value=='0'){
                             changeCssProp(name);                            
            }
            if(y[i].id=='cf2' && y[i].value=='0'){
                             changeCssProp(phone);
            }                           
        }   
}
var thefield;
function changeCssProp(thefield) {
document.getElementById(thefield).style.backgroundColor="#FF0000";
}
 
and this is the html part

Code: Select all

 
<form id="form1" name="form1" method="post" action="">
  <table width="100%" border="2" cellspacing="0" cellpadding="0">
    <tr>
      <td>name</td>
      <td>
          <label>
            <input type="text" name="name" id="name" />
          </label>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>phone</td>
      <td>
          <label>
            <input type="text" name="phone" id="phone" />
          </label>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>
          <label>
            <input type="button" name="Submit" value="Submit" onclick="CreateCFormArray()" />
          </label>
      </td>
      <td>
          <input name="cf" type="hidden" id="cf1" value="0" />
          <input name="cf" type="hidden" id="cf2" value="0" />
      </td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
 
basicly what the script do is to check the hidden field cf with value of '0' if found it will execute changeCssProp(thefield)..but the problem is js return

error of document.getElementById(thefield) is null
can someone help me with..thanking you all in advance for reviewing my


pickle | Please use [ code=php ], [ code=text ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.
jothirajan
Forum Commoner
Posts: 69
Joined: Tue Jan 27, 2009 12:06 am

Re: how to return a value to a document.getElementById()

Post by jothirajan »

Just try this man

YOUR HTML CODE:

<form id="form1" name="form1" method="post" action="">
<table width="100%" border="2" cellspacing="0" cellpadding="0">
<tr>
<td>name</td>
<td>
<label>
<input type="text" name="name" id="name" />
</label>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>phone</td>
<td>
<label>
<input type="text" name="phone" id="phone" />
</label>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>
<label>
<input type="button" name="Submit" value="Submit" onclick="joe()" />
</label>
</td>
<td>
<input name="cf" type="hidden" id="cf1" value="0" />
<input name="cf" type="hidden" id="cf2" value="0" />
</td>
<td>&nbsp;</td>
</tr>
</table>
</form>

USE MY SCRIPT :

function joe()
{
var pname=document.getElementById('phone').value;
var name1=document.getElementById('name').value;
if(name1=="")
{
document.getElementById('name').style.backgroundColor="#FF0000";
document.getElementById('phone').style.backgroundColor="";
return false;
}
if(pname=="")
{
document.getElementById('phone').style.backgroundColor="#FF0000";
document.getElementById('name').style.backgroundColor="";
return false;
}

return true;
}


Thanks ...
JOE....come to me....if want more for your bucket
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Re: how to return a value to a document.getElementById()

Post by JellyFish »

Could it be that you forgot the "quotation marks" around the argument you pass to changeCssProp? When you write:

Code: Select all

changeCssProp(name);
JavaScript doesn't interpret name as a string, but rather it interprets it as a variable. So unless you already defined name somewhere, then wrap quotes around name so that it is interpreted as a string literal:

Code: Select all

changeCssProp("name");
Do the same with the other changeCssProp call (i.e. wrap quotes around phone too).

Hope that solves the problem. :)
jothirajan
Forum Commoner
Posts: 69
Joined: Tue Jan 27, 2009 12:06 am

Re: how to return a value to a document.getElementById()

Post by jothirajan »

Neglect this changeCssProp(name);

and your blah blah....

Dont copy anything from your round...try from own......

But i have checked my above coding.....it;s good...working anywhere.....

Try this..if you got the thing.....then kiss my BASS

Thanks
JOE
tycoon79
Forum Newbie
Posts: 4
Joined: Fri Jan 23, 2009 5:12 am

Re: how to return a value to a document.getElementById()

Post by tycoon79 »

Thanx a lot JellyFish your suggestion work..thank you man...also thank you jothirajan for your time reading my post and came out with a suggestion..really appreciate it
Post Reply