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', 
        'http://localhost/tmpscripts/inplace.php', 
        { 
  
          // Setting submitOnBlur 
          // to false, to prevent 
          // submitting when losing focus 
          submitOnBlur: false, 
        } 
      ); 
  
      new Ajax.InPlaceEditor( 
        'editableElement2', 
        'http://localhost/tmpscripts/inplace.php', 
        { 
  
          // 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>