使用javascript确定一个数组提交按钮,然后使用Ajax输出数据
Determine an array submit button using javascript then outputs data using Ajax
我有一个获取数据的列表,每个数据下面都有一个表单,就像评论框表单一样,其他用户可以在其中给特定的数据留言。
到目前为止,我所尝试的是将提交按钮放入数组中以区分它与另一个(不知道我这样做是否正确,因为这是我第一次尝试使用Javascript/jQuery库和AJAX)。
我可以提交数据,并将其插入到SQL数据库只是通过使用PHP/MySQL,但我想实现至少评论类系统的这个社区,Stackoverflow,其中一旦评论被张贴,它会显示在点击按钮后(不是通过重新加载整个页面,以便提交数据到数据库)。
这是动态发布的数据:
<?php while($loopquery){ ?>
<div>
<?php echo $row['data']; ?>
<div id="flash[]"></div> <!-- NEW POSTED COMMENT SHOULD BE SHOWN HERE -->
<form action="#" method="POST">
<input type="text" name="comment[]" id="comment[]">
<input type="submit" id="submit[]">
</form>
</div>
<?php } /* END OF LOOP */ ?>
点击提交后:
$(function () {
var submit = document.getElementById('submit');
for (var a = 0; a < submit.length; a++) {
submit[a].click(function () {
var comment = document.getElementById('comment');
var hiddentaskid = document.getElementById('hiddentaskid');
var dataString = '&comment='+comment[a]+'&hiddentaskid='+hiddentaskid[a];
if (comment[a] == '' || hiddentaskid[a] == '') {
alert('Please Give Valid Details');
} else {
var flash = document.getElementById('flash');
flash[a].show();
flash[a].fadeIn(400).html('Loading message');
$.ajax({
type: "POST",
url: "commentajax.php",
data: dataString,
cache: false,
success: function (html) {
$("ol#update").append(html);
$("ol#update li:last").fadeIn("slow");
flash[a].hide();
}
});
}
return false;
});
}
});
我已经尝试使用数组来区分数据从一个到另一个,但它不工作,当我试图调整脚本。新发布的消息/评论应该弹出在<div ="flash"></div>
区域(通过使用AJAX)。谁能告诉我怎样才能达到我想要的产出?
看看这个小提琴。http://jsfiddle.net/7xjqzmqz/
更新的小提琴注意我使用的是Jquery
它不是专门用你的代码,但希望它能让你明白。
将url字段替换为您计划POST到的位置。
//message is just an object to keep the comment
var message = {name: 'Gabs00'};
$('form').on('submit', function(e){
//stop page reload
e.preventDefault();
//Using $(this), target this specific form
message.comment = $(this).find('.message').val();
var json = JSON.stringify(message);
//Finding the parent div, to make sure I append only to this forms comment list
var $parent = $(this).closest('.item-to-comment');
$.ajax({
type: 'POST',
url: '/echo/json/',
data:{json: json},
success: function(resp){
//Traversing back down the dom
var $ul = $parent.find('.comments');
$ul.find('li').removeClass('special');
$ul.append('<li class="special">' + resp.name + ': ' +
resp.comment + '</li>');
}
})
});
相关文章:
- 点击相同的按钮打开模型,然后提交表单
- 我想重定向点击,然后更改按钮文本,我该怎么做
- 如何从单选按钮中获取多个值,然后将它们分配到单个变量中并在页面上显示
- 单击禁用表单按钮,然后提交表单
- 将单击事件附加到按钮或链接上的类,该按钮或链接会触发 AJAX 帖子,然后延迟并继续原始操作
- Javascript按钮,它提交联系人表单7表单,然后重定向到URL
- 加载时可以单击按钮#1,然后需要单击按钮#2两次.按钮#1也需要点击两次
- 如何从按钮后面的代码中调用javascript函数,点击并存储其输出,然后继续操作
- 选择其中一个单选按钮,然后单击“提交”,重定向其他页面
- 单击一个按钮10次,然后重新加载页面
- 询问用户是否确定,然后禁用按钮并提交表单
- 单击按钮然后弹出一个对话框然后提交按钮
- 等到所有脚本都完成,然后再启用按钮
- Javascript:需要帮助验证表单的两个方面,然后启用“提交”按钮
- Chrome扩展程序获取DOM文本并在弹出窗口中显示.html然后单击按钮
- 按 按钮开始代码,然后按它停止
- 创建一个超链接(或按钮),用于执行 python 脚本,然后在脚本完成时重定向
- 如果按“链接”然后按钮是白色而不是灰色,如何进行主动导航,这是我尝试 jsfiddle.net/egjg14fr/ 的代
- 如果..然后按钮按下功能
- Asp:RadioButtonList SelectedIndex不改变时,设置javascript,然后按钮被禁用