asked on

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

leakim971

Try line 23 :

var data = 'uname=' + encodeURIComponent(name) + "&email=" + encodeURIComponent(email) + "&position=" + encodeURIComponent(position) + "&feedback=" + encodeURIComponent(feedback);

Open in new window

peter_coop

ASKER

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

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

JRandel

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

leakim971

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_coop

ASKER

leak. i already am using id in my post. also, if i take out </textarea> then the page is blank. thanks

leakim971

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_coop

ASKER

jrandel. thank you for suggestion.

JRandel

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_coop

ASKER

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>

JRandel

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_coop

ASKER

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

leakim971

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

leakim971

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_coop

ASKER

could it be that the form has an id of feedback? as well as textarea? thanks

leakim971

id must be unique in a document. So yes change it!

peter_coop

ASKER

excellent. if its ok i shall split the points between leak971 & jrandel. does anyone object? thanks

leakim971

peter_coop