How to Post Multiple Data with Ajax(Jquery)?

Question

samsons17 -4 Posting Whiz in Training

15 Years Ago

Hi all..
I got this code that dealing with ajax..Basically the ajax code is to get the data from the html element and insert it to the database.

this is ajax and the html code :

<script type="text/javascript">
$(document).ready(function(){
 $("form#post_reply").submit(function() {
 
 var discuss_text = $('#discuss_text').attr('value');
 var test5 = $('#test5').attr('value');
	
 $.ajax({
	type: "POST",
	url: "reply.php",
	data: "discuss_text="+ discuss_text,
	success: function(){
	          $("ul.reply_text").prepend("<li style='display:none' class='stbody'>   <div class='stimg'></div>
<div class='sttext'>"+discuss_text+
"<div class='below'>
<div class='sttime'>2 seconds ago</div>
<div class='like'>| like |</div>
<div class='dislike'>dislike |</div>
</div></div></li>");
   $("ul.reply_text li:first").fadeIn();
	       }
		});	
	return false;
	});	
});
</script>
<form name='disscuss_text' id='post_reply' id='post_reply'>
   <input type="hidden" name="test5" id="test5" value="<?php echo $row['id']; ?>">
   <textarea rows='3' cols='87' id='discuss_text' name='discuss_text'></textarea>
   <input type='submit' value='Post' name='Help' id='post-button' />
</form>

and this is the reply.php file :

<?php
// Change this parameter with your connection's info.
$db_host="localhost";
$db_name="*******";
$username="******";
$password="******";
$db_con=mysql_connect($db_host,$username,$password);
$connection_string=mysql_select_db($db_name);
// Connection
mysql_connect($db_host,$username,$password);
mysql_select_db($db_name);
?>
<?php
if(isset($_POST['discuss_text'])){
	/* Connection to Database */

	/* Remove HTML tag to prevent query injection */
	$message = strip_tags($_POST['discuss_text']);
	
	$sql = 'INSERT INTO reply (message) VALUES("'.$message.'")';

	mysql_query($sql);
	
	echo $message;
	} else { }
?>

So, if you notice,there is this code above :

<input type="hidden" name="test5" id="test5" value="<?php echo $row['id']; ?>">

$row value is what i am trying to insert into the 'reply' database into the post_id table..
So how to add one or more data to this line of code "data: "discuss_text="+ discuss_text," ??
so that i could be able to insert more than just one data at a time into the database by using ajax..

ask me if unclear bout this question,
Thanks for helping :)

ajax javascript:jquery

2 Contributors
1 Reply
7K Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by six_sic6

Dani AI

Generated 1 Year Ago

You do not need to hand-build a query string to send both discuss_text and your hidden test5 (the row id). Let jQuery serialize the whole form so everything is correctly URL-encoded and posted together.

$(function () {
  $('#post_reply').on('submit', function (e) {
    e.preventDefault();
    $.ajax({
      type: 'POST',
      url: 'reply.php',
      data: $(this).serialize(),   // sends discuss_text, test5, etc.
      success: function (resp) {
        // update UI with resp
      }
    });
  });
});

Alternatively, pass an object (jQuery will encode it): data: { discuss_text: $('#discuss_text').val(), test5: $('#test5').val() }. Note: use .val() instead of .attr('value'). Also, your <form> has id twice; keep only one id="post_reply".

On the server, read both values and use prepared statements (the old mysql_* API is removed in modern PHP). With PDO:

$pdo = new PDO('mysql:host=localhost;dbname=DB;charset=utf8mb4','user','pass',
               [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]);

if (isset($_POST['discuss_text'], $_POST['test5'])) {
    $stmt = $pdo->prepare('INSERT INTO reply (message, post_id) VALUES (?, ?)');
    $stmt->execute([$_POST['discuss_text'], (int)$_POST['test5']]);
    echo 'OK';
}

This avoids SQL injection and ensures both fields are inserted. See jQuery’s docs on serialize and the PHP manual on PDO prepared statements for details.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

six_sic6 0 Light Poster · Answer 1 · 2011-02-08T23:10:39+00:00

Hi all..
I got this code that dealing with ajax..Basically the ajax code is to get the data from the html element and insert it to the database.

this is ajax and the html code :

<script type="text/javascript">
$(document).ready(function(){
 $("form#post_reply").submit(function() {
 
 var discuss_text = $('#discuss_text').attr('value');
 var test5 = $('#test5').attr('value');
	
 $.ajax({
	type: "POST",
	url: "reply.php",
	data: "discuss_text="+ discuss_text,
	success: function(){
	          $("ul.reply_text").prepend("<li style='display:none' class='stbody'>   <div class='stimg'></div>
<div class='sttext'>"+discuss_text+
"<div class='below'>
<div class='sttime'>2 seconds ago</div>
<div class='like'>| like |</div>
<div class='dislike'>dislike |</div>
</div></div></li>");
   $("ul.reply_text li:first").fadeIn();
	       }
		});	
	return false;
	});	
});
</script>
<form name='disscuss_text' id='post_reply' id='post_reply'>
   <input type="hidden" name="test5" id="test5" value="<?php echo $row['id']; ?>">
   <textarea rows='3' cols='87' id='discuss_text' name='discuss_text'></textarea>
   <input type='submit' value='Post' name='Help' id='post-button' />
</form>

and this is the reply.php file :

<?php
// Change this parameter with your connection's info.
$db_host="localhost";
$db_name="*******";
$username="******";
$password="******";
$db_con=mysql_connect($db_host,$username,$password);
$connection_string=mysql_select_db($db_name);
// Connection
mysql_connect($db_host,$username,$password);
mysql_select_db($db_name);
?>
<?php
if(isset($_POST['discuss_text'])){
	/* Connection to Database */

	/* Remove HTML tag to prevent query injection */
	$message = strip_tags($_POST['discuss_text']);
	
	$sql = 'INSERT INTO reply (message) VALUES("'.$message.'")';

	mysql_query($sql);
	
	echo $message;
	} else { }
?>

So, if you notice,there is this code above :

<input type="hidden" name="test5" id="test5" value="<?php echo $row['id']; ?>">

$row value is what i am trying to insert into the 'reply' database into the post_id table..
So how to add one or more data to this line of code "data: "discuss_text="+ discuss_text," ??
so that i could be able to insert more than just one data at a time into the database by using ajax..

ask me if unclear bout this question,
Thanks for helping :)

Yes, you can pass multiple variables through jqueyr ajax

<script type="text/javascript">
function resultPublish()
{
	 var myindex  = ....
	 var selValue = ....
	 
	  $.ajax({
		url: "yourPage.php",	
		type: "GET",		
		data: "data1="+myindex+"&data2="+selValue,	
		cache: false,
		success: function (html) {	
		
			...do something	
		}		
	});
}
</script>

In "yourPage.php" you can access "data1" and "data2" like following

echo $_GET['data1'];
echo $_GET['data2'];

Hope it will help you