Jump to content

Submit form values to MySQl database via AJAX and PHP


helloworld001

Recommended Posts

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 by helloworld001
Link to comment
Share on other sites

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 by Psycho
Link to comment
Share on other sites

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 by helloworld001
Link to comment
Share on other sites

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 by helloworld001
Link to comment
Share on other sites

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: {}"?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.