Skip to content
Related Articles

Related Articles

Improve Article

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :