javascript

How to Increment value clicking plus minus icon in Jquery?

Html Code:

<div class="csdisplayorder" >
    <span class='csminus glyphicon glyphicon-minus'></span>
    <input class="cscurrent" type="text" disabled value="1" data-rid="1" data-pid="2">
    <span class='csplus glyphicon glyphicon-plus'></span>
</div>

Script:

<script type="text/javascript">
$(document).ready(function(){
    $('.csdisplayorder .csplus').live('click', function(){
        var dis = $(this);
        var input_obj = dis.parent().find('.cscurrent');
        var input_val = parseInt(input_obj.val());
        if(input_val == undefined){
            input_obj.val(0);
        }else{
            var new_val =  parseInt(input_val)+1;
            input_obj.val(new_val);
            $(this).fncsUpdateRoomDisplayOrder(dis, new_val);
        }
    });

    $('.csdisplayorder .csminus').live('click', function(){
        var dis = $(this);
        var input_obj = dis.parent().find('.cscurrent');
        var input_val = parseInt(input_obj.val());
        if(input_val == undefined){
            input_obj.val(0);
        }else{
            if(parseInt(input_val) >0){
                var new_val =  parseInt(input_val)-1;
                input_obj.val(new_val);

                $(this).fncsUpdateRoomDisplayOrder(dis, new_val);
            }
        }
    });

    $.fn.fncsUpdateRoomDisplayOrder = function(dis,nval) { 
        var input_obj = dis.parent().find('.cscurrent');
        var rid = input_obj.data('rid');
        var pid = input_obj.data('pid');

        var datastring = {'nval':nval,'rid':rid,'pid':pid}
        var xhrequest = false;
        xhrequest = $.ajax({
            url: base_url+'update',
            type:'post',
            dataType: 'json',
            data:datastring,
            async:false, 
            beforeSend: function (){
                if (xhrequest) {
                    xhrequest.ajaxStop();
                    console.log("xhrequest");
                }
            },
            success: function(data){
                xhrequest = false;
                console.log(data);
            }
        });
    }
});
</script>

CSS:

<style type="text/css">
.csdisplayorder{width: 62px;text-align: center;}
.csdisplayorder .cscurrent{width: 25px;float: none;background-color: white;border: none;text-align: center;}
.csdisplayorder .csplus,.csminus{padding: 3px;background-color: grey;color: white;border-radius: 10px;}
.csdisplayorder .csminus{float: left; }
.csdisplayorder .csplus{float: right;}
.csdisplayorder .cscurrent_txt{width:25px;float:none;vertical-align:-webkit-baseline-middle;vertical-align: sub;}
.csdisplayorder input[type=number].cscurrent::-webkit-inner-spin-button, 
.csdisplayorder input[type=number].cscurrent::-webkit-outer-spin-button { 
  -webkit-appearance: none; margin: 0; }
</style>

Print the Div Contents in Php or Javascript

The JavaScript is below..

<script type="text/javascript">
var base_url="<?php echo $this->request->webroot; ?>";

function printDivContents(divID="xshr_print_section") {

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


function Popup(data) {
    var mywindow = window.open('', 'new div', 'height=400,width=600');
    mywindow.document.write('<html><head><title></title>');
    mywindow.document.write('<link rel="stylesheet" href="'+base_url+'"css/print.css" type="text/css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');

    mywindow.print();

    return true;
}
</script>

The HTML file is like-

<div id="xshr_print_section">
<!-- here the printing Contents -->

-
-
-
</div>

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 / -->