jimfog Posted October 20, 2011 Share Posted October 20, 2011 I will begin the opposite, by demonstrating the code first. [COD<a onclick="jason()" style="display:block;" class="testMenuItem1" title="element1" name="1">08:00</a> <?php echo $form?> <a "class="testMenuItem2" title="element1" name="1">09:00</a> <?php echo $form?> [/code] In element1 i have attached an onclick event that executes this function here: function jason(){$("#whole").slideToggle("slow"); }; @whole is the div's name given to the form: <form action="Proccess.php" method="post"><div id="whole"> <table border="0"> <tr> <td >Name</td> <td><input type="text" name="name" maxlength="45" size="35" /></td> </tr> <tr> <td>Phone</td> <td><input type="text" name="phone" maxlength="45" size="35" /></td> </tr> <tr> <tr class="time"> <td>Time</td> <td><input type="text" name="time" maxlength="45" size="35" /></td> </tr> <tr> <td><input class="submit" type="submit" value="submit" maxlength="25" size="15" /></td> </tr> </table> </div> </form> The problem is that if i attach an onclick event(calling the same function as testmenuitem1) also in "testMenuItem2", the form code that will open is that below "testMenuItem1. The forms are identical in both items, i just want, the form appearing below its corresponding element. Now, the only form that appears is the one under "testMenuItem1, even if i click "testMenuItem2. I hope you understand the nature of the problem. Of course the items are many more, i am just using this 2 for example only. I Link to comment Share on other sites More sharing options...
justsomeguy Posted October 20, 2011 Share Posted October 20, 2011 If the forms have the same IDs, they need to be different. IDs on a page need to be unique. There's also a misplaced quote in the second link. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 20, 2011 Share Posted October 20, 2011 you can use 1 class name for link and target class name for the toggle <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/ $(document).ready(function(){ $(".testMenuItem1").click(function (){$(this).next("form").children("div.show_hide").slideToggle("slow");});});/*--*//*]]>*/</script> <style type="text/css"></style></head><body><a onclick="jason()" style="display:block;" class="testMenuItem1" title="element1" name="1">08:00</a><form action="Proccess.php" method="post"><div class="show_hide"> <table border="0"> <tr> <td >Name</td> <td><input type="text" name="name" maxlength="45" size="35" /></td> </tr> <tr> <td>Phone</td> <td><input type="text" name="phone" maxlength="45" size="35" /></td> </tr> <tr> <tr class="time"> <td>Time</td> <td><input type="text" name="time" maxlength="45" size="35" /></td> </tr> <tr> <td><input class="submit" type="submit" value="submit" maxlength="25" size="15" /></td> </tr> </table> </div> </form><a onclick="jason()" style="display:block;" class="testMenuItem1" title="element1" name="1">09:00</a> <form action="Proccess.php" method="post"><div class="show_hide"> <table border="0"> <tr> <td >Name</td> <td><input type="text" name="name" maxlength="45" size="35" /></td> </tr> <tr> <td>Phone</td> <td><input type="text" name="phone" maxlength="45" size="35" /></td> </tr> <tr> <tr class="time"> <td>Time</td> <td><input type="text" name="time" maxlength="45" size="35" /></td> </tr> <tr> <td><input class="submit" type="submit" value="submit" maxlength="25" size="15" /></td> </tr> </table> </div> </form> </body></html> Link to comment Share on other sites More sharing options...
jimfog Posted October 24, 2011 Author Share Posted October 24, 2011 Hi and sorry for coming late. 2 questions dsonesuk. I see you have a link here-in relation to jQuery: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script> I am novice in jQuery. Where exatcly the above file is needed, the UI component of jQuery? The other question has to do with the form. I see that in each a element(the one upon which clicking will "slidetoggle" the form) you write all the form code. Why not pass the form to a variable(contained in another file) and call it using an echo statement? This is what i originally did: <a onclick="jason()" style="display:block;" class="testMenuItem1" title="08:00" name="1">08:00</a> <?php echo $form?> Thanks. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 24, 2011 Share Posted October 24, 2011 I use a direct link to jquery libray from http://ajax.googleapis.com, which save me downloading and installing this library on my server, and if i require updated version, just look up latest version links and add that. the reason I added the form code directly, I wanted to show an simple example, and not go through rigmarole creating php code to show the form that may require different form names, input names and other different atributes instead. Link to comment Share on other sites More sharing options...
jimfog Posted October 25, 2011 Author Share Posted October 25, 2011 I use a direct link to jquery libray from http://ajax.googleapis.com, which save me downloading and installing this library on my server, and if i require updated version, just look up latest version links and add that. Nor exactly what i meant. In many jQuery scripts i see 2 links: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script> Why both are needed? What is the purpose of the one what is the purpose of the other? Am i clear now? Link to comment Share on other sites More sharing options...
justsomeguy Posted October 25, 2011 Share Posted October 25, 2011 The main jQuery file is mostly for working with the DOM, and the UI file adds user interface elements. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.