Moving line items from one table to another table and validating data entered on the first table before adding selected line items to second table

Question

I have a wizard form with four steps which is for ordering Parts, the first step user provide details(Stock Type and Approver who will approve the order) which are validated correctly. Second step user will select which parts to order from the table. On the table, a user is allowed to enter quantity which is less than the available quantity If a user enters greater quantity, it won't allow it which works perfectly. A user should at least enter one quantity.

1. If a user clicks Next to go to the third step before clicking Add button to add what was selected to the second table, this should not be possible. A pop up should be shown that tells a user to click Add button.
2. On the Second Table if a user wants to remove a certain line item, if the user clicks Remove button, the Quantity should be set to null on the first table after line item been removed from the second table.

The problem I'm facing at the moment the user can click next without clicking Add Button, and quantity is required for all inputs of quantity. At least one quantity should be required not all of them.

JavaScript

"use strict";
    function scroll_to_class(element_class, removed_height) {
        var scroll_to = $(element_class).offset().top - removed_height;
        if($(window).scrollTop() != scroll_to) {
            $('.form-wizard').stop().animate({scrollTop: scroll_to}, 0);
        }
    }

    function bar_progress(progress_line_object, direction) {
        var number_of_steps = progress_line_object.data('number-of-steps');
        var now_value = progress_line_object.data('now-value');
        var new_value = 0;
        if(direction == 'right') {
            new_value = now_value + ( 100 / number_of_steps );
        }
        else if(direction == 'left') {
            new_value = now_value - ( 100 / number_of_steps );
        }
        progress_line_object.attr('style', 'width: ' + new_value + '%;').data('now-value', new_value);
    }

    jQuery(document).ready(function() {

        /*
            Form
        */
        $('.form-wizard fieldset:first').fadeIn('slow');

        $('.form-wizard .required').on('focus', function() {
            $(this).removeClass('input-error');
        });

        // next step
        $('.form-wizard .btn-next').on('click', function() {
            var parent_fieldset = $(this).parents('fieldset');
            var next_step = true;
            // navigation steps / progress steps
            var current_active_step = $(this).parents('.form-wizard').find('.form-wizard-step.active');
            var progress_line = $(this).parents('.form-wizard').find('.form-wizard-progress-line');

            // fields validation
            parent_fieldset.find('.required').each(function() {
                if( $(this).val() == "" ) {
                    $(this).addClass('input-error');
                    next_step = false;
                }
                else {
                    $(this).removeClass('input-error');
                }
            });
            // fields validation

            if( next_step ) {
                parent_fieldset.fadeOut(400, function() {
                    // change icons
                    current_active_step.removeClass('active').addClass('activated').next().addClass('active');
                    // progress bar
                    bar_progress(progress_line, 'right');
                    // show next step
                    $(this).next().fadeIn();
                    // scroll window to beginning of the form
                    scroll_to_class( $('.form-wizard'), 20 );
                });
            }

        });

        // previous step
        $('.form-wizard .btn-previous').on('click', function() {
            // navigation steps / progress steps
            var current_active_step = $(this).parents('.form-wizard').find('.form-wizard-step.active');
            var progress_line = $(this).parents('.form-wizard').find('.form-wizard-progress-line');

            $(this).parents('fieldset').fadeOut(400, function() {
                // change icons
                current_active_step.removeClass('active').prev().removeClass('activated').addClass('active');
                // progress bar
                bar_progress(progress_line, 'left');
                // show previous step
                $(this).prev().fadeIn();
                // scroll window to beginning of the form
                scroll_to_class( $('.form-wizard'), 20 );
            });
        });

        // submit
        $('.form-wizard').on('submit', function(e) {

            // fields validation
            $(this).find('.required').each(function() {
                if( $(this).val() == "" ) {
                    e.preventDefault();
                    $(this).addClass('input-error');
                }
                else {
                    $(this).removeClass('input-error');
                }
            });
            // fields validation

        });        

    });

    //Compare available quantity with entered quantity
    function compareQuantity(element, availableQuantity) {

        if (availableQuantity > element.value) {
            console.log("True,", element.value + " is less than "
                    + availableQuantity);
            console.log("Place an Order");
        }
        if (element.value == '' || element.value == 0) {
            alert("Part is out of stock");
            element.value = null;
        } else if (element.value == '' || element.value == '') {
            alert("Quantity can not be empty or cant not be zero. Please enter quantity which is less than available quantity");
            element.value = null;
            console.log(element.value);
        } else if (availableQuantity < element.value) {
            alert("Your order quantity can not be greater than available quantity. Please enter less quantity");
            element.value = null;
            console.log("False,", availableQuantity + " is small than "
                    + element.value);
            console.log("You can not place an order, enter less quantity");
            console.log("Enter value between 1 till " + element.value
                    + " not more than " + availableQuantity);
        }
    }
    //End Compare available quantity with entered quantity  

    /* --Stock type Selection-- */
    function CheckStockType(val) {
        var element = document.getElementById('Site');
        if (val == 'select stock type' || val == 'Site')
            element.style.display = 'block';
        else
            element.style.display = 'none';
        var element = document.getElementById('Boot');
        if (val == 'select stock type' || val == 'Boot')
            element.style.display = 'block';
        else
            element.style.display = 'none';

    }/* --Stock type Selection-- */

    //Order available head office stock-->
        var row;
        var partNumberList = [];
        var quantityList = [];
        //move selected line items to table 2
        $('#stockForOrder').on('click', '.addLineItem', function() {

           var quantity;
           row = $(this).closest("tr").clone(); 
           quantity = $(this).closest('tr').find('td:eq(4)').find('input').val();
           console.log("Check the grapped quantity on table of Selected Line Items to Order : ",quantity);

           if(quantity == '' || quantity == 0){
               alert("Quantity can not be zero.\n Please enter quantity which is less than available quantity"); 
           }      
           if (quantity > 0){
                var items = [];
                row = $(this).closest("tr").clone();
                var partNumber = $(this).closest('tr').find('td:eq(0)').text();
                var quantity = $(this).closest('tr').find('td:eq(4)').find('input').val();
                document.getElementById("quantityList").value = quantityList;
                document.getElementById("partNumberList").value = partNumberList;

                items.push(row);
                row.appendTo($("#toOrder"));
                //debugger;
                $(this).closest('tr').remove();
                $('input[type="button"]', row).removeClass('AddNew').addClass('RemoveRow').val('Remove');
            }
         });
        //remove selected line items from table 1 to table 2
        $('#toOrder').on('click', '.RemoveRow', function(){
             //debugger;
            row = $(this).closest("tr").clone();
            row.appendTo($("#stockForOrder"));
            $(this).closest('tr').remove();        
            $('input[type="button"]', row).removeClass('RemoveRow').addClass('addLineItem').val('Add');
        });

        //send selected items when user clicks submit button
         $('#putorder').on('click', function(){
               var row;
               $('#toOrder tr').each(function(row, tr){
                 partNumberList[row]=[$(tr).find('td:eq(0)').text()];
                 quantityList[row]=[$(this).closest('tr').find('td:eq(4)').find('input').val()];
          }); 
          partNumberList.shift();
          quantityList.shift();
          document.getElementById("quantityList").value = quantityList;
          document.getElementById("partNumberList").value = partNumberList;
        });

         $(document).ready(function(){
                $('.orderSubmit').attr('disabled',true);

                $('input[name$=quantity]').change(function(){
                    if($(this).val().length !=0){
                        $('.orderSubmit').attr('disabled', false);
                        console.log("Something Entered");
                    }
                    else
                    {
                        $('.orderSubmit').attr('disabled', true);
                        console.log("Nothing Entered");
                    }
                })
        });

