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

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

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

看图说明:





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





自己做的代码效果如下:









具体设置到的代码如下:

<input class="t" id="t_<?php echo $option['order_id'];?>" readonly

value="<?php echo $option['delivery_number'];?>"

onclick="rename('<?php echo $option['order_id'];?>',$(this).val());" />
<input type="button" value="Edit" style="display:none;"

id="submit_<?php echo $option['order_id'];?>"

onclick="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