CODEWITHSUNDEEP
phpjquerymysql
Tim
Tim

Reputation: 1

<a href> form option? dynamic Jquery

I'm pretty new to coding, so please bear with me (I don't even know if what I want to do is possible). I am trying to make a join page for a new webpage, which requires people to select multiple skills that they know how to do, and want to know how to do.

Once a skill is selected, I need a 140char box to pop up to explain. I have the database with all of the skills set setup already. There are 11 main skill groups, with many children underneath them, each will a parent_id, and specific skill_id.

I found a menu, called "JQuery multi level accordion menu". I couldn't figure out how to dynamically call all of the skills, so I have just hardcoded them in there. I was able to get them listed, but not in the accordion. If anybody has any ideas, please let me know.

The main problem that I have is that I need the menu to work like a form, so that I can POST which skills have been selected, along with its 140char box. Since the menu requires the skill to be an ahref, I don't know how to turn that into a form option. This is the first two elements of the menu....

<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>

When I try to load them dynamically, I use

  <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>

Any Ideas? If I didn't include any necessary code, let me know!

Upvotes: 0

Views: 279

Answers (1)

Jay
Jay

Reputation: 3531

If you want an anchor tag to perform POST requests, you need to look at the jQuery.post() method. If you want it to perform form submissions, there's the submit() method. Check out the jQuery docs to see how both work, but from the looks of your code, since you don't have an actual <form> you will most likely need jQuery.post

In either case, what you need is a click event listener on your anchor tags. So something like:

<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>

Sorry if I've oversimplified anything (you said you're new to coding).

Upvotes: 1

Related Questions