We Keep Coding

ajax can't send the request to another php page

my php page use ajax to send a request to the other page, but somehow the request seems cannot be sent, I have test update_ok.php and should be ok with those code, I think the problem is from sending the request by the ajax. the code as following, please help me out bro.
update.php
<?php
<table>
<tr class="item">
<form action="" method="POST" name="form" id="form">
<input name="id" type="hidden" class="normalinput" id="id" value="<?php echo $row_result2["id"];?>">
<input name="gp_name" type="hidden" class="normalinput" id="gp_name" value="<?php echo $row_result2["gp_name"];?>">
<input name="city" type="text" class="normalinput" id="city" size="6" value="<?php echo $row_result2["city"];?>"></td>
<td align="center"><input name="arrange" type="text" class="normalinput" id="arrange" size="10" value="<?php echo $row_result2["arrange"];?>"></td>
<td align="center"><input name="qua" type="text" class="normalinput" id="qua" size="1" value="<?php echo $row_result2["qua"];?>"></td>
<td align="center">
<input name="id" type="hidden" class="normalinput" id="id" value="<?php echo $row_result2["id"];?>">
<input name="action" type="hidden" id="action" value="update">
<input type="button" name="button" value="Update" onClick="update(form);"></td>
<td align="center">
<input name="id" type="hidden" class="normalinput" id="id" value="<?php echo $row_result2["id"];?>">
<input type="button" name="Submit" value="Delete" onClick="window.location.href='delete.php?id=<?php echo $row_result2['id'];?>'" />
</td>
</form>
</tr><?php }?>
</table>
index.js
function update(form){
var xml;
if(window.ActiveXObject){
xml=new ActiveXObject('Microsoft.XMLHTTP');
}else if(window.XMLHttpRequest){
xml=new XMLHttpRequest();
}
var id=form.id.value;
var city=form.city.value;
var gp_name=form.gp_name.value;
var arrange=form.arrange.value;
var qua=form.qua.value;
xml.open("GET","update_ok.php?id="+id+"&city="+city+"&gp_name="+gp_game+"&arrange="+arrange+"&qua="+qua,true);
xml.onreadystatechange=function(){
if(xml.readyState==4&&xml.status==200){
var msg=xml.responseText;
if(msg==1){
alert("Update succeed!!");
location.href='index.php';
}else{
alert("Update False");
return false;
}
}
}
xml.send(null);
}
update_ok.php
<?php
header("Content-Type: text/html; charset=utf-8");
include_once("conn/connMysql.php");
$id=$_GET['id'];
$gp_name=$_GET['gp_game'];
$arrange=$_GET['arrange'];
$city=$_GET['city'];
$qua=$_GET['qua'];
$sql=mysql_query("update gp_info set gp_name = '$gp_name', city = '$city', qua = '$qua', arrange = '$arrange' where id=".$id);
if($sql){
$reback=1;
}else{
$reback=0;
}
echo $reback;
?>

Can I target a specific form for commenting with jquery

I have created a news system on my web page where I use while loop to echo my news on a page. With news I created a form for news where I target it by name and I want to use jquery to process the results. When I use php it works fine but I want to avoid reloading page with submitting form and immediate post comment to page.
my form looks like this:
<form action="" method="post" enctype="multipart/form-data" class="comments" id="comments">
<textarea id="comment_area" class="comment-area" name="comment" placeholder="Dodajte svoj komentar tukaj..."></textarea>
<input type="hidden" id="news_id" name="news_id" value="' . $row['news_id'] . '">
<input type="hidden" id="type" name="type" value="0">
<input type="submit" id="comment_btn" class="comment-btn" name="comments<php echo $row['news_id'] ?>" value="Objavi">
</form>'
my php code looks like this:
if (isset($_POST['comments' . $row['news_id'] . '']) === true && empty($_POST['comment']) === false) {
global $user_data;
$user_id = $user_data['user_id'];
$connect_id = $_POST['news_id'];
$type = $_POST['type'];
$time = date('Y-m-d H:i:s');
$comment = $_POST['comment'];
$comment = sanitize($comment);
mysql_query("INSERT INTO `comments` (`user_id`, `connect_id`, `type`, `time`, `comment`) VALUES ('$user_id', '$connect_id', '$type', '$time', '$comment')");
}
If I try to do somethink like this:
$(".comment-btn").click(function(e) {
e.preventDefault();
var text = $('.comment-area').val();
console.log(text);
$('.comment-area').val('');
});
It targets only the form where is the first news and doesn't target all the forms.
Is there any way to do this differently???
Thanks for helping.

