Ajax form "hide fields" function

[ben18285]

Hi all,

 

I need help with a form I have created. The form submission works fine so far, only thing is that upon submission the success message should show up and the form fields should be hidden.

 

The success message is shown but the fields also...

 

here is what I defined:

//Ajax Contact Form Submission
	$("#ajax-quote-form").submit(function(){
	var str = $(this).serialize();
	   $.ajax({
	   type: "POST",
	   url: "quote/quote2.php",
	   data: str,
	   success: function(msg){ 
		$("#c-note").ajaxComplete(function(event, request, settings){
		if(msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
		{
		result = '<div class="notification_ok">Your quote has been sent. Thank you!</div>';
		$("#fields").hide();
		}
		else
		{
		result = msg;
		}
		$(this).html(result);
		});
		}
	 });
	return false;
	});

 

Any advice on this one?

 

Thanks so much in advance, Ben

[seanlim]

What is your HTML structure like? I would think that you will need a $("#ajax-quote-form").hide() or something similar.

[ben18285]

What is your HTML structure like? I would think that you will need a $("#ajax-quote-form").hide() or something similar.

 

Thanks for your quick response.

Here is the code of the form:

<!-- Request a Quote -->	
	<div id="c-data">
		<h2>Send a Quote</h2>				
		<div id="c-note"></div>
		<form id="ajax-quote-form" action="javascript:alert('success!');">
			<ul>

                    <li>
				<label>Name</label>
				<input class="textbox" type="text" name="name" value=""/>
				</li>

				<li>
				<label>Practice</label>
				<input class="textbox" type="text" name="practice" value=""/>
				</li>

				<li>
				<label>E-Mail</label>
				<input class="textbox" type="text" name="email" value=""/>
				</li>

				<li>
				<label>Telephone</label>
				<input class="textbox" type="text" name="tel" value=""/>
				</li>
                    
				<li>
				<label>Details</label>
				<textarea name="details">
				</textarea>
				</li>
                    
				<button type="submit">Send Quote!</button>
			</ul>
		</form>		
	</div>
	<!-- Request a Quote -->

 

Thanks in advance

[ben18285]

You were right, I just needed to define the $("#ajax-quote-form").hide() 

 

Thanks a mill!!!!