Implementing a Jquery Switcher: A Step-by-Step Guide

Question

Implementing a Jquery Switcher: A Step-by-Step Guide

I always strive to provide clear and specific details about my question.

My goal is to create an Alert Box for different types of inputs, where all inputs will trigger the same alert message in the box instead of separate alerts. I attempted to implement a switch function for the message, but it seems there is an issue. After adding the switch function to the code, the ADD button no longer functions as intended.

I have shared my complete code here including HTML, jQuery, and CSS. You can identify the section marked with /* ---- */ where the problem occurs.

The table works correctly because I left the Switcher in place. If you move the message above in the blockade area and keep the switcher on, you'll notice that the add button stops working.

I would greatly appreciate any help in resolving this issue. Thank you for your assistance :)

(JavaScript code snippet included)

I also want to display specific messages for each input. For example:

Task Select: You haven't selected any task yet :)

Thank you in advance for your help!

I am available to provide any additional information needed to assist me further.

javascript jquery html css

Answer 1

Answer №1

I don't see any issue here. Once your switch is activated, it functions properly.

Take a look at the code snippet provided below.

$(document).ready(function () {

    $('.buttons').on('click', 'button.hide', function () {
        console.log('hide');
        $('form').hide();
    });

    $('.buttons').on('click', 'button.add', function () {
        console.log('add');
        var edit = $('#edit');
        editRow = $('#editRow');

        edit.show();
        if (!($('#addNew').length)) {
            edit.append('<input type="button" id="addNew" onclick="addNewTr()" value="Add" name="submit" />');
        }

        if (editRow) {
            editRow.remove();
        }

        for (var x = 1; x < $('input').length; x++) {
            $('#btd' + x).val('');
        }
    });

    $('#show').click(function () {
        //$('form').show();
        //$('#btd1').val('Vlad');
        //$('#btd2').val('Andrei');
        //$('#btd3').val('vTask');
        //  $('#btd4').val('Ceva');
        //$('#btd5').val('Alceva');
    });
});

function edit(a) {
    var edit = $('#edit');
        addNew = $('#addNew');
        editRow = $('#editRow');

    edit.show();
    if (addNew) {
        addNew.remove();
    }

    if (editRow.length) {
        editRow.replaceWith('<input type="button" id="editRow" onclick="save(' + a + ')" value="Edit" name="submit" />');
    } else  {
        edit.append('<input type="button" id="editRow" onclick="save(' + a + ')" value="Edit" name="submit" />');
    }

    $.each($('.tr-' + a).find('td'), function (key, val) {
        $('form#edit input[type=text]').eq(key).val($(val).text());
    });
}

function save(a) {
    var tr = $('tr');
    valid = true;
    message = '';

    $('form#edit input, select').each(function () {
        var $this = $(this);

        if (!$this.val()) {
            var inputName = $this.attr('name');
            valid = false;
            message += 'Please complete all the columns' + inputName + '\n';
        }
    });

    if (!valid) {
        alert(message);
    } else {
        for (var q = 1; q < $('.tr-' + a + ' td').length; q++) {
            $('.tr-' + a + ' td:nth-child(' + q + ')').html($('#btd' + q).val());
        }
        for (var x = 1; x < $('input').length; x++) {
            $('#btd' + x).val('');
        }
        $('#editRow').remove();
    }
}

function addNewTr() {
    var tr = $('tr');
    valid = true;
    message = '';

    $('form#edit input, select').each(function () {
        var $this = $(this);

        if (!$this.val()) {
            var inputName = $this.attr('name');
            valid = false;
        switch (inputName) {
    case 'Project Name':
          message += 'Please enter the ' + inputName + '\n';
          break;
    case 'Task Select':
          message += 'enter task ' + inputName + '\n';
          break;
    case 'Volume':
          message += 'please volume ' + inputName + '\n';
          break;
    case 'Units':
          message += 'lorem ipsum ' + inputName + '\n';
          break;
    case 'Work Hours':
          message += 'pony ' + inputName + '\n';
          break;

    }
        }
    });

    if (!valid) {
        alert(message);
    } else {
        $('table tbody').append('' +
            '<tr class="tr-' + tr.length + '">' +
            '<td>' + $('#btd1').val() + '</td>' +
            '<td>' + $('#btd2').val() + '</td>' +
            '<td>' + $('#btd3').val() + '</td>' +
            '<td>' + $('#btd4').val() + '</td>' +
            '<td>' + $('#btd5').val() + '</td>' +
            '<td>' + $('#btd6').val() + '</td>' +
            '<td class="buttons">' +
            '<button class="removeThis" onclick="removeThis(' + tr.length + ')">Delete</button >' +
            '<button class="edit" onclick="edit(' + tr.length + ')">Edit</button >' +
            '</td >' +
            '</tr>' +
            '');
        for (var x = 1; x < $('input').length; x++) {
            $('#btd' + x).val('');
        }
    }
}

function removeThis(a) {
    $('.tr-' + a).remove();
}

/* CSS Code */

Answer 2

I don't see any issue here. Once your switch is activated, it functions properly.

Take a look at the code snippet provided below.

$(document).ready(function () {

    $('.buttons').on('click', 'button.hide', function () {
        console.log('hide');
        $('form').hide();
    });

    $('.buttons').on('click', 'button.add', function () {
        console.log('add');
        var edit = $('#edit');
        editRow = $('#editRow');

        edit.show();
        if (!($('#addNew').length)) {
            edit.append('<input type="button" id="addNew" onclick="addNewTr()" value="Add" name="submit" />');
        }

        if (editRow) {
            editRow.remove();
        }

        for (var x = 1; x < $('input').length; x++) {
            $('#btd' + x).val('');
        }
    });

    $('#show').click(function () {
        //$('form').show();
        //$('#btd1').val('Vlad');
        //$('#btd2').val('Andrei');
        //$('#btd3').val('vTask');
        //  $('#btd4').val('Ceva');
        //$('#btd5').val('Alceva');
    });
});

function edit(a) {
    var edit = $('#edit');
        addNew = $('#addNew');
        editRow = $('#editRow');

    edit.show();
    if (addNew) {
        addNew.remove();
    }

    if (editRow.length) {
        editRow.replaceWith('<input type="button" id="editRow" onclick="save(' + a + ')" value="Edit" name="submit" />');
    } else  {
        edit.append('<input type="button" id="editRow" onclick="save(' + a + ')" value="Edit" name="submit" />');
    }

    $.each($('.tr-' + a).find('td'), function (key, val) {
        $('form#edit input[type=text]').eq(key).val($(val).text());
    });
}

function save(a) {
    var tr = $('tr');
    valid = true;
    message = '';

    $('form#edit input, select').each(function () {
        var $this = $(this);

        if (!$this.val()) {
            var inputName = $this.attr('name');
            valid = false;
            message += 'Please complete all the columns' + inputName + '\n';
        }
    });

    if (!valid) {
        alert(message);
    } else {
        for (var q = 1; q < $('.tr-' + a + ' td').length; q++) {
            $('.tr-' + a + ' td:nth-child(' + q + ')').html($('#btd' + q).val());
        }
        for (var x = 1; x < $('input').length; x++) {
            $('#btd' + x).val('');
        }
        $('#editRow').remove();
    }
}

function addNewTr() {
    var tr = $('tr');
    valid = true;
    message = '';

    $('form#edit input, select').each(function () {
        var $this = $(this);

        if (!$this.val()) {
            var inputName = $this.attr('name');
            valid = false;
        switch (inputName) {
    case 'Project Name':
          message += 'Please enter the ' + inputName + '\n';
          break;
    case 'Task Select':
          message += 'enter task ' + inputName + '\n';
          break;
    case 'Volume':
          message += 'please volume ' + inputName + '\n';
          break;
    case 'Units':
          message += 'lorem ipsum ' + inputName + '\n';
          break;
    case 'Work Hours':
          message += 'pony ' + inputName + '\n';
          break;

    }
        }
    });

    if (!valid) {
        alert(message);
    } else {
        $('table tbody').append('' +
            '<tr class="tr-' + tr.length + '">' +
            '<td>' + $('#btd1').val() + '</td>' +
            '<td>' + $('#btd2').val() + '</td>' +
            '<td>' + $('#btd3').val() + '</td>' +
            '<td>' + $('#btd4').val() + '</td>' +
            '<td>' + $('#btd5').val() + '</td>' +
            '<td>' + $('#btd6').val() + '</td>' +
            '<td class="buttons">' +
            '<button class="removeThis" onclick="removeThis(' + tr.length + ')">Delete</button >' +
            '<button class="edit" onclick="edit(' + tr.length + ')">Edit</button >' +
            '</td >' +
            '</tr>' +
            '');
        for (var x = 1; x < $('input').length; x++) {
            $('#btd' + x).val('');
        }
    }
}

function removeThis(a) {
    $('.tr-' + a).remove();
}

/* CSS Code */

Implementing a Jquery Switcher: A Step-by-Step Guide

Answer №1

Similar questions

When using Angular $http.post, encountering issues with the 'Access-Control-Allow-Origin' header

Whenever I try to access pages from the Menu, I keep getting a frustrating "Page not Found" error message due to the Handlebars rendering

Javascript functions fail to execute as intended

"Instead of opening the page in a popup window, use window.open to open it in a new tab

Ways to verify if information is being added to a JSON file or not

Display Binary Image in HTML Table using Server-side Code

Troubleshooting problem with displaying child component in Vue's nested routes

What could be the reason for XMLHttpRequest to freeze with no error until it reaches the default browser timeout limit

Unable to adjust the height of the border when hovering over a P tag

Experimenting with javascript through jasmine testing

AutomatedPostBack wipes out the data stored in my dropdownlist variable

Best practices for securing string values in Node.js

Is the menu not appearing in the header section of the HTML/CSS?

Transform the JSON object into a different JSON format

Generate seamless rotation within a specified time frame (+- x%)

What is the best way to determine when the context value has been established?

JavaScript reasoning based on logic

Why does the control skip the onreadystatechange function for the ajax object?

Implement ajax functionality to update an object within a JSP page

Sending a document using the ng-file-upload directive to a Sails.js server