Detect any change from PHP form without using submit button

Question

I need help. Now I trying to create a function that can detect any change value from PHP form. Now I'm working using CodeIgniter. I explain more detail about this.

I making an e-commerce site. If the user in the cart page and changing the qty but the user not yet checkout and still want to browser more.... when the user has to change qty and press to another page. It will display pop up alert. This pop-up alert have a function to save the changing Qty. But if the user not changing anything. The pop-up alert should not show.

I already set this in the menu.

<?php echo form_open('order_products_execute', 'class="order_form"'); ?>
                <?php include(VIEWPATH.'_order_parts.html') ?>
                <div class="common_btn_area">
                    <input type="hidden" name="branch_id" value="<?php echo $branch_id; ?>">
                    <button type="button" class="add_cart_more">add more</button>
                    <button type="submit" class="common_save_btn confirmation">Order</button>
                </div>
<?php echo form_close(); ?>

<!-- footer menu -->
<ul>
    <li>
       <a href="<?php echo base_url('top/'); ?>" class="footer_link" onclick="ExitCart('<?php echo base_url('top/'); ?>')" >
         <span>Home</span>
       </a>
    </li>
    <li>
       <a href="<?php echo base_url('product/'); ?>" class="footer_link" onclick="ExitCart('<?php echo base_url('product/'); ?>')" >
         <span>Product</span>
       </a>
    </li>
</ul>

and set the script

<script>
function ExitCart(link){
            var $form = $('.order_form');

            #code for compare previous value with changing value
            $.ajax( {
                type: $form.attr('method'),
                url : "/buyer/ajax/compare_form_add_cart",
                dataType : "json",
                data : $form.serialize(),
                success : function(resultdata) {
                    if(resultdata){
                        if(confirm("Do you want to save your changes?")){
                            #if confirm yes
                            $.ajax({
                                type: 'post',
                                url: '/buyer/Ajax/add_order_data_in_cart_session',
                                data: $('.order_form').serialize(),
                                dataType: 'json',
                                success: function(res, textStatus, xhr){
                                    if(res.result) {
                                        location.href = link;
                                    } else {
                                        $( "#loading_layer" ).css('display', 'none');
                                        alert('Failed to save cart data. Please try again.');
                                    }
                                }
                            });
                        }else{
                            #if confirm not
                            location.href = link;
                        };
                    }else{
                        return true;
                    }
                }
            });
}
</script>

When I implement this ajax code, sometimes the code is working. But sometimes it is not. Is there any code that can detect any change from the form. But without the press submit button.

Answer 1

You need to make copies of your input fields for example

// Input Field (TEXT)
< input type="text" id="input1" value="Same Value" />

// Hidden Input for comparison
< input type="hidden" value="Same Value" />

at on click function, you should compare these fields like

function ExitCart(link){
     // Get Input Value
     var val = $.trim($('#input1').val());

    // Get Reference Value from next input
    var valChk = $.trim($('#input1').next().val());

    if(val != valChk) {
        YOUR CODE HERE
    }    
}

Answer 2

in jQuery you can bind all the inputs changes

$('.order_form input').change(functon(){
var $form = $('.order_form');

            #code for compare previous value with changing value
            $.ajax( {
                type: $form.attr('method'),
                url : "/buyer/ajax/compare_form_add_cart",
                dataType : "json",
                data : $form.serialize(),
                success : function(resultdata) {
                    if(resultdata){
                        if(confirm("Do you want to save your changes?")){
                            #if confirm yes
                            $.ajax({
                                type: 'post',
                                url: '/buyer/Ajax/add_order_data_in_cart_session',
                                data: $('.order_form').serialize(),
                                dataType: 'json',
                                success: function(res, textStatus, xhr){
                                    if(res.result) {
                                        location.href = link;
                                    } else {
                                        $( "#loading_layer" ).css('display', 'none');
                                        alert('Failed to save cart data. Please try again.');
                                    }
                                }
                            });
                        }else{
                            #if confirm not
                            location.href = link;
                        };
                    }else{
                        return true;
                    }
                }
            });
})