JavaScript Forum

**kernelgpf** · 01-25-2009, 12:13 PM

In a script, I'm first using a form to call a list of entries from my database. Then, next to each item on the list, a "enter this show" link shows up. In the next function, when the user clicks "enter this show", a dog_id and show_id are passed. Each URL on the page is labelled "showX" with "X" being the show ID. All my variables are working fine. When the show_id is passed to the second function, my Ajax request should return the simple text "show successfully entered" in "ajaxentershow.php", as that is all the file contains.

The problem is nothing happens when the "enter this show" link is clicked. No errors in Firebug, no messages, nothing. I'm at a loss.

Here's my script:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" 
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head>

<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<script type="text/javascript">
function sendRequest() {
    

var showtype = document.test.showtype.options;
var chosen_showtype = showtype[showtype.selectedIndex].value;
var dog_id = document.test.dog_id.options;
var chosen_dogid = dog_id[dog_id.selectedIndex].value;


        new Ajax.Request("ajaxshowsearch.php", 
                    { 
                    method: 'post', 
                    postBody: 'showtype='+chosen_showtype+'&dog_id='+chosen_dogid,
                    onComplete: showResponse 
                    });
                
                }

            function showResponse(req){
                $('foo').innerHTML= req.responseText;
            }
            
            function replaceshow(show_id,dog_id) {
        new Ajax.Request("ajaxentershow.php", 
                    { 
                    method: 'post', 
                    postBody: 'show_id='+show_id+'&dog_id='+dog_id,
                    onComplete: showResponse2 
                    });
                }

            function showResponse2(req2){
                alert(req2);
                $('show'+show_id).innerHTML= 'done';
            }
</script>


<form name=test id=test onsubmit="return false;">
Dog:
HERE;
$query=mysql_query("select name,dog_id,breed from dogs where player_id='$player_id' and age < 108 and train_complete=1 and weight >= 90 and weight <= 110 and trust >= 50");
if(mysql_num_rows($query) != "0"){
    print "<select name=dog_id id=dog_id>";
while($row=mysql_fetch_array($query)){
    print "<option value=$row[dog_id]>$row[name] (#$row[dog_id]), $row[breed]</option>";
}
print "</select><br>";
}
else{
print "No dogs eligible for showing.<br>";
}

print "<select name='showtype' id='showtype'>
<option>Flyball</option>
<option>Obedience</option>
<option>Agility</option>
<option>HTM</option>
</select><br>";
if(mysql_num_rows($query) != "0"){
    print "<input type=submit name=submit value='Search Shows' onClick=sendRequest()>";
}
print "</form>";
?>


<div id="foo"></div></body></html>

the portion from the second Ajaxically called file that makes up the HTML:

Code:

while($row=mysql_fetch_array($query)){
    print "$row[name] | e: <b>$row[entry_fee]</b> | p: <b>$row[pot]</b> | runs: <b>$row[run_day]</b> | <b><a href='#' onClick='replaceshow({$row['show_id']},$dog_id)' id='show{$row['show_id']}'>enter this show</a></b><br>";
}

A URL: http://straydays.co.uk/shows.php?

HTML:

Code:

<script type="text/javascript">
function sendRequest() {
    

var showtype = document.test.showtype.options;
var chosen_showtype = showtype[showtype.selectedIndex].value;
var dog_id = document.test.dog_id.options;
var chosen_dogid = dog_id[dog_id.selectedIndex].value;


        new Ajax.Request("ajaxshowsearch.php", 
                    { 
                    method: 'post', 
                    postBody: 'showtype='+chosen_showtype+'&dog_id='+chosen_dogid,
                    onComplete: showResponse 
                    });
                
                }

            function showResponse(req){
                $('foo').innerHTML= req.responseText;
            }
            
            function replaceshow(show_id,dog_id) {
        new Ajax.Request("ajaxentershow.php", 
                    { 
                    method: 'post', 
                    postBody: 'show_id='+show_id+'&dog_id='+dog_id,
                    onComplete: showResponse2 
                    });
                }

            function showResponse2(req2){
                alert(req2);
                $('show'+show_id).innerHTML= 'done';
            }
</script>


<form name="test" id="test" onsubmit="return false;">
Dog:<select name="dog_id" id="dog_id"><option value="287">Coming Soon (#287), Dachshund</option><option value="288">Coming Soon (#288), Alaskan Malamute</option><option value="289">Coming Soon (#289), Basenji</option></select><br><select name="showtype" id="showtype">
<option>Flyball</option>
<option>Obedience</option>
<option>Agility</option>
<option>HTM</option>
</select><br><input name="submit" value="Search Shows" onclick="sendRequest()" type="submit"></form>

<div id="foo"><hr noshade="noshade">testing show | e: <b>99</b> | p: <b>6</b> | runs: <b>Wednesday</b> | <b><a href="#" onclick="replaceshow(3,287)" id="show3">enter this show</a></b><br>testing show | e: <b>99</b> | p: <b>6</b> | runs: <b>Wednesday</b> | <b><a href="#" onclick="replaceshow(4,287)" id="show4">enter this show</a></b><br></div>

**Sleeping Troll** · 02:23 PM

if(mysql_num_rows($query) != "0"){
print "<input type=submit name=submit value='Search Shows' onClick=sendRequest()>";
}

This line will submit form on click and never process the onclick event.
You should just use type=button and add all functionality in function (no pun intended) called by onclick event.

if(mysql_num_rows($query) != "0"){
print "<input type=button id='search' name= 'search' value='Search Shows' onClick=sendRequest()>";
}