仿淘宝图片空间点击文字出现可编辑文本框提交ajax数据到后台修改

思路来源:昨天看淘宝的图片空间,发现了一个效果.

点击宝贝的名字,出现一个可编辑的文本框,然后ajax提交(如果数据变的话),改变数据

看图说明:

编辑完了提交进行修改数据

自己做的代码效果如下:

具体设置到的代码如下:

<input class="t" id="t_<?php echo $option['order_id'];?>" readonly
value="<?php echo $option['delivery_number'];?>"
οnclick="rename('<?php echo $option['order_id'];?>',$(this).val());" />
<input type="button" value="Edit" style="display:none;"
id="submit_<?php echo $option['order_id'];?>"
οnclick="xiugai('<?php echo $option['order_id'];?>','<?php echo $option['delivery_number'];?>')" />

放置两个input,对其id进行设置不同的值,用了两个方法 rename 和 xiugai

引用的css文件为:

<style type="text/css">
.thumb-name {
height: 20px;
line-height: 20px;
margin-top: 2px;
overflow: hidden;
text-align: center;
}
input.t {
border:1px solid #fff;
background:#fff;
}
input.s {
border:1px solid #369;
background:#fff;
}
</style>

两个函数为:

<script type="text/javascript">
function rename(id,value){
// console.log(id + ' ' + value);
var test = document.getElementById("t_" + id);
var mysubmit = document.getElementById("submit_" + id);
test.readOnly = false;
// test.select();
test.className = "s";
mysubmit.style.display = "";
}
function xiugai(id,old_value){
//console.log(id + ' ' + old_value);
//如果原始值和现在的值一样的话就不提交ajax.否则进行修改
// console.log(old_value);
var new_value = $('#t_'+id).val();
// console.log(new_value);
if(old_value == new_value){
//console.log('不做任何修改');
}else{
//console.log('ajax 提交');
$.ajax({
type: "POST",
url: "dj_order_delivery.php",
data: "id=" + id + "&value=" + new_value,
dataType: "html",
beforeSend: function(XMLHttpRequest){
//$('#' + ipz_id + '_img').toggle();
},
success: function(data, textStatus){
//赋值
//$('#main').html(data);
//$('#' + ipz_id + '_img').toggle();
//赋值给input元素
$('#t_'+id).text(data);
},
complete: function(XMLHttpRequest, textStatus){
},
error: function(){
},
cache : false
});
}
var test = document.getElementById("t_" + id);
var mysubmit = document.getElementById("submit_" + id);
//mysubmit.onclick = function(){
test.readOnly = true;
test.className = "t";
mysubmit.style.display = "none";
//}
}
</script>

《仿淘宝图片空间点击文字出现可编辑文本框提交ajax数据到后台修改》由 php代码分享整理编辑，转载请保留本文地址： http://www.phpsharer.com/263.html

仿淘宝图片空间点击文字出现可编辑文本框提交ajax数据到后台修改相关推荐

android高仿微信聊天消息列表自由复制文字，双击查看文本内容
SelectTextHelper-高仿微信聊天消息列表自由复制文字,双击查看文本内容掘金地址 github地址 SelectTextHelper打造一个全网最逼近微信聊天消息自由复制,双击查看文本内 ...
zTree点击文字勾选复选框
1.问题背景系统利用zTree插件生成下拉复选树,点击文字勾选复选框 2.实现源码 <!DOCTYPE html><html><head> <title&g ...
仿淘宝商品详情-点击显示大图,可滑动
现在在做一个商城类的项目: 大家都用过淘宝,需求就是要求仿淘宝的效果做一个, 直接上图用到了一个项目PhotoView 大家运行一下看最后一个项目,把单一的图片显示改成VIewpager就好.
html js文本框文字列出,js实现文本框中输入文字页面中div层同步获取文本框内容的方法...
这篇文章主要介绍了js实现文本框中输入文字页面中div层同步获取文本框内容的方法,实例分析了javascript操作dom元素的技巧,需要的朋友可以参考下本文实例讲述了js实现文本框中输入文字页面中 ...
文字太多时给文本框添加滑动条——text + ContentSizeFitter + Scroll View
文字少的时候,直接显示文字:文字多的时候,自动添加滑动条,拖动滑动条后查看全部文字. 1.字少的时候 2.字多的时候自动增加一个垂直滑动条一.问题的来源在一个固定区域显示文字,这些文字有时候会很多 ...
淘宝图片空间的图片可以删除吗？
上传后的宝贝可以删除宝贝图片吗?图片删除后会怎么样? - 日志 - yabg - 大淘营宝贝复制专家_千牛怎么上传宝贝教程_大淘营淘宝宝贝复制软件-网店卖家最喜爱的淘宝服务商! 上传后的宝 ...
[原创] JQ仿淘宝图片局部放大镜效果
有的时候我们需要在页面中展示一些高清大图,但是如果直接放在页面中又会显得很占地方,影响用户体验或者在一些商城网站中,我们需要展示商品的高清大图,所以就需要一个类似放大镜的效果具体效果请点击这里:图 ...
仿淘宝图片放大预览效果
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
php点击文字弹出js提示框,js弹出框、对话框、提示框、弹窗实现方法总结(推荐)...
一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 funct ...

仿淘宝图片空间点击文字出现可编辑文本框提交ajax数据到后台修改

仿淘宝图片空间点击文字出现可编辑文本框提交ajax数据到后台修改相关推荐

最新文章

热门文章

仿淘宝图片空间 点击文字 出现可编辑文本框 提交ajax数据到后台修改

仿淘宝图片空间 点击文字 出现可编辑文本框 提交ajax数据到后台修改相关推荐

最新文章

热门文章

仿淘宝图片空间点击文字出现可编辑文本框提交ajax数据到后台修改

仿淘宝图片空间点击文字出现可编辑文本框提交ajax数据到后台修改相关推荐