All my source code is here

I was not able to include it on the SO snippet cause code is to long.

Answer 1

I have made some changes in your CodePen to make it work. Have a look

https://codepen.io/smitraval27/pen/jpObQG

Here is a code of JS:

"use strict";
function scroll_to_class(element_class, removed_height) {
    var scroll_to = $(element_class).offset().top - removed_height;
    if($(window).scrollTop() != scroll_to) {
        $('.form-wizard').stop().animate({scrollTop: scroll_to}, 0);
    }
}

function bar_progress(progress_line_object, direction) {
    var number_of_steps = progress_line_object.data('number-of-steps');
    var now_value = progress_line_object.data('now-value');
    var new_value = 0;
    if(direction == 'right') {
        new_value = now_value + ( 100 / number_of_steps );
    }
    else if(direction == 'left') {
        new_value = now_value - ( 100 / number_of_steps );
    }
    progress_line_object.attr('style', 'width: ' + new_value + '%;').data('now-value', new_value);
}

jQuery(document).ready(function() {

    /*
        Form
    */
    $('.form-wizard fieldset:first').fadeIn('slow');

    $('.form-wizard .required').on('focus', function() {
        $(this).removeClass('input-error');
    });

    // next step
    $('.form-wizard .btn-next').on('click', function() {
        var parent_fieldset = $(this).parents('fieldset');
        var next_step = true;
        // navigation steps / progress steps
        var current_active_step = $(this).parents('.form-wizard').find('.form-wizard-step.active');
        var progress_line = $(this).parents('.form-wizard').find('.form-wizard-progress-line');

        // fields validation
        parent_fieldset.find('.required').each(function() {
            if( $(this).val() == "" ) {
                $(this).addClass('input-error');
                next_step = false;
            }
            else {
                $(this).removeClass('input-error');
            }
        });
        // fields validation
        if(current_active_step.hasClass("HO-stock")){
        if($("#stockForOrder tbody tr").length > 0){
          alert("Please click Add button");
          return;
        }     
        }
        if( next_step ) {
            parent_fieldset.fadeOut(400, function() {
                // change icons
                current_active_step.removeClass('active').addClass('activated').next().addClass('active');
                // progress bar
                bar_progress(progress_line, 'right');

          // show next step
                $(this).next().fadeIn();
                // scroll window to beginning of the form
                scroll_to_class( $('.form-wizard'), 20 );
            });
        }

    });

    // previous step
    $('.form-wizard .btn-previous').on('click', function() {
        // navigation steps / progress steps
        var current_active_step = $(this).parents('.form-wizard').find('.form-wizard-step.active');
        var progress_line = $(this).parents('.form-wizard').find('.form-wizard-progress-line');

        $(this).parents('fieldset').fadeOut(400, function() {
            // change icons
            current_active_step.removeClass('active').prev().removeClass('activated').addClass('active');
            // progress bar
            bar_progress(progress_line, 'left');
            // show previous step
            $(this).prev().fadeIn();
            // scroll window to beginning of the form
            scroll_to_class( $('.form-wizard'), 20 );
        });
    });

    // submit
    $('.form-wizard').on('submit', function(e) {

        // fields validation
        $(this).find('.required').each(function() {
            if( $(this).val() == "" ) {
                e.preventDefault();
                $(this).addClass('input-error');
            }
            else {
                $(this).removeClass('input-error');
            }
        });
        // fields validation

    });


});


