Php automatically saves data in the input box without focus

Source: Internet
Author: User

Recently, when an input box loses focus, the function automatically saves data. Of course, when the jQuery selector selects input and blur, ajax submits data to the PHP file and the PHP file saves the data. It is important to pay attention to Chinese characters, so we need to convert the encoding in the middle.

The following example is a list page, which is similar to excel.

Html code:

The code is as follows: Copy code

<Table width = "100%" align = "left" border = "0 & Prime; cellspacing =" 0 & Prime; bgcolor = "# CCCCCC">
<Tr onmouseover = "this. className = 'on'; "onmouseout =" this. className = ";" align = "center" id = "{$ id}" bgcolor = "# FFFFFF">
<Td >{$ id} </td>
<Td> <input type = "text" id = "title _ {$ id}" value = "{$ title}" onblur = "ajaxEdit ('{$ id }', 'title'); "> </td>
<Td> <textarea id = "description _ {$ id}" rows = "4 & Prime; onblur =" ajaxEdit ('{$ id}', 'Description '); ">{$ description }</textarea> </td>
<Td> <a href = "view. php? Aid = {$ id} "target =" _ blank "> preview </a> <a href =" edit. php? Aid = {$ id} "> edit </a> </td>
</Tr>
</Table>

Js code:

The code is as follows: Copy code

<Script type = "text/javascript">

Function Dd (I) {return document. getElementById (I );}
Function ajaxEdit (aid, field ){
Var value = decodeURI (Dd (field + "_" + aid). value );
$. Ajax ({
Type: "POST ",
Url: "edit. php ",
Data: {dopost: "ajaxSave", aid: aid, field: field, value: value },
Success: function (data ){
If (data = "true") {// update successful
Dd (field + "_" + aid). style. border = "# fff ";
} Else {// update failed
Alert ("update failed, maybe the network speed is too slow ");
}
}
});
}
</Script>

Php code: (dedecms functions and methods are referenced)

The code is as follows: Copy code

If ($ dopost = 'ajaxsave ')
{

$ Value = urldecode (AutoCharset ($ value, "UTF-8 & Prime;," GB2312 & Prime ;));
// Update the master table
$ InQuery = "update' #@__ archives 'set $ field = '$ value' WHERE id =' $ aid '";
If ($ dsql-> ExecuteNoneQuery ($ inQuery ))
{
Echo "true ";
Exit;
} Else {
Echo "false ";
Exit;
}

}

Method 2: save the draft regularly to prevent accidental data loss!

Introduction: The website background editor uses the Baidu UEditor WYSIWYG editor. We want to automatically and periodically save the content in the editor.

The editor can be called as follows:

The code is as follows: Copy code

<Script type = "text/plain" id = "content" name = "content" style = "width: 800px; height: 400px;"> </script>
<Script type = "text/javascript">
Var editor = new UE. ui. Editor ();
Editor. render ('content ');
</Script>

Add the js call tag at the end of the published or edited page:

<! -- Automatic saving to prevent accidental data loss -->

The code is as follows: Copy code

<Script type = "text/javascript" src = "localStorag. js"> </script>

The code for localStorag. js is as follows:

The code is as follows: Copy code

/* Note: this js script should be placed at the end of the page source code */
If (! Window. localStorage ){
Alert ('Your browser does not support localStorage technology! ');
} Else {

Var spanObj = document. getElementById ('S1 ');
Var saveTimer = setInterval (function (){
Var str = "";
If (document. all) {/* IE */str=document.frames11).doc ument. body. innerHTML ;}
Else {/* Chrome, ff */str = document. getElementById ("ueditor_0"). contentDocument. body. innerHTML ;}
If (str. length> 20 & (str. indexOf (". ")>-1 | str. indexOf (", ")>-1) {/* content is saved with a full stop or comma */
LocalStorage. setItem ("ctValue", str );
Var d = new Date ();
Var YMDHMS = d. getFullYear () + "-" + (d. getMonth () + 1) + "-" + d. getDate () + "" + d. getHours () + ":" + d. getMinutes () + ":" + d. getSeconds ();
SpanObj. innerText = '(data is stored in:' + YMDHMS + ')';
SetTimeout (function () {spanObj. innerText = '';}, 5000 );
}
}, 25000); // save every N seconds

Function stoplocs (){
ClearInterval (saveTimer); // stop saving
// LocalStorage. removeItem ("ctValue"); // clear
}

Function showlocs (){
Var html = localStorage. getItem ("ctValue ");
Editor. setContent (html );
// Alert (localStorage. getItem ("ctValue "));
}

}

You can add the stop save button or restore Now button, as shown below:

The code is as follows: Copy code

<A href = "javascript: void (0)" onclick = "javascript: stoplocs ()"> stop saving </a>
<A href = "javascript: void (0)" onclick = "javascript: showlocs ()"> Restore Now </a>

Now, the automatic save function is available for posting or editing pages on your website. Note that this method supports most mainstream browsers such as IE, CHROME, and Firefox in IE8 and later versions. As for IE6, it is really old and out of consideration. If you must consider IE6, use the IE6/ie7 compatibility solution provided above.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.