You could try something like the following:
$(".comment-btn").each(function(){
$(this).click(function(e) {
e.preventDefault();
var commentArea = $(this).siblings(".comment-area");
var text = commentArea.val();
console.log(text);
commentArea.val('');
});
});
The problem is that while this $(".comment-btn") returns an array of all the button in the forms you mentioned, this $(".comment-btn").click(... attaches a click event handler only for the first item of the array.
$(function(){
$(".comment-btn").each(function(){
$(this).click(function(e){
e.preventDefault();
var commentArea = $(this).siblings(".comment-area");
var text = commentArea.val();
console.log(text);
commentArea.val('');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data" class="comments" id="comments">
<textarea id="comment_area" class="comment-area" name="comment" placeholder="Dodajte svoj komentar tukaj..."></textarea>
<input type="hidden" id="news_id" name="news_id" value="' . $row['news_id'] . '">
<input type="hidden" id="type" name="type" value="0">
<input type="submit" id="comment_btn" class="comment-btn" name="comments<php echo $row['news_id'] ?>" value="Objavi">
</form>'
<form action="" method="post" enctype="multipart/form-data" class="comments" id="comments">
<textarea id="comment_area" class="comment-area" name="comment" placeholder="Dodajte svoj komentar tukaj..."></textarea>
<input type="hidden" id="news_id" name="news_id" value="' . $row['news_id'] . '">
<input type="hidden" id="type" name="type" value="0">
<input type="submit" id="comment_btn" class="comment-btn" name="comments<php echo $row['news_id'] ?>" value="Objavi">
</form>'
<form action="" method="post" enctype="multipart/form-data" class="comments" id="comments">
<textarea id="comment_area" class="comment-area" name="comment" placeholder="Dodajte svoj komentar tukaj..."></textarea>
<input type="hidden" id="news_id" name="news_id" value="' . $row['news_id'] . '">
<input type="hidden" id="type" name="type" value="0">
<input type="submit" id="comment_btn" class="comment-btn" name="comments<php echo $row['news_id'] ?>" value="Objavi">
</form>'

You could use jQuery on function to bind "click" event to all buttons with comment-btn class. However, it'll be important to then identify which comment-area you want to refer to. If that is not done, it'll simply erase the values of all fields / textareas with class comment-area.
$(".comment-btn").on("click", function(e) {
e.preventDefault();
var text = $(this).parent().find('.comment-area').val();
console.log(text);
$(this).parent().find('.comment-area').val('');
});
Working example with the only change being that input type for buttons is changed from "submit" to "button":
https://jsfiddle.net/L87n4Ljo/
Likewise, if you'd like to submit a particular form when the button is clicked, you'll have to do so by specifically identifying that form by using parent() function.

Try this, here we are blocking the default form submit which i think you will need if you don't want to reload the page.
$(".comments").on("submit", function(e) {
e.preventDefault();
var text = $(this).find('.comment-area').val();
console.log(text);
$(this).find('.comment-area').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data" class="comments" id="comments">
<textarea id="comment_area" class="comment-area" name="comment" placeholder="Dodajte svoj komentar tukaj..."></textarea>
<input type="hidden" id="news_id" name="news_id" value="' . $row['news_id'] . '">
<input type="hidden" id="type" name="type" value="0">
<input type="submit" id="comment_btn" class="comment-btn" name="comments<php echo $row['news_id'] ?>" value="Objavi">
</form>'

jQuery on click fade in hidden element in while loop

I have a form in while loop which activates when I click on Reply button. This I can do simply but its in while loop and requires a unique ID. With my code its working till now but it works only for the first result. When I click on the other results nothing happens. Even though I have already assigned a unique ID its not working. My code is given below:
jQuery part:
$(document).ready(function() {
$("#reply").on('click', 'a.click', function() {
var rowid = $(this).attr("data-rowid");
$(".reply-comment-holder[data-rowid='" + rowid + "']").fadeToggle(800),
$(this).toggleClass(".reply-comment-holder[data-rowid='" + rowid + "']");
});
});
PHP HTML part:
<?php while($fetch_cmts = $get_cmtq->fetch()){ extract($fetch_cmts); ?>
<div id="reply">Reply</div>
<div class="reply-comment-holder" data-rowid="<?php echo $cmt_id?>" style="display:none;">
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="full-width cmtform" id="cmt_form_id_<?php echo $cmt_id?>">
<input type="hidden" name="status_id" value="<?php echo $cmt_id; ?>" id="cmtsid_<?php echo $cmt_id?>" />
<textarea name="comment" placeholder="Give a reply..." class="reply-comment-field commentarea" id="replycomment_<?php echo $cmt_id?>"></textarea>
</form>
</div>
<?php } ?>
Please help with jQuery/Ajax.

HTML
<div class="reply">Reply</div>
<div class="reply-comment-holder" data-rowid="1" style="display:none;">
<form method="post" action="#" class="full-width cmtform" id="cmt_form_id_1">
<input type="hidden" name="status_id" value="1" id="cmtsid_1" />
<textarea name="comment" placeholder="Give a reply..." class="reply-comment-field commentarea" id="replycomment_1"></textarea>
</form>
</div>
<div class="reply">Reply</div>
<div class="reply-comment-holder" data-rowid="2" style="display:none;">
<form method="post" action="#" class="full-width cmtform" id="cmt_form_id_2">
<input type="hidden" name="status_id" value="2" id="cmtsid_2" />
<textarea name="comment" placeholder="Give a reply..." class="reply-comment-field commentarea" id="replycomment_2"></textarea>
</form>
</div>
javascript
$(document).ready(function() {
$(".reply").on('click', 'a.click', function() {
var rowid = $(this).attr("data-rowid");
$(".reply-comment-holder[data-rowid='" + rowid + "']").fadeToggle(800),
$(this).toggleClass(".reply-comment-holder[data-rowid='" + rowid + "']");
});
});
jsbin is listed in comments above.

Insert value from javascript to database

I am making a type of slider form for restaurant management system in which user will select items in each form and the selected values will be displayed at last "confirm form" and i want to insert values of selected items obtained at confirm form to be inserted into database.
<script>
function changeColor(obj){
obj.style.color = "red";
var selected_val = obj.innerHTML;
document.getElementById('target_div').innerHTML=document.getElementById('target_div').innerHTML+" "+selected_val;
}
</script>
<form id="formElem" name="formElem" action="" method="post">
<fieldset class="step">
<legend>Roti</legend>
<?php
$qu = mysql_query("select * from submenu WHERE menu_id=33") or die(mysql_error());
while($f = mysql_fetch_array($qu)){
?>
<p>
<label for="name" onclick="changeColor(this)"><?php echo $f['submenu']; ?></label>
<input id="name" name="name" type="hidden" AUTOCOMPLETE=OFF value="<?php echo $f['id']; ?>"/>
</p>
<?php } ?>
</fieldset>
<fieldset class="step">
<legend>Sabji</legend>
<?php
$qu2 = mysql_query("select * from submenu WHERE menu_id=34");
while($f2 = mysql_fetch_array($qu2)){
?>
<p>
<label for="name" onclick="changeColor(this)"><?php echo $f2['submenu']; ?></label>
<input id="name" name="name" type="hidden" AUTOCOMPLETE=OFF value="<?php echo $f2['id']; ?>"/>
</p>
<?php } ?>
</fieldset>
<fieldset class="step">
<legend>Salad</legend>
<?php
$qu3 = mysql_query("select * from submenu WHERE menu_id=35");
while($f3 = mysql_fetch_array($qu3)){
?>
<p>
<label for="name" onclick="changeColor(this)"><?php echo $f3['submenu']; ?></label>
<input id="name" name="name" type="hidden" AUTOCOMPLETE=OFF value="<?php echo $f3['id']; ?>"/>
</p>
<?php } ?>
</fieldset>
<fieldset class="step">
<legend>Sweets</legend>
<?php
$qu4 = mysql_query("select * from submenu WHERE menu_id=36");
while($f4 = mysql_fetch_array($qu4)){
?>
<p>
<label for="name" onclick="changeColor(this)"><?php echo $f4['submenu']; ?></label>
<input id="name" name="name" type="hidden" AUTOCOMPLETE=OFF value="<?php echo $f4['id']; ?>"/>
</p>
<?php } ?>
</fieldset>
<fieldset class="step">
<legend>Confirm</legend>
<p>
<label id="target_div" for="name"></label>
</p>
<p class="submit">
<button id="registerButton" type="submit" name="confirm">Confirm</button>
</p>
</fieldset>
</form>
I want to insert the value obtained at confirm form into database using PHP.

This is the essential part:
while($f = mysql_fetch_array($qu)){
?>
<p>
<label for="name" onclick="changeColor(this)"><?php echo $f['submenu']; ?></label>
<input id="name" name="name" type="hidden" AUTOCOMPLETE=OFF value="<?php echo $f['id']; ?>"/>
</p>
<?php } ?>
You repeat it for other categories (salas, sweets, etc), so let's look at that first.
And a few things are wrong with it.
First, your label says for="name". Name should be a UNIQUE identifier in the document. An identifier is an id="whatever". So if you want to target a specific element with your label, be sure to make the id="" match the for="".
In your case this is most easily done by adding a unique key from the underlying database-table.
But I cannot help because I cannot see your columns in the database. You use:
select * from submenu WHERE menu_id=33
Please stop using the lazy * and NAME the columns you need.
I hope you have a column that is the primary key in tblsubmenu. Let's say it is id. (I think a better name would have been submenuid.)
Then you can use that to do the labeling and id's right, like this:
<?php
$qu = mysql_query("select submenuid, submenu, from submenu WHERE menu_id=33") or die(mysql_error());
while($f = mysql_fetch_array($qu)){
?>
<p>
<label for="name<?php echo $f['id']; ?>" onclick="changeColor(this)"><?php echo $f['submenu']; ?></label>
<input id="name<?php echo $f['id']; ?>" name="submenuid[]" type="hidden" AUTOCOMPLETE=OFF value="<?php echo $f['id']; ?>"/>
</p>
<?php } ?>
That way you have matching for="" and id="", for example: in the label: for="name181" and an id="name181".
Also note I changed your input form-element, now it's name is "submenuid[]"
If you now post the form, you will receive an ARRAY in $_POST["submenuid"].
Print it out with:
echo "<pre>".print_r($_POST,true)."</pre>";
And see if it matches what you wanted to send.
If so, you can now start with inserting, for example:
foreach ($_POST["submenuid"] as $submenuid){
$id = (int)$submenuid; // force it to be an integer
$SQL = "INSERT INTO tblorders (submenuid, customerid) VALUES ($id, 111)";
// execute here against database, see links below
}
w3schools-link for starters
PHP website mysqli.query.php

multi form ajax php social comment system

I have a lot of these forms that I post with PHP. They are under every article in my page, but when I submit the form with these ajax functions it only sends to the first form of the page. Why? I want send these form separately what am I doing wrong?
<script type="text/javascript" >
$(function() {
$(".submit").click(function()
{
var name = $("#name").val();
var comment = $("#comment").val();
var post_id = $("#post").val();
var dataString = 'name='+ name + '&comment=' + comment+ '&post_id=' + post_id;
if(name=='' || comment=='')
{
alert('Please Give Valid Details');
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="images/loading.gif" />Loading Comment...');
$.ajax({
type: "POST",
url: "commenti.php",
data: dataString,
cache: false,
success: function(html){
$("ol#update").append(html);
$("ol#update li:last").fadeIn("slow");
$("#flash").hide();
}
});
}return false;
});
});
<script>
<ol id="update" class="timeline">
</ol>
<div id="flash"></div>
<div >
<form action="#" method="post">
<input type="hidden" id="post" value="<?php echo $post_id; ?>"/>
<input type="hidden" id="name" value="<?php echo $username; ?>"/>
<textarea id="comment"></textarea><br />
<input type="submit" class="submit" value=" Submit Comment " />
</form>
</div>
<ol id="update" class="timeline">
</ol>
<div id="flash"></div>
<div >
<form action="#" method="post">
<input type="hidden" id="post" value="<?php echo $post_id; ?>"/>
<input type="hidden" id="name" value="<?php echo $username; ?>"/>
<textarea id="comment"></textarea><br />
<input type="submit" class="submit" value=" Submit Comment " />
</form>
</div>
<ol id="update" class="timeline">
</ol>
<div id="flash"></div>
<div >
<form action="#" method="post">
<input type="hidden" id="post" value="<?php echo $post_id; ?>"/>
<input type="hidden" id="name" value="<?php echo $username; ?>"/>
<textarea id="comment"></textarea><br />
<input type="submit" class="submit" value=" Submit Comment " />
</form>
</div>

First of all, as has been said in the comments, don't use repetead IDs. If you don't intend to use Ids as a unique identifier, use classes.
<ol class="timeline update">
<div id="flash"></div>
<div >
<form action="#" id="form" method="post">
<input type="hidden" class="post" value="<?php echo $post_id; ?>"/>
<input type="hidden" class="name" value="<?php echo $username; ?>"/>
<textarea class="comment"></textarea><br />
<input type="submit" class="submit" value=" Submit Comment " />
</form>
</div>
</ol>
In your javascript code, you are trying to get the id name with var name = $('#name'), right? What name?
Also, try to send your requeste with an array rather than a string.
Something like this:
$(".submit").click(function()
{
var name = $(this).parents('form:input.name').val();
var comment = $(this).parents('form:input.comment').val();
var post_id = $(this).parents('form:input.post').val();
var data = {'name': name,
'comment': comment,
'post_id':post_id},
$.ajax({
type: "POST",
url: "commenti.php",
data: data,
success: function(html){
//do stuff
}
}
Access your variable in PHP with $_POST['varName'];
Hope it helps.