jquery post problem

hello
i am quite new to jquery and would be grateful if someone could help me out with my problem. in my code attached, the line var data is posting all the data as 1 line so in feedback.php i cannot collect the $_POST values to insert into db. also, the feedback value is not being passed to the php page at all. where am i going wrong with this? many thanks
function feedbacknew() 
{    
	$("#form").dialog(
	{
	    autoOpen: false,
	    resizable: false,
	    modal: true,
		show: 'slide',
	    title: 'Submit a feedback request',
	    width: 460,
	    height: 490,
		beforeclose: function(event, ui) { $("#message").html(""); }
		
	});
	
	$('#submit').click(function () 
	{
	    
	    var name = $('.uname').val();
		var email = $('.email').val();
		var position = $('.position').val();
		var feedback = $('.feedback').val();
	    var data = 'uname=' + name+email+position+feedback;
	    $.ajax(
	    {
		type: "POST",
		url: "feedback.php",
		data: data,
		success: function (data) {
			$("#feedback").get(0).reset();
			$('#message').html(data);
			//$("#form").dialog('close');
			$("#flex1").flexReload();
			
			
			
				
		    
		} 
	    });
	    return false;
		
	});
        
	$("#form").dialog('open');
	
}

html form for feedback

<label for="Feedback">Feedback:</label>
<textarea name="feedback" cols="25" rows="3" type="text" class="text ui-widget-content ui-corner-all inputbox feedback" />Please make sure that any error messages or numbers are listed here.</textarea><br />

Open in new window

peter_coopAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
Try line 23 :
var data = 'uname=' + encodeURIComponent(name) + "&email=" + encodeURIComponent(email) + "&position=" + encodeURIComponent(position) + "&feedback=" + encodeURIComponent(feedback);

Open in new window

peter_coopAuthor Commented:
hi leak. that has sorted the post for everything but feedback. according to firebug, it is not even being posted.

email      sample@hotmail.com
feedback      
position      director
uname      Admin

thanks
leakim971PluritechnicianCommented:
Use :
<textarea name="feedback" cols="25" rows="3" type="text" class="text ui-widget-content ui-corner-all inputbox feedback"></textarea>

Open in new window

instead :
<textarea name="feedback" cols="25" rows="3" type="text" class="text ui-widget-content ui-corner-all inputbox feedback" />

Open in new window


And :
$("textarea[name='feedback']").val();

Open in new window

or use an id
instead :
var feedback = $('.feedback').val();

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

JRandelCommented:
jQuery provides a very wide ranging API allowing you to use simple or complex calls depending on your requirement.

The above is correct, but to further simplify it you could use (code attached)

This would replace your click function. It has the added benefit of passing all of your form fields (except the submit button), and encodes the values by default. Looking at what you using it for your script only requires that functionality.
$.post('feedback.php', $('#form').serialize(), function(data){
    $('#feedback').get(0).reset();
    $('#message').html(data);
    //$("#form").dialog('close');
    $('#flex1').flexReload();
});
return false;

Open in new window

leakim971PluritechnicianCommented:
Yes, you may use serialize()

but the main issue is you close the textarea : / >

<textarea name="feedback" cols="25" rows="3" type="text" class="text ui-widget-content ui-corner-all inputbox feedback" />Please make sure that any error messages or numbers are listed here.</textarea>

Open in new window


instead

<textarea name="feedback" cols="25" rows="3" type="text" class="text ui-widget-content ui-corner-all inputbox feedback" >Please make sure that any error messages or numbers are listed here.</textarea>

so you get it empty
peter_coopAuthor Commented:
leak. i already am using id in my post. also, if i take out </textarea> then the page is blank. thanks
leakim971PluritechnicianCommented:
Don't take it out the closing tag but remove the backslash in the tag, check at the end :

textarea name="feedback" cols="25" rows="3" type="text" class="text ui-widget-content ui-corner-all inputbox feedback" />
peter_coopAuthor Commented:
jrandel. thank you for suggestion.
JRandelCommented:
leakim971 is suggesting to change the way you have your textarea coded.

The problem is your closing the opening text area tag like:

<textarea /> ... </textarea>

Remove the first / for example"

<textarea> ... </textarea>

Leave all you other attributes in (like class, name etc), just remove that closing tag :)
peter_coopAuthor Commented:
ok. this is how i now have it and it is still not submitting data. thanks

<textarea name="feedback" cols="25" rows="3" type="text" class="text ui-widget-content ui-corner-all inputbox feedback">Please make sure that any error messages or numbers are listed here </textarea>
JRandelCommented:
I've just tested it with the following code and it works fine:
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('#form').click(function(){
		$.post('feedback.php', $('#form').serialize(), function(data){
		    $('#feedback').get(0).reset();
		    $('#message').html(data);
		    //$("#form").dialog('close');
		    $('#flex1').flexReload();
		});
		return false;
	});
});
</script>
</head>


<body>
<form id="form">
<textarea name="feedback" cols="25" rows="3" type="text" class="text ui-widget-content ui-corner-all inputbox feedback">Please make sure that any error messages or numbers are listed here </textarea>
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>

Open in new window

