Submit form values to MySQl database via AJAX and PHP

helloworld001 · February 25, 2015

So here's the situation.

1. I retrive records form mysql database. WORKS.

2. Within each record, I load a "form" via on click .button. WORKS.

3. The form is basically a way for a User to send a message to that record specifically. WORKS

That process works. What doesn't work is that every time I submit a form to the database, it will not insert the "message" field text(appears empty) and the "record_id" will insert but it'll be same for all records inserted, no matter how many different records forms I submit. Other data like "message-to" and "message-by" insert fine.

Here is the full page setup. Also, session_start(); is in the init.php

<?php
require_once 'core/init.php';  

$user           = new User();
$mainUserid     = escape($user->data()->user_id);
?>

<!DOCTYPE HTML>
<html lang="en"> 
	<head>
		<meta charset="UTF-8">
		<title><?php echo $title; ?></title>
		<meta name="description" content="<?php echo $description; ?>">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" href="css/style.css" media="screen">
	</head>
	<body>
	
	$getRecord = $db->prepare("SELECT records.*, users.* FROM records 
	LEFT JOIN users ON records.user_id = users.user_id
	ORDER BY record_id DESC LIMIT 10");
	$getRecord->execute();
	$resultRecord = $getRecord->fetchAll(PDO::FETCH_ASSOC);
	if(count($resultRecord) < 1) {
	
		$error = '0 records found.';
		
	} else {
		
		foreach($resultRecord as $row) {
		
			$record_id		=	escape(intval($row['record_id']));
			$user_id		=	escape(intval($row['user_id']));
			$username		=	escape($row['full_name']);
			$title			=	escape($row['title']);
			$details		=	escape($row['details']);
			
			$_SESSION['record-id']	  = $record_id;
			$_SESSION['message-to']   = $user_id;
			$_SESSION['message-by']   = $mainUserid;
			
			$message                  = Input::get('message'); // HTTP method POST or GET
                        $_SESSION['message']      = $message;
			
			?>
			
			<div class="record">
			   <h1><?php echo $title; ?></h1>
			   <p><?php echo $details; ?></p>
			   <p><?php echo $user_id; ?></p>
			   <button class="button">send message</button> 
				
			  <!-- this form loads through on click(.button) function and is located in "ajax/form.php" -->
			   <form class="new-form">
				   <textarea name="message" class="message">Enter message</textarea>
				   <input type="button" name="submit" class="form-submit" value="Send Message">
			   </form>
			</div>
			
			<?php
		}
	}
	
	<!-- js scripts below -->
	<script src="js/jquery-1.11.0.min.js"></script>
	<script>
		$(document).ready(function(){
				$(".button").click(function(){
					$(this).parent().load("ajax/form.php");
				});
			});
		</script>
		<script>
			$(document).on('click','.form-submit',function() {
				if($(".message").val()==='')
				{
					alert("Please write a message.");
					return false;
				}
			   
				$(".form-submit").hide(); //hide submit button
			   
				var myData = 'message='+ $(".message").val(); //build a post data structure
				
				jQuery.ajax({
				type: "POST", // HTTP method POST or GET
				url: "process.php", //Where to make Ajax calls
				dataType:"text", // Data type, HTML, json etc.
				data:myData, //Form variables
					success:function(response){
						$(".message").val(''); //empty text field on successful
						$(".form-submit").show(); //show submit button

					},
					error:function (xhr, ajaxOptions, thrownError){
						$(".form-submit").show(); //show submit button
						alert(thrownError);
					}
				});
				
			});
		</script>
	</body>
</html>

here is process.php

<?php require_once 'core/init.php';

$session_record_id		=	$_SESSION['record-id'];
$session_message_to 		=	$_SESSION['message-to'];
$session_message_by 		= 	$_SESSION['message-by'];
$session_message 		= 	$_SESSION['message'];

$insertMssg = $db->prepare("INSERT INTO sub_records(record_id, message_to, message_by, message, bid_posted) VALUES(:record_id, :message_to, :message_by, :message)");
$insertMssg->bindParam(':record_id', $session_record_id);
$insertMssg->bindParam(':message_to', $session_message_to);
$insertMssg->bindParam(':message_by', $session_message_by);
$insertMssg->bindParam(':message', $session_message);
$resultInsert = $insertMssg->execute();

if($resultInsert == false) {
	
	$error = 'Your message could not be inserted.';
	
} else {

	$success = 'Your message has been added.';
	
	

}
?>
<div class="success"><?php  echo $success; ?></div>
<div class="error"><?php  echo $error; ?></div>

Edited February 25, 2015 by helloworld001

Psycho · February 25, 2015

In the first script you are overwriting the session values in the loop for each record. Therefore, when the page is done loading those session values only contain the values from the last record.

Also, in the processing.php page I don't see any code that actually uses the $_POST data - only session data.

So, when the processing page runs you are only getting the ID of the last record from your result set (regardless of which form you post) and the message data isn't being used.

You should use hidden fields in each form for the values that apply to each record. Then, on the processing page, use the POST data to insert the records.

Edited February 25, 2015 by Psycho

helloworld001 · February 25, 2015

In the first script you are overwriting the session values in the loop for each record. Therefore, when the page is done loading those session values only contain the values from the last record.

Also, in the processing.php page I don't see any code that actually uses the $_POST data - only session data.

So, when the processing page runs you are only getting the ID of the last record from your result set (regardless of which form you post) and the message data isn't being used.

You should use hidden fields in each form for the values that apply to each record. Then, on the processing page, use the POST data to insert the records.

Could you please provide me with a visual representation(using my code) with what you have just explained. I understand most of what you are saying, but I am unable to translate that into my code. A visual represenation of the code would be a lot more helpful.

And yes I am only using session data on process.php page.

Edited February 25, 2015 by helloworld001

helloworld001 · February 25, 2015

I think I figured out what you were saying.

Here is updated form with hidden record values that I need.

<form class="new-form">
   <textarea name="message" class="message">Enter message</textarea>

   <input type="hidden" name="recordid" class="record-id" value="<?php echo $record_id; ?>">
   <input type="hidden" name="mssgto" class="mssg-to" value="<?php echo $user_id; ?>">
   <input type="hidden" name="mssgby" class="mssg-by" value="<?php echo $mainUserid; ?>">

   <input type="button" name="submit" class="form-submit" value="Send Message">
</form>

Here is the process.php with the $_POST values.

<?php require_once 'core/init.php';

$record_id	= $_POST['recordid'];
$mssg_to	= $_POST['mssgto'];
$mssg_by	= $_POST['mssgby'];
$message	= $_POST['message'];

$insertMssg = $db->prepare("INSERT INTO sub_records(record_id, message_to, message_by, message, bid_posted) VALUES(:record_id, :message_to, :message_by, :message)");
$insertMssg->bindParam(':record_id', $record_id);
$insertMssg->bindParam(':message_to', $mssg_to);
$insertMssg->bindParam(':message_by', $mssg_by);
$insertMssg->bindParam(':message', $message);
$resultInsert = $insertMssg->execute();

if($resultInsert == false) {
	
	$error = 'Your message could not be inserted.';
	
} else {

	$success = 'Your message has been added.';
	
	

}
?>
<div class="success"><?php  echo $success; ?></div>
<div class="error"><?php  echo $error; ?></div>

Now I am a little lost on how to input ALL the form input values into jquery var like below. It already has 1 input value. How do I add the other 3?

var myData = 'message='+ $(".message").val();

Edited February 25, 2015 by helloworld001

Psycho · February 25, 2015

Just so we are clear, you need an individual form for each record.

It looks like you can simplify how the data is passed. Instead of creating parametized values in a url format, you can do something like this

data: { name: "John", location: "Boston" }

http://api.jquery.com/jquery.ajax/

helloworld001 · February 26, 2015

Just so we are clear, you need an individual form for each record.

It looks like you can simplify how the data is passed. Instead of creating parametized values in a url format, you can do something like this
data: { name: "John", location: "Boston" }
http://api.jquery.com/jquery.ajax/

Well my foreach loop creates multiple records and in each of those records is a form. Is that what you mean?

I see your data example but can you be more specific? How would my form input values look in that "data: {}"?

helloworld001 · February 26, 2015

Did some more search and I have come to find out that this might be how you would set the data, using your example.

<script>
	$(document).on('click','.form-submit',function() {
		if($(".message").val()==='')
		{
			alert("Please write a message.");
			return false;
		}
	   
		$(".form-submit").hide(); //hide submit button
	   
		var record-message 	= $(".message").val(); 
		var record-id 		= $(".record-id").val(); 
		var messg-to 		= $(".mssg-to").val(); 
		var messg-by		= $(".mssg-by").val(); 
		
		jQuery.ajax({
		
			type: "POST", // HTTP method POST or GET
			url: "process.php", //Where to make Ajax calls
			dataType:"text", // Data type, HTML, json etc.
			data: { message: record-message, record-id: record-id, message-to: messg-to, message-by: mssg-by } 
			
			success:function(response){
				$(".message").val(''); //empty text field on successful
				$(".form-submit").show(); //show submit button

			},
			error:function (xhr, ajaxOptions, thrownError){
				$(".form-submit").show(); //show submit button
				alert(thrownError);
			}
		});
		
	});
</script>

Is that correct?

Sign In

Submit form values to MySQl database via AJAX and PHP

Recommended Posts

helloworld001

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

helloworld001

Link to comment

Share on other sites

helloworld001

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

helloworld001

Link to comment

Share on other sites

helloworld001

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information