javascript

Print a div contents in Php

If You want to print the section or Div contents, then please do the following…

By using the following code you can print the contents in a div or section.

 

Html  Section:

// The Printing button. On click this button the print preview opens


<div class="row">
      <div class="col-md-12"> 
              <button class="xshr_print_section_btn" onclick="javascript:printDivContents('xshr_print_section')">Print Details</button></div>
</div>

<!-- html Ends -->

Script Section:

<!-- For Print the Contents Starts -->

<script language="javascript" type="text/javascript">

function printDivContents(divID) {

//Get the HTML of div
var divElements = document.getElementById(divID).innerHTML;

//Get the HTML of whole page
var oldPage = document.body.innerHTML;

//Reset the page's HTML with div's HTML only
document.body.innerHTML = 
"<html><head><title></title></head><body>" + 
divElements + "</body>";

//Print Page
window.print();

//Restore orignal HTML
document.body.innerHTML = oldPage;


}
</script>

<!-- For Print the Contents / Ends-->

 

 

also solution available at: how to print a Div content in javascript

How to Update the Current Browser URL

# UPDATE THE CURRENT URL IN BROWSER::
<script>

ChangeUrl = function(page, url) {

    if (typeof (history.pushState) != "undefined") {

        var obj = { Page: page, Url: url };

        history.pushState(obj, obj.Page, obj.Url);

        $('.breadcrumb-get-a-pro').attr('href', url);

    } else {

        alert("Browser does not support HTML5.");

    }

}

</script>

On Click a Button Add more duplicate Content with blank input values in Jquery

 

<!-- For HTML Section -->

<div class="row">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <div class="form-group">
         <span class="btn btn-sm btn-info pull-right add-more-guest-btn">Click Add Guest</span>
      </div>
   </div>
</div>


<div class="row ">
   <div class="col-lg-12 col-md-12 guestuser-section-primary" style="display:none;" >
      <div class="row guestuser-block">
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
              <div class="form-group">
                 <input type="text" class="form-control" name="user_name[]" value="" > 
 
              </div>
          </div>
         <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
             <div class="form-group">
                 <input type="text" class="form-control" name="user_email[]" value="" > 
             </div>
         </div>
      </div>
   </div>
</div>


<div class="row ">
    <div class="col-lg-12 col-md-12 guestuser-section-secondary" >
    </div> 
</div>

<!-- For HTML Section / -->

 

 

 

<!-- For Script Section / -->

<script type="text/javascript">
$(function(){
    $('.add-more-guest-btn').on('click', function(){

        var addmore_main = $('.guestuser-block').eq(0).clone(true);

        addmore_main.find("input").val("");

        $('.guestuser-section-secondary').append(addmore_main);
 
    });
});
</script>

<!-- For Script Section / -->

 

How to Add a Custom Function in Jquery Form Validator

How to Add a Custom Function in Jquery Form Validator?

 

First, write the custom function like below.

jQuery.validator.addMethod("mobile_prefix", function(value, element) 
{

        var select=true;

        var mobile_prefix=$("#mobile_prefix").val();

        if(value && !mobile_prefix)
        {
            select=false;
        }

        return select;

    });

 

Secondly, In the form validator function call the above custom defined function. It will return TRUE / FALSE.

 

 $("#form").validate({

        rules:{
            "password":{
                required:true,
                noSpace: true
            },
            "confpassword": {
                equalTo:"#passwordd"
            },
            "mobile_number":{
                required:true,
                requiredcustom:true,
                numericvalue:true,
                mobile_prefix:true
            },
          },  

          messages: {
            "confpassword": {
                required:"Enter confirm password",
                equalTo: "Password mismatch",
            },
            "password":{
                required:"Enter password",
                noSpace : "no space please."
            },
            "mobile_number": {
                required: "Enter Mobile Number",
                minlength: "Mobile number atleast 10",
               mobile_prefix:"Please select code"
            },
        },
    });

If you like the post, please comment below & follow us on social platform.