script.aculo.us InPlaceEditor submitOnBlur Option
Last Updated :
01 Dec, 2020
The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. The Ajax.InPlaceEditor is used to make elements editable thereby allowing the user to edit the content on the page and submit the changes to the server.
The InPlaceEditor submitOnBlur option is used to specify if the editor form of the element would be submitted whenever it loses focus. The default value of this option is “false”, that is, the form will not be submitted when it loses focus.
Syntax:
{ submitOnBlur: value }
Parameters: This option has a single value as mentioned above and described below:
- value: This is a boolean value that specifies if the input form would be submitted whenever it loses focus. The default value is “false”.
The below example illustrates the use of this option.
Example: The below script is required to simulate the saving of data to the server.
PHP
<?php
if ( isset( $_REQUEST [ "value" ]) ) {
$str = $_REQUEST [ "value" ];
echo $str ;
}
?>
|
The below script demonstrates this with the example:
HTML
< html >
< head >
< script type = "text/javascript"
src = "prototype.js" >
</ script >
< script type = "text/javascript"
src = "scriptaculous.js?load = controls" >
</ script >
< script type = "text/javascript" >
window.onload = function () {
new Ajax.InPlaceEditor(
'editableElement',
{
// Setting submitOnBlur
// to false, to prevent
// submitting when losing focus
submitOnBlur: false,
}
);
new Ajax.InPlaceEditor(
'editableElement2',
{
// Setting submitOnBlur
// to true, submits
// when focus is lost
submitOnBlur: true,
}
);
}
</ script >
</ head >
< body >
< h1 style = "color: green" >
GeeksforGeeks
</ h1 >
< h2 >InPlaceEditor submitOnBlur Option</ h2 >
< p >The "submitOnBlur" option is used to
specify if the element is submitted
when it loses focus.</ p >
< b >
This element has the submitOnBlur as
the default value, false.
</ b >
< div id = "editableElement" >Click here element
and then outside to lose focus.</ div >
< br >
< b >This element has the submitOnBlur set
to true.</ b >
< div id = "editableElement2" >Click here element
and then outside to lose focus.</ div >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...