peter_coopAuthor Commented:
then there is something else in the code going on. i have posted the jquery code i am using and also the whole form. where am i going wrong that is dosen't even get posted? thanks
function feedbacknew() 
{    
	$("#form").dialog(
	{
	    autoOpen: false,
	    resizable: false,
	    modal: true,
		show: 'slide',
	    title: 'Submit a feedback request',
	    width: 460,
	    height: 490,
		beforeclose: function(event, ui) { $("#message").html(""); }
		
	});
	
	$('#submit').click(function () 
	{
	    
	    var name = $('.uname').val();
		var email = $('.email').val();
		var position = $('.position').val();
		var feedback = $('.feedback').val();
	    var data = 'uname=' + encodeURIComponent(name) + "&email=" + encodeURIComponent(email) + "&position=" + encodeURIComponent(position) + "&feedback=" + encodeURIComponent(feedback);
	    $.ajax(
	    {
		type: "POST",
		url: "feedback.php",
		data: data,
		success: function (data) {
			$("#feedback").get(0).reset();
			$('#message').html(data);
			//$("#form").dialog('close');
			$("#flex1").flexReload();
			} 
	    });
	    return false;
		
	});
        
	$("#form").dialog('open');
	
}

html form
====================================================

// Feedback form
<div id="form" style="display:none;">
  <form method="post" id="feedback" class="webform" name="feedback">
    
		
		<label for="company">Company</label>
		<select name="company">
		  <option SELECTED VALUE="">Select an option</option>
		  <option value="Technical">Technical</option>
		  <option value="Database">Database</option>
		  <option value="Error">Error</option>
		  <option value="Other">Other</option>
		</select>
		<label for="name">Full Name:</label>
		<input id="uname" name="uname"  type="text" class="text ui-widget-content ui-corner-all inputbox uname" value="<?php echo $_SESSION['kt_name_usr']; ?>" />
		<label for="email">Email address:</label>
		<input id="email" name="email" type="text" class="text ui-widget-content ui-corner-all inputbox email" value="<?php echo $_SESSION['kt_email_usr']; ?>"/>
		<label for="position">Position:</label>
		<input id="Position" name="position" type="text" class="text ui-widget-content ui-corner-all inputbox position" />
		<label for="feedback2">Feedback:</label>
		<textarea id="feedback" name="feedback" cols="25" rows="3" type="text" class="text ui-widget-content ui-corner-all inputbox feedback">Please make sure that any error messages or numbers are listed here </textarea><br />
	
   	 	<button id="submit" class="submit">Submit</button>
		<div id="message"></div>
  </form>
</div>

Open in new window

leakim971PluritechnicianCommented:
change the name of your button too.

never use submit as name or id
<input type="submit" id="mySubmit" value="submit" />

Open in new window

leakim971PluritechnicianCommented:
Work fine for me too :

<!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>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<script src="jquery-1.5.1.min.js"></script>
<script src="jquery-ui-1.8.11.custom.min.js"></script>
<script>

	$(document).ready(function() {
		$("#form").dialog({
			autoOpen: false,
			resizable: false,
			modal: true,
			show: 'slide',
			title: 'Submit a feedback request',
			width: 460,
			height: 490,
			beforeclose: function(event, ui) { $("#message").html(""); }
		});

		$('#submit').click(function(e){
			e.preventDefault();
			var name = $('.uname').val();
			var email = $('.email').val();
			var position = $('.position').val();
			var feedback = $('.feedback').val();
			var data = 'uname=' + encodeURIComponent(name) + "&email=" + encodeURIComponent(email) + "&position=" + encodeURIComponent(position) + "&feedback=" + encodeURIComponent(feedback);
			$.ajax({
				type: "POST",
				url: "feedback.php",
				data: data,
				success: function (data) {
					$("#feedback").get(0).reset();
					$('#message').html(data);
					//$("#form").dialog('close');
					//$("#flex1").flexReload();
				} 
			});
		});

		$("#form").dialog('open');
	});

</script>
</head>
<body>
<div id="form" style="display:none;">
  <form method="post" id="feedback" class="webform" name="feedback">
		
		<label for="company">Company</label>
		<select name="company">
		  <option SELECTED VALUE="">Select an option</option>
		  <option value="Technical">Technical</option>
		  <option value="Database">Database</option>
		  <option value="Error">Error</option>
		  <option value="Other">Other</option>
		</select>
		<label for="name">Full Name:</label>
		<input id="uname" name="uname"  type="text" class="text ui-widget-content ui-corner-all inputbox uname" value="<?php echo $_SESSION['kt_name_usr']; ?>" />
		<label for="email">Email address:</label>
		<input id="email" name="email" type="text" class="text ui-widget-content ui-corner-all inputbox email" value="<?php echo $_SESSION['kt_email_usr']; ?>"/>
		<label for="position">Position:</label>
		<input id="Position" name="position" type="text" class="text ui-widget-content ui-corner-all inputbox position" />
		<label for="feedback2">Feedback:</label>
		<textarea id="feedback" name="feedback" cols="25" rows="3" type="text" class="text ui-widget-content ui-corner-all inputbox feedback">Please make sure that any error messages or numbers are listed here </textarea><br />
	
   	 	<button id="submit" class="submit">Submit</button>
		<div id="message"></div>
  </form>
</div>
</body>
</html>

Open in new window

leakim971-440009.flv
peter_coopAuthor Commented:
could it be that the form has an id of feedback? as well as textarea? thanks
leakim971PluritechnicianCommented:
id must be unique in a document. So yes change it!
peter_coopAuthor Commented:
excellent. if its ok i shall split the points between leak971 & jrandel. does anyone object? thanks
leakim971PluritechnicianCommented:
np
peter_coopAuthor Commented:
thanks guys.
peter_coopAuthor Commented:
thanks once again
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.