Inner html copy and generate code using simple javascript technique


The inner html of below div will be copied to textarea as like generated code


   <div id="inner_content_to_copy">
     <h1>This is header</h1>
     <p>This is paragraph</p>
     <button>Click Me</button>
   </div>

javascript code to manage this functionality:


   <script type="text/javascript">
     var content = document.getElementById("inner_content_to_copy").innerHTML;
     content = content.replace(/</gi, "&lt;");
     content = content.replace(/>/gi, "&gt;");
     content = content.replace(/[\r\n]+/g, " ");
     content = content.replace(/\s+/g," ");
     content = content.replace(/\s\&lt\;\//g,"&lt;/");
     document.getElementById('show_content_for_export').innerHTML = content;
   </script>

Code will be displayed here:


 <textarea id="show_content_for_export" class="preview_div" name="preview_div"></textarea>

Advertisements

javascript array variable assign and retrieve value


Declare a javascript array:


  <script type='text/javascript'> 
	var JArrayOptin = [];
  </script>  

Assign some values at array:


  <script type='text/javascript'> 
	JArrayOptin.push({
		first_name: 'Ziyed',
		last_name: 'Uddin'		
	});
  </script>   

Get the variable value that assigned:


  <script type='text/javascript'>
	var fName =  JSONArrayOptin[0]['first_name'];
	var lName =  JSONArrayOptin[0]['last_name'];
  </script>    

JSON Object variable declare, assign values and manage for ajax calling


Declare a json object variable:


  <script type='text/javascript'>
	var JSONArrayOptions = {};
  </script>  

Assign some values at variable:


 <script type='text/javascript'>
    JSONArrayOptions['first_name'] = 'Ziyed';
    JSONArrayOptions['last_name'] = 'Uddin';  
 </script> 

Preparation for ajax calling:


  <script type='text/javascript'>
     //converts a JavaScript value to a JSON string
     var JSONArrayOptionsSerialized = JSON.stringify(JSONArrayOptions); 
     jQuery.ajax({
	 type: "POST",
	 url: 'put_your_url_here',
	 data: { json_string: JSONArrayOptionsSerialized},
	 dataType: "html",
	 success: function(data) {            
	    //Write your code here after success            
	 }
      });
      return false;
  </script> 

Use the variable for operation at user end:


  <script type='text/javascript'>
    if (typeof (JSONArrayOptions['first_name']) != "undefined" && JSONArrayOptions['first_name'] !== null) {
        //Do your operation by getting the value 
	alert(JSONArrayOptions['first_name']);
     }	
  </script> 

Leaving page with confirmation alert using onbeforeunload and form submission problem solution.


HTML code to release Form submission with out page leave confirmation

<input type="submit" name="submit" value="SUBMIT"  onclick="submit_Form_Okay = true;" />

Javascript code to confirm leave confirmation alert


   var submit_Form_Okay = false;
   window.onbeforeunload = function () {
      if (!submit_Form_Okay) {
         return "Are you sure you want to navigate away from this page?";
      }
   }