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

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

0

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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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

0
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
0
peter_coopAuthor Commented:
leak. i already am using id in my post. also, if i take out </textarea> then the page is blank. thanks
0
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" />
0
peter_coopAuthor Commented:
jrandel. thank you for suggestion.
0
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 :)
0
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>
0
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

0
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

0
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

0
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
0
peter_coopAuthor Commented:
could it be that the form has an id of feedback? as well as textarea? thanks
0
leakim971PluritechnicianCommented:
id must be unique in a document. So yes change it!
0
peter_coopAuthor Commented:
excellent. if its ok i shall split the points between leak971 & jrandel. does anyone object? thanks
0
leakim971PluritechnicianCommented:
np
0
peter_coopAuthor Commented:
thanks guys.
0
peter_coopAuthor Commented:
thanks once again
0
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.