JavaScript - Javascript Onclick Error

Hi everyone,

I'm a JavaScript newbie and am trying to use it to direct users to a search page based on the values of two drop down boxes. The issue i am having is that the code below works fine on a test page, but not on my test domain (with wordpress theme) and so i was wondering whether there is anything I am doing wrong...

Is onclick already defined maybe? I'm not sure how it works to be honest...

Code:

<script type="text/javascript">
function gosearch() {
var breed = document.getElementById('breed').value;
var area = document.getElementById('area').value;
var site = "http://hairloss-help.net/?s=";
var searchurl = site + breed + area;

window.location.href = searchurl;
}
</script> 

<strong>Breed</strong>
<select name="breed" id="breed">
<option value="">&gt; All</option>
<option value="Affenpinscher+">Affenpinscher</option>
<option value="Afghan+Hound+">Afghan Hound</option>
<option value="Airedale+Terrier+">Airedale Terrier</option>
<option value="Akita+">Akita</option>
<option value="Alaskan+Malamute+">Alaskan Malamute</option>
<option value="Alsation+">Alsation</option>
<option value="American+Cocker+Spaniel+">American Cocker Spaniel</option>
<option value="Anatolian+Karabash+">Anatolian Karabash</option>

</select>

<strong>Area</strong>
<select name="area" id="area">
<option value="all">&gt; All Areas</option>
<optgroup label="England">
<option value="Avon">Avon</option>
<option value="Bedfordshire">Bedfordshire</option>
<option value="Berkshire">Berkshire</option>
<option value="Bristol">Bristol</option>
<option value="Buckinghamshire">Buckinghamshire</option>
<option value="Cambridgeshire">Cambridgeshire</option>
<option value="Cheshire">Cheshire</option>
<option value="Cleveland">Cleveland</option>
<option value="Cornwall">Cornwall</option>

</select>

<input type="button" name="gobutton" id="gobutton" value="Go!" onclick="gosearch();" />

The domain I'm currently testing this on is http://www.hairloss-help.net.

Any help would be much appreciated.

Thanks

Sam

Hi,

I want to call a javascript function without having a button click and it is nestled within php.

I have the function OpenChat() in my main page - this works fine.

I have the below sub page that is called by an onclick event (originally I had the script launch through a button but I am over loading my server at the moment and need to find a different way to call the function).

So I tried the below, which doesn't work. The function just isn't working.

My script is:
PHP Code:
<?php
session_start();

    if (!(isset($_SESSION['login']) && $_SESSION['login'] !='')){
        header ("Location: Welcome.php");
        }
$SMyPId=$_SESSION['MyPId'];

include("dbconnect.php");

            $result = mysql_query("SELECT (chatterspace) FROM chat 
            WHERE chatter='{$SMyPId}' AND EndDate IS NULL group by chatterspace");
            
            while($row = mysql_fetch_array($result)){
                $oak = $oak . ';' . $row['chatterspace'];
                }

$beach=explode(";",$oak);
$divonecount=$beach[1];
$divtwocount=$beach[2];
$divthreecount=$beach[3];
$divfourcount=$beach[4];
$divfivecount=$beach[5];

        if($divonecount=='chat1'){
            $chat1='full';
        }else if($divtwocount=='chat1'){
            $chat1='full';
        }else if($divthreecount=='chat1'){
            $chat1='full';
        }else if($divfourcount=='chat1'){
            $chat1='full';
        }else if($divfivecount=='chat1'){
            $chat1='full';
        }else if($divonecount=='chat2'){
            $chat2='full';
        }else if($divtwocount=='chat2'){
            $chat2='full';
        }else if($divthreecount=='chat2'){
            $chat2='full';
        }else if($divfourcount=='chat2'){
            $chat2='full';
        }else if($divfivecount=='chat2'){
            $chat2='full';
        }else if($divonecount=='chat3'){
            $chat3='full';
        }else if($divtwocount=='chat3'){
            $chat3='full';
        }else if($divthreecount=='chat3'){
            $chat3='full';
        }else if($divfourcount=='chat3'){
            $chat3='full';
        }else if($divfivecount=='chat3'){
            $chat3='full';
        }else if($divonecount=='chat4'){
            $chat4='full';
        }else if($divtwocount=='chat4'){
            $chat4='full';
        }else if($divthreecount=='chat4'){
            $chat4='full';
        }else if($divfourcount=='chat4'){
            $chat4='full';
        }else if($divfivecount=='chat4'){
            $chat4='full';
        }else if($divonecount=='chat5'){
            $chat5='full';
        }else if($divtwocount=='chat5'){
            $chat5='full';
        }else if($divthreecount=='chat5'){
            $chat5='full';
        }else if($divfourcount=='chat5'){
            $chat5='full';
        }else if($divfivecount=='chat5'){
            $chat5='full';
        }


                $result = mysql_query("SELECT * FROM allusers
                WHERE PId='{$mulberry}'");

                while($row = mysql_fetch_array($result)){
                $nosegay=rand(). rand(). rand(). rand(). rand();
                $nightshade="{$SMyPId};{$mulberry};{$row['fullname']};{$nosegay}";
                $elm=$row['pphoto'];                
                $helmlock=$row['fullname'];
                }

$poplar=$_POST['chat'];

            if($chat1 !=='full'){
                echo '<script type="text/javascript">
                    function This(){
                    OpenChat(\'chatheader1.php\',\'chat1\',\'chat=' . $poplar . '\',\'ChatID=0\',\'getDisplayChat1.php\',\'ChatDisplayOne\',\'getThisChat1.php\',\'displaytalkOne\',\'artemis=' . $poplar . '\')";
                    alert("chat1");
                    }
                </script>';
            }elseif($chat2 !=='full'){
                echo '<script type="text/javascript">
                    function This(){
                    OpenChat(\'chatheader2.php\',\'chat2\',\'chat=' . $poplar . '\',\'ChatID=0\',\'getDisplayChat2.php\',\'ChatDisplayTwo\',\'getThisChat2.php\',\'displaytalkTwo\',\'artemis=' . $poplar . '\')";
                    alert("chat2");
                    }
                </script>';
            }elseif($chat3 !=='full'){
                echo '<script type="text/javascript">
                    function This(){
                    OpenChat(\'chatheader3.php\',\'chat3\',\'chat=' . $poplar . '\',\'ChatID=0\',\'getDisplayChat3.php\',\'ChatDisplayThree\',\'getThisChat3.php\',\'displaytalkThree\',\'artemis=' . $poplar . '\')";
                    alert("chat3");
                    }
                </script>';
            }elseif($chat4 !=='full'){
                echo '<script type="text/javascript">
                    function This(){
                    OpenChat(\'chatheader4.php\',\'chat4\',\'chat=' . $poplar . '\',\'ChatID=0\',\'getDisplayChat4.php\',\'ChatDisplayFour\',\'getThisChat4.php\',\'displaytalkFour\',\'artemis=' . $poplar . '\')";
                    alert("chat4");
                    }
                </script>';
            }elseif($chat5 !=='full'){
                echo '<script type="text/javascript">
                    function This(){
                    OpenChat(\'chatheader5.php\',\'chat5\',\'chat=' . $poplar . '\',\'ChatID=0\',\'getDisplayChat5.php\',\'ChatDisplayFive\',\'getThisChat5.php\',\'displaytalkFive\',\'artemis=' . $poplar . '\')";
                    alert("chat5");
                    }
                </script>';
            }else{
                echo '<script type="text/javascript">
                    function This(){
                    alert("You have reached your IM capacity, please close a chat box");
                    }
                </script>';
            }



    mysql_close($con);
?>

I am very new Beginner of Javascript..
My query is that
1)I have 2 radio buttons A and B
2)When I click A I want 2 dropdownbox and a button to be displayed
3)When I click B I want 2 dropdownbox to be displayed.
4)Both should be independent

Plz tell me the code..for this

I'm attempting to modify a facebook app I purchased that allows friends to send gifts to each other.

The problem with the program is that when gifts are accepted, they continue to show on the "accept gift" page. I'd like to change it so that after gifts are accepted, they no longer show on that page, preventing the user from wondering "which gifts have I already accepted?" Later, I'd like to also create a reject gift option, but 1st things 1st.

The program is written in php, html, and javascript. I decided one solution was to add a new empty column to the sql table called "accepted". When the user presses "accept gift" I'm thinking an onclick event could be used to add a "y" (for yes) to that record in the database.

Then modify the code that displays the gifts to only show gifts from the table 'WHERE' accepted is equal to null.

My questions a

Is this a logical approach?

If so, is the process: create a javascript function that updates mysql and call that function with an onclick event?

What about sql injection vulnerabilities?

I've read a lot about ajax and HTTP request being the way to do things like this, but could not find an example that represented what I want to do. After weeks of reading, I'm still lost.

Ok so I have a problem which I previously thought I had solved.

I am creating a JavaScript Toggle off and on panel and although I have the code sussed for the toggling function there is something off on the image swap function

I currently have it set up on two panels, so the code is used multiple times, the problem is it changes both buttons each time rather that just the one that was clicked.

Anyway let's see what you think

Javascript:
Code:

<script type="text/javascript">
var imageURL = "../images/portfolio/open.png";

function changeImage() {

     if (document.images) {
              if (imageURL == "../images/portfolio/open.png") imageURL = "../images/portfolio/close.png";
         else if (imageURL == "../images/portfolio/close.png") imageURL = "../images/portfolio/open.png";
         
         document.images["img1"].src = imageURL;
		 document.images["img2"].src = imageURL;
     }
} 
</script>

HTML:
Code:

<a href="#" onclick="toggle_visibility('job1');"><img name="img1" src="../images/portfolio/open.png" onClick="changeImage();"></a>
<a href="#" onclick="toggle_visibility('job2');"><img name="img2" src="../images/portfolio/open.png" onClick="changeImage();"></a>

Any idea what I have done wrong and why it is changing both of the images ('img1' and 'img2') instead of changing them seperately as they are clicked ??

Okay. So here's what I'm trying to do. I have my landing page to my site and near the bottom I have 4 little 48x48 class divs (for social network link images if you were wondering ). Each Class div has a background style all to it's own. (so in this case 4 different divs with 4 different class names) .

What I want to do with the javascript is to have a function(s) that when called on (depending on which div.class was/is clicked on) will open up a lightbox/new page containing the new page (pertaining to the appropriate social network, depending on which class has been clicked on).

I don't want to put an <a></a> tag around the div.classes themselves seperately because the landing page itself has 8 different styles, plus the div.classes I would have to hunt down within the site itself. haha

Basically in short I want the classes to have seperate links that when clicked upon it calls the function, opens the lightbox (or opens the new tab/page) and loads the appropriate page.

Think yall can help me out here?

hello everyone, i am new to all this..

i need help regarding..

i am generating text box dynamically(mean it's a multiple select box, depending upon the number you select , it will generate that many text field.)

my problem is that i want to assign a calender to the text field generated whenever a user clicks on that text field.

i am able to do it for simple text field

as
onclick="javascript: showCalendar('idname')"

but how to do it in this case, where can i declare this ?

Hi,

i have several links which i am trying to add an on click command to which copies a certain code to the clip board so the user can paste the code with out having to manually copy it first.

i have this
Code:

        $latest = simplexml_load_file('codes_ending_soon.xml');
        foreach ($latest->discount as $discount)
        {
            $code = $discount->id;
            $link = $discount->link;
            $store = $discount->storeName;
            $logo = $discount->logo;
            $details = $discount->details;
            if($code_count <=4)
            {?>
                <div class="code_cont">
                <div class="code_logo"><img src="<?php echo $logo?>" alt="<?php echo $store." code"?>" title="<?php echo $store." code"?>" height="32" /></div>
                 <a class="code" href="<?php echo $link?>" title="Click to see related product(s) / retailer and apply code" onclick="window.clipboardData.setData(<?php echo $code?>)"><?php echo $code?></a> 
                <div class="description"><?php echo $details?></div>
                </div><?php
                $code_count++;
            }
        }?>

but when i click on the link nothing seems to copy at least in firefox anyway? can anyone help me please

thanks
Luke

Hi Everyone,

How would i add an avent listener to change the source of an image? I have added the image to a canvas element through javascript using the code below.

Code:

var start = new Image();
start.src = "start.jpg";
ctx.drawImage(start, 50, 50);

Thanks!

Hi there, I am wondering if it is possible to navigate anchor links using a button onclick event. I want next and previous hit buttons to navigate the already existing hits (#hit1, #hit2, etc.).

For instance, I have:

Code:

<script type="text/javascript">
var numHits = {HITS}-1;
function nextHit(){

	if(numHits > 0){
		numHits--;
	}	
	return("location.href=" '#hit" + numHits + " ' ");//added spaces for visibility
}
</script>
<input type="button" value=">" onclick="nextHit()" />

I have tried onclick="nextHit();", onclick="nextHit(); return true/false", onclick=" return nextHit()" and a bunch of others, with no luck.

I have seen working examples with the href tag (e.g. <a href="#" onclick="func();return false">), but nothing with buttons. I also can't seem to get the working href examples to work on my server.

For instance, I cannot get this code to work, it just goes to js_required.html:
<a href="js_required.html" onclick="doSomething(); return false;">go</a>
function doSomething(){
alert("test");
}

It seems so simple, I'm assuming I'm missing something very basic. I would greatly appreciate any help!

~Bobio

Hi!

I'm no JavaScript expert so wonder if you could help?

I have a page with four divs, and would like to change the content in each div by clicking on a link under each div. Can this be done with JavaScript?

I've searched everywhere for the last three hours and cannot find any 'readymade' code. Can anyone help me or point me in the right direction?

Any help will be really welcome! Thank you!

So I opted to use JavaScript & PHP (instead of Flash) to create a sort-of "t-shirt designer" -- basically, it's a gallery-type script that allows users to scroll through t-shirt styles, swap colors, and so on, prior to reaching the actual design tool. And I'm starting to regret.

It's actually working very well so far, except for one thing: I want the t-shirt option that the user selects to link the user to the design tool. The "gallery" already has an image for each possible option that displays whenever the user selects a combination, but I want to make that image is a clickable link.

I have no idea where to start -- I know next to nothing about javascript -- and to accomplish this in Flasjh I'd have to start this stupid basic thing all over again from scratch, and it would defeat the point of not using Flash in the first place, so... any ideas or suggestions?

I need to make a table fadeout with JavaScript when I click a button. The table is simple.
Code:

<table id="users_table" style="border:1px solid #000;border-collapse: collapse;" border='1'>
	<tr class="dataRow">
		<td>11</td>
		<td>12</td>
		<td>13</td>
	</tr>
	<tr class="dataRow">
		<td>21</td>
		<td>22</td>
		<td>23</td>
	</tr>
	<tr id="row3" class="dataRow">
		<td>31</td>
		<td>32</td>
		<td>33</td>
	</tr>
	<tr class="dataRow">
		<td>41</td>
		<td>42</td>
		<td>43</td>
	</tr>
</table>

There is a button that calls a function called fadeout(). I cannot find a way to make the table fade out with just that one function. Is that even possible? If not, what other functions are necessary to make this happen?

Here is my script -- Applied in <head>

Code:

<script language="JavaScript">
var bgImage = new Array(); // don't change this

bgImage[0] = "images/aboutus_1.jpg";
bgImage[1] = "images/1.jpg";
bgImage[2] = "images/2.jpg";
bgImage[3] = "";

function changeBG(bgImage)
{
     document.body.background = backImage[bgImage];
}

</script>

And here is the code im using that is not working within <body>

Code:

<body>

     <div id="map"></div>
     <div id="bf_container" class="bf_container">
     <div id="bf_background" class="bf_background">
          <img id="bf_background" src="images/background/default.jpg" alt="image1" style=" display:none;"/>

     <div class="bf_overlay"></div>
     <div id="bf_page_menu" class="bf_menu" >
          <h1 class="title">Fujiyama<span>Japanese</span></h1>
               <ul>
                    <li><a href="#" onClick="javascript:changeBG(1)" data-content="home"><span class="bf_background"></span><span>Welcome</span></a></li>
                    <li><a href="#" onClick="javascript:changeBG(0)" data-content="about"> <span class="bf_hover"></span><span>About us</span></a></li>

this goes on, however, it does not change the background when clicking on "Welcome" or "About us" Links. Where I want "About us" to load image#0 in the index and "Welcome" to load image #1.

Any help would be greatly appreciated.

Thanks,

Cross

I have a page where it has anchors going to different parts of the page and i have a list of links at the top to go to each anchor. when you click on the links to each part of the page it shows the "back to top, next, back" buttons. I have 7 different links, so i need to have this happen 7 times, I only want the "back to top, next, and back" buttons to be shown when the user clicks on the link to that specific anchor, or the next/back button to that anchor from another one. I have been doing this with the div hide/show javascript however it makes me have to change sooo much information to do this.. There has got to be an easier way.. It would take me forever to finish doing this to all of them, i need a better way to achieve this. There's too much code that its confusing.

this is my current javascript:

var ie = (document.all) ? true : false;
function hideID(objID){
var element = (ie) ? document.all(objID) : document.getElementById(objID);
element.style.display="none"
}
function showID(objID){
var element = (ie) ? document.all(objID) : document.getElementById(objID);
element.style.display="block"
}

And this is just one of the links:

<li><a onclick="showID('1939top'); showID('1939next');hideID('1940top'); hideID('1941top'); hideID('1942top'); hideID('1943top'); hideID('1944top'); hideID('1945top');" href="#1939">1939</a></li>

And this is one of the back to top/next button codes:

<a href="#1940"><span id="1939next" class="next-back" onclick="hideID('1939next'); hideID('1939top')"><div class="arrow-down"></div></span></span></a>
<a href="#top"><span id="1939top" class="timeline-b2top" onclick="hideID('1939top')">Top</span></a><a name="1939" id="1939"></a>


This code has always been a huge problem for me, not only does it take forever to change the effects and all, but it is VERY messy and I really need some help on how to code it lol. Thanks so much.