//Compare available quantity with entered quantity
function compareQuantity(element, availableQuantity) {

    if (availableQuantity > element.value) {
        console.log("True,", element.value + " is less than "
                + availableQuantity);
        console.log("Place an Order");
    }
    if (element.value == '' || element.value == 0) {
        alert("Part is out of stock");
        element.value = null;
    } else if (element.value == '' || element.value == '') {
        alert("Quantity can not be empty or cant not be zero. Please enter quantity which is less than available quantity");
        element.value = null;
        console.log(element.value);
    } else if (availableQuantity < element.value) {
        alert("Your order quantity can not be greater than available quantity. Please enter less quantity");
        element.value = null;
        console.log("False,", availableQuantity + " is small than "
                + element.value);
        console.log("You can not place an order, enter less quantity");
        console.log("Enter value between 1 till " + element.value
                + " not more than " + availableQuantity);
    }
}
//End Compare available quantity with entered quantity  

/* --Stock type Selection-- */
function CheckStockType(val) {
    var element = document.getElementById('Site');
    if (val == 'select stock type' || val == 'Site')
        element.style.display = 'block';
    else
        element.style.display = 'none';
    var element = document.getElementById('Boot');
    if (val == 'select stock type' || val == 'Boot')
        element.style.display = 'block';
    else
        element.style.display = 'none';

}/* --Stock type Selection-- */

//Order available head office stock-->
    var row;
    var partNumberList = [];
    var quantityList = [];
    //move selected line items to table 2
    $('#stockForOrder').on('click', '.addLineItem', function() {

       var quantity;
       row = $(this).closest("tr").clone(); 
       quantity = $(this).closest('tr').find('td:eq(4)').find('input').val();
       console.log("Check the grapped quantity on table of Selected Line Items to Order : ",quantity);

       if(quantity == '' || quantity == 0){
           alert("Quantity can not be zero.\n Please enter quantity which is less than available quantity"); 
       }      
       if (quantity > 0){
            var items = [];
            row = $(this).closest("tr").clone();
            var partNumber = $(this).closest('tr').find('td:eq(0)').text();
            var quantity = $(this).closest('tr').find('td:eq(4)').find('input').val();
            document.getElementById("quantityList").value = quantityList;
            document.getElementById("partNumberList").value = partNumberList;

            items.push(row);
            row.appendTo($("#toOrder"));
            //debugger;
            $(this).closest('tr').remove();
            $('input[type="button"]', row).removeClass('AddNew').addClass('RemoveRow').val('Remove');
        }
     });
    //remove selected line items from table 1 to table 2
    $('#toOrder').on('click', '.RemoveRow', function(){
         //debugger;
      row = $(this).closest("tr").clone();
  row.find("input[name=quantity]").val("");

        row.appendTo($("#stockForOrder"));
        $(this).closest('tr').remove();        
        $('input[type="button"]', row).removeClass('RemoveRow').addClass('addLineItem').val('Add');
    });

    //send selected items when user clicks submit button
     $('#putorder').on('click', function(){
           var row;
           $('#toOrder tr').each(function(row, tr){
             partNumberList[row]=[$(tr).find('td:eq(0)').text()];
             quantityList[row]=[$(this).closest('tr').find('td:eq(4)').find('input').val()];
      }); 
      partNumberList.shift();
      quantityList.shift();
      document.getElementById("quantityList").value = quantityList;
      document.getElementById("partNumberList").value = partNumberList;
    });

     $(document).ready(function(){
            $('.orderSubmit').attr('disabled',true);

            $('input[name$=quantity]').change(function(){
                if($(this).val().length !=0){
                    $('.orderSubmit').attr('disabled', false);
                    console.log("Something Entered");
                }
                else
                {
                    $('.orderSubmit').attr('disabled', true);
                    console.log("Nothing Entered");
                }
            })
    });

I have also added one class in second step DIV in html. Basically on click of next button I have checked if all rows in the table are added or not by counting the length. Let me know if you have any questions.