<a href=""> form option? dynamic Jquery</a>

时间:2012-03-23 03:57:18

标签: php jquery mysql

我对编码很陌生,所以请耐心等待(我甚至不知道我想做什么是可能的)。我正在尝试为新网页创建一个联接页面,这需要人们选择他们知道如何做的多种技能,并且想知道该怎么做。

一旦选择了技能,我需要一个140char的盒子来弹出解释。我已经拥有了所有技能设置的数据库。有11个主要技能组,其下有许多孩子,每个都有一个parent_id和特定的skill_id。

我找到了一个名为"JQuery multi level accordion menu"的菜单。我无法弄清楚如何动态调用所有技能,所以我刚刚在那里硬编码。我能够把它们列出来,但不能用手风琴。如果有人有任何想法,请告诉我。

我遇到的主要问题是我需要菜单像表单一样工作,以便我可以POST选择哪些技能,以及它的140char盒子。由于菜单需要技巧为ahref,我不知道如何将其转换为表单选项。这是菜单的前两个元素......

<link href="styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/accordian.js"></script>
<script language="JavaScript">

$(document).ready(function() {
$(".topnav").accordion({
    accordion:false,
    speed: 500,
    closedSign: '[+]',
    openedSign: '[-]'
});
    });

</script>
<script type="text/javascript">

..............

                    <ul class="topnav" style="padding-top:50px;">
<li><a href="#">Academic</a>
    <ul>
         <li><a href="#">Spanish</a>
            <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Research</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Politics</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">History</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Anantomy</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Phsiology</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Calculus</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Metaphors</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Physhology</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Fiction Writing</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Japanese</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Vocabulary</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Mental Disorders</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
    </ul>
</li>
    <li><a href="#">Business/Career</a>
    <ul>
         <li><a href="#">Financial Planning</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Startup Advice</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>

         <li><a href="#">Networking</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Professional Skills</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Public Speaking</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Interviewing</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Marketing</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Sales</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Managment</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Team Building</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Job Application</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Budgeting</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Advertising</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Resume Buidling</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
    </ul>
</li>
<li><a href="#">Computer/Technology</a>
    <ul>
         <li><a href="#">Indesign</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Illustrator</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Photoshop</a>
         <ul>
                 <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Dreamweaver</a>
         <ul>
                <li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Flash</a><ul><li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">After Effects</a><ul><li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Corel Draw</a><ul><li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Final Cut</a><ul><li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Solidworks</a><ul><li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Alias</a><ul><li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Maya</a><ul><li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">AutoCAD</a><ul><li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">3DS Max</a><ul><li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Rhino</a><ul><li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Excel</a><ul><li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Microsoft Office</a><ul><li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Google Adwords</a><ul><li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Powerpoint</a><ul><li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Hacking</a><ul><li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">HTML</a><ul><li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">CSS</a><ul><li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">Java</a><ul><li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">PHP</a><ul><li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">MySQL</a><ul><li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
         <li><a href="#">JQuery</a><ul><li><a href="#"><textarea>What do you know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
    </ul>
</li>

当我尝试动态加载它时,我使用

  <li><a href="#">Other</a>
    <ul>
        <li><a href="#">Juggling</a><ul><li><a href="#"><textarea>What do you want to know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
        <li><a href="#">R/C Cars</a><ul><li><a href="#"><textarea>What do you want to know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
        <li><a href="#">Model Railroads</a><ul><li><a href="#"><textarea>What do you want to know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
        <li><a href="#">How to Drink Whiskey like a Champ</a><ul><li><a href="#"><textarea>What do you want to know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
        <li><a href="#">Foursquare</a><ul><li><a href="#"><textarea>What do you want to know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
        <li><a href="#">Fashion</a><ul><li><a href="#"><textarea>What do you want to know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
        <li><a href="#">Telling Ghost Stories</a><ul><li><a href="#"><textarea>What do you want to know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
        <li><a href="#">Drive Stick Shift</a><ul><li><a href="#"><textarea>What do you want to know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
        <li><a href="#">Solving a Rubix Cube</a><ul><li><a href="#"><textarea>What do you want to know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>
        </ul>

<li><a href="#">Test</a>
    <ul>
<?
<form> 
// Connect to database server
mysql_connect("****","****","*****");
//Select database
mysql_select_db("****");

 $query = "select concat(skill_name) from ******* where parent_id = 2" or die (mysql_error());
 $result = mysql_query($query);
 if($result == false)
{
user_error("Query failed: " . mysql_error() . "<br />\n$query");
}
elseif(mysql_num_rows($result) == 0)
{
echo "<p>Sorry, no rows were returned by your query.</p>\n";
} 
else
{
while($query_row = mysql_fetch_assoc($result))
{
  foreach($query_row as $key => $value)
  {
     echo "" <li><a href="#">$value</a><ul><li><a href="#"><textarea>What do you want  to know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>"";

     //echo "$value<br />\n";
  }
  echo "" <li><a href="#">$value</a><ul><li><a href="#"><textarea>What do you want to know about this subject?</textarea><input type="submit" class="send-button" value="Submit" /></a></li>
            </ul></li>"";


  //"<br />\n";
}
} 

?>
</ul>
</li>
                </div>

任何想法?如果我没有包含任何必要的代码,请告诉我们!

1 个答案:

答案 0 :(得分:1)

如果您希望锚标记执行POST请求,则需要查看jQuery.post()方法。如果您希望它执行表单提交,则使用submit()方法。查看jQuery文档以查看两者是如何工作的,但是从代码的外观来看,因为您没有实际的<form>,您很可能需要jQuery.post

在任何一种情况下,您需要的是锚标记上的单击事件侦听器。如下所示:

<script>
jQuery("a").click(function(evt) {
        //this function gets called every time an <a> tag is clicked
        //evt contains information about the event
        //look at it in Chrome Developer tools to see it
        console.log(evt); //logging the event object so you can see what it contains
        jQuery.post(YOUR CODE HERE);
});
</script>

很抱歉,如果我过度简化了任何内容(你说你不熟悉编码)。