SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question jquery code help

    hey every body i am using this code plus jquery with forms on my website and i jave two major problems. the first one is that i have three options at the top of my page and when the user picks an option a register form is displayed below it. however right know when i try and switch in between forms first form doesn't close it just goes lower on the page. for example if i have option A and option B and i descide that i want option A but then midway through the process i change my mind and i want option B. when i go to click on option B, option a doesn't close, and option B is displayed under it.

    my second problem is that each form is self submitting. so whenever the user presses the register button the page reloads and evaluates the form. every time the user presses register i want the option that they picked to remain open. but right now every time the button is pressed they have to reselect the option they want

    here is the code (don't forget im using jquery)

    Code:
    Code JavaScript:
    $(document).ready(function()
    	{
    		//put in p1's spot the id of the paragraph
    		$('table#groupreg').hide();
    		//replace group with the id of the anchor tag
    		$('a#group').click(function()
    		{
    			//put in p1's spot the id of the paragraph
    			$('table#groupreg').fadeIn('slow');
    		});
    	});
    Code:
    Code JavaScript:
    $(document).ready(function()
    	{
    		//put in p1's spot the id of the paragraph
    		$('table#soloreg').hide();
    		//replace group with the id of the anchor tag
    		$('a#solo').click(function()
    		{
    			//put in p1's spot the id of the paragraph
    			$('table#soloreg').fadeIn('slow');
    		});
    	});
    Code:
    Code JavaScript:
    $(document).ready(function()
    	{
    		//put in p1's spot the id of the paragraph
    		$('table#fanreg').hide();
    		//replace group with the id of the anchor tag
    		$('a#fan').click(function()
    		{
    			//put in p1's spot the id of the paragraph
    			$('table#fanreg').fadeIn('slow');
    		});
    	});
    i realise that this is a little confusing but im really not that at javascript and i am not pretending to be. so it would be great if someone here could help me out a little

    if you have any questions for me just ask

    thanks in advance

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    do youhave some html code so that wel can test how things work and give ypoum advice on what do tyou? (is this the right dialect?)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    do youhave some html code so that wel can test how things work and give ypoum advice on what do tyou? (is this the right dialect?)
    Code PHP:
    <?php
    include("header.php");
    require("connect.php");
     
    echo"
    <h1>Please select the type of membership you would like</h1>
    <p>
    <table width='90%' align='center' id='registermenu'>
    	<tr>
    		<td width='30%' align='center'>
    		<a href='#' id='group'><h3>Group</h3></a>
    		</td>
    		<td width='30%' align='center'>
    		<h3><a href='#' id='solo'>Solo</a></h3>
    		</td>
    		<td width='30%' align='center'>
    		<h3><a href='#' id='fan'>Fan</a></h3>
    		</td>
    	</tr>
    </table>
    <table width='33.33%' id='groupreg'><form method='post' action='register.php'>
    	<tr>
    		<td>
    			Username :
    		</td>
    		<td>
    			<input type='text' name='username'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    			Password :
    		</td>
    		<td>
    			<input type='password' name='password'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    			Repeat Password :
    		</td>
    		<td>
    			<input type='password' name='repeatpassword'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    			Email :
    		</td>
    		<td>
    			<input type='text' name='email'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    			Group/Band Name :
    		</td>
    		<td>
    			<input type='text' name='groupname'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    			Genre :
    		</td>
    		<td>
    			<input type='text' name='username'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    			members :
    		</td>
    		<td>
    			<input type='text' name='name1'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    		</td>
    		<td>
    			<input type='text' name='name2'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    		</td>
    		<td>
    			<input type='text' name='name3'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    		</td>
    		<td>
    			<input type='text' name='name4'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    		</td>
    		<td>
    			<input type='text' name='name5'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    		</td>
    		<td>
    			<input type='text' name='name6'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    		</td>
    		<td>
    			<input type='text' name='name7'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    			Key Words : (these will be used to help people find your group using the search function. Seperate each word with a space.)
    		</td>
    		<td>
    		<textarea name='keywords' rows='10'></textarea>
    		</td>
    	</tr>
    	<tr>
    		<td>
    		</td>
    		<td>
    	<input type='submit' value='register' name='groupsubmit'>
    		</td>
    	</tr>
    </form></table>
     
    <table align='center' width='33.33%' id='soloreg'><form method='post' action='register.php'>
    	<tr>
    		<td>
    			Username :
    		</td>
    		<td>
    			<input type='text' name='username'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    			Password :
    		</td>
    		<td>
    			<input type='password' name='password'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    			Repeat Password :
    		</td>
    		<td>
    			<input type='password' name='repeatpassword'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    			Email :
    		</td>
    		<td>
    			<input type='text' name='email'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    			Name/Stage name :
    		</td>
    		<td>
    			<input type='text' name='name'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    			Genre :
    		</td>
    		<td>
    			<input type='text' name='username'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    			Key Words : (these will be used to help people find your group using the search function. Seperate each word with a space.)
    		</td>
    		<td>
    		<textarea name='keywords' rows='10'></textarea>
    		</td>
    	</tr>
    	<tr>
    		<td>
    		</td>
    		<td>
    	<input type='submit' value='register' name='solosubmit'>
    		</td>
    	</tr>
    </form></table>
     
    <table align='right' width='33.33%' id='fanreg'><form method='post' action='register.php'>
    	<tr>
    		<td>
    			Username :
    		</td>
    		<td>
    			<input type='text' name='username'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    			Password :
    		</td>
    		<td>
    			<input type='password' name='password'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    			Repeat Password :
    		</td>
    		<td>
    			<input type='password' name='repeatpassword'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    			Email :
    		</td>
    		<td>
    			<input type='text' name='email'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    			First name :
    		</td>
    		<td>
    			<input type='text' name='firstname'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    			Last name :
    		</td>
    		<td>
    			<input type='text' name='lastname'>
    		</td>
    	</tr>
    	<tr>
    		<td>
    		</td>
    		<td>
    	<input type='submit' value='register' name='solosubmit'>
    		</td>
    	</tr>
    </form></table>
    ";
     
    include("footer.php");
    ?>

    in my header.php i include all of javascript files that i had posted at first

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    It seems like you need to fade out the other ones first, before fading in the one that you want.

    Typically a callback would be used, but in this case it's different elements that are being animated so a timeout is more appropriate.

    Something like this, for each of them, would do the trick.

    Code javascript:
    $('a#solo').click(function() {
        $('table#groupreg, table#fanreg').fadeOut('slow');
        setTimeout(function () {
            $('table#soloreg').fadeIn('slow');
        }, 600);
    });
    Last edited by paul_wilkins; Dec 29, 2010 at 23:36.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    works perfectly thanks alot!!! i appreciate it

  6. #6
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anyone have any ideas for my other problem?

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by pwat92 View Post
    anyone have any ideas for my other problem?
    There are two differnt types of solutions for that.

    One is to set a cookie that specifies which form is being used, so that on page reload you can show that same form again.

    A second solution is to override the onsubmit event and submit the form via an ajax event instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok well i was thinking of using sessions because im pretty sure there more secure. and i dont have the slightest clue aboput anything ajax. is it easy to do it or is it a complex? unless cookies are easier...

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by pwat92 View Post
    ok well i was thinking of using sessions because im pretty sure there more secure.
    Sessions are managed from the server-side, and why is security of concern in this situation where you're wanting the form type to be remembered?

    Quote Originally Posted by pwat92 View Post
    and i dont have the slightest clue aboput anything ajax. is it easy to do it or is it a complex?
    It's where you submit the form to a webpage, without reloading the page.

    Quote Originally Posted by pwat92 View Post
    unless cookies are easier...
    Even easier than cookies is to submit the form, and then redirect back to the multiple forms page with a fragment identifier, that determines which one is seen by default on loading the page.

    For example:

    page.php#groupreg

    With which you can hide all the forms and then do:
    $(location.hash).show();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •