CODEWITHSUNDEEP
javascriptjqueryhtml
Andrei Ref
Andrei Ref

Reputation: 53

Alert Switch Jquery

Can anyone please help me resolve this problem?

I'm trying to create an alert switcher for my label but it seems that I'm doing something wrong. If I add this to my JS file, my add button won't work anymore Can anyone help me out?

$(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 colums' + 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;
            message += 'Please enter your ' + inputName + '\n';
            /*switch (inputName) {
    case 'Nume Proiect':
          message += 'Message for password ' + inputName + '\n';
          break;
    case 'Task Select':
          message += 'Message for email ' + inputName + '\n';
          break;
    case 'Volum':
          message += 'Message for email ' + inputName + '\n';
          break;
    case 'Unitati':
          message += 'Message for email ' + inputName + '\n';
          break;
    case 'Ore Lucrate':
          message += 'Message for email ' + 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();
}
/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #e80041;
  border-radius: 50%;
  border-top: 16px solid #188f84;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  100% { -webkit-transform: rotate(360deg); }
  0% { -webkit-transform: rotate(0deg); }
}

@keyframes spin {
  100% { transform: rotate(360deg); }
  0% { transform: rotate(0deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
}


/* Top Header */

#hh1 {
color: #1b998b;
text-align: center;
font-size: 40px;
border-bottom: 4px solid #FFFFFF;
font-family: Sans-serif;
height: 200px;
   width: 1300px;
position: fixed;
   top: 20%;
   left: 26.5%;
   margin-top: -100px;
   margin-left: -200px;

}

#vt1 {
color: White;
font-size: 40px;
text-align: center;
height: 200px;
   width: 400px;
position: fixed;
   top: 35%;
   left: 50%;
   margin-top: -100px;
   margin-left: -200px;

}

/* BODY */

body {
  font-family: serif;
  background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

table.greenTable {
  font-family: Tahoma, Geneva, sans-serif;
  border: 6px solid #152842;
  background-color: #EEEEEE;
  width: 70%;
  text-align: center;
}
table.greenTable td, table.greenTable th {
  border: 4px solid #1F6698;
  padding: 3px 2px;
}
table.greenTable tbody td {
  font-size: 13px;
  font-weight: bold;
}
table.greenTable tr:nth-child(even) {
  background: #999DA5;
}
table.greenTable thead {
  background: #93B5C1;
  background: -moz-linear-gradient(top, #aec7d0 0%, #9dbcc7 66%, #93B5C1 100%);
  background: -webkit-linear-gradient(top, #aec7d0 0%, #9dbcc7 66%, #93B5C1 100%);
  background: linear-gradient(to bottom, #aec7d0 0%, #9dbcc7 66%, #93B5C1 100%);
  border-bottom: 0px solid #444444;
}
table.greenTable thead th {
  font-size: 19px;
  font-weight: bold;
  color: #F0F0F0;
  text-align: center;
  border-left: 2px solid #1B998B;
}
table.greenTable thead th:first-child {
  border-left: none;
}

table.greenTable tfoot td {
  font-size: 13px;
}
table.greenTable tfoot .links {
  text-align: right;
}
table.greenTable tfoot .links a{
  display: inline-block;
  background: #FFFFFF;
  color: #000000;
  padding: 2px 8px;
  border-radius: 5px;
}


/* BUTTONS */

/* BODY */

button {
  font-family: arial;
  font-weight: bold;
  color: #000000 !important;
  font-size: 14px;
  padding: 2px 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 2px solid #152842;
  background: #63B8EE;
  background: linear-gradient(top,  #1F6698,  #1B998B);
  background: -ms-linear-gradient(top,  #1F6698,  #1B998B);
  background: -webkit-gradient(linear, left top, left bottom, from(#1F6698), to(#1B998B));
  background: -moz-linear-gradient(top,  #1F6698,  #1B998B);
}
button:hover {
  color: #14396A !important;
  background: #468CCF;
  background: linear-gradient(top,  #93B5C1,  #D1D1D1);
  background: -ms-linear-gradient(top,  #93B5C1,  #D1D1D1);
  background: -webkit-gradient(linear, left top, left bottom, from(#93B5C1), to(#D1D1D1));
  background: -moz-linear-gradient(top,  #93B5C1,  #D1D1D1);
}

#addNew {
  font-family: arial;
  font-weight: bold;
  color: #000000 !important;
  font-size: 14px;
  padding: 1px 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 2px solid #152842;
  background: #63B8EE;
  background: linear-gradient(top,  #1F6698,  #1B998B);
  background: -ms-linear-gradient(top,  #1F6698,  #1B998B);
  background: -webkit-gradient(linear, left top, left bottom, from(#1F6698), to(#1B998B));
  background: -moz-linear-gradient(top,  #1F6698,  #1B998B);
}
#addNew:hover {
  color: #14396A !important;
  background: #468CCF;
  background: linear-gradient(top,  #93B5C1,  #D1D1D1);
  background: -ms-linear-gradient(top,  #93B5C1,  #D1D1D1);
  background: -webkit-gradient(linear, left top, left bottom, from(#93B5C1), to(#D1D1D1));
  background: -moz-linear-gradient(top,  #93B5C1,  #D1D1D1);
}

#editRow {
  font-family: arial;
  font-weight: bold;
  color: #000000 !important;
  font-size: 14px;
  padding: 1px 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 2px solid #152842;
  background: #63B8EE;
  background: linear-gradient(top,  #1F6698,  #1B998B);
  background: -ms-linear-gradient(top,  #1F6698,  #1B998B);
  background: -webkit-gradient(linear, left top, left bottom, from(#1F6698), to(#1B998B));
  background: -moz-linear-gradient(top,  #1F6698,  #1B998B);
}
#editRow:hover {
  color: #14396A !important;
  background: #468CCF;
  background: linear-gradient(top,  #93B5C1,  #D1D1D1);
  background: -ms-linear-gradient(top,  #93B5C1,  #D1D1D1);
  background: -webkit-gradient(linear, left top, left bottom, from(#93B5C1), to(#D1D1D1));
  background: -moz-linear-gradient(top,  #93B5C1,  #D1D1D1);
}

a {
    color: #fff;
    text-decoration: none;
}
.read-more {
    background: #222;
    padding: 10px 50px;
    -webkit-box-shadow: 0 5px 6px #eee;
	-moz-box-shadow: 0 5px 6px #eee;
	box-shadow: 0 5px 6px #eee;
}
.read-more:before {
    content: "<<";
    color: #fff;
}
#content {
	color: #222;
	text-align: center;
	max-width: 30%;
	margin: 200px auto 0;
	padding: 50px;
	border: 4px solid #222;
}
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #222222;
    z-index: 99999;
    height: 100%;
}
#status {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    padding: 0;
}


textarea {
  width: 300px;
  }
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <link rel="stylesheet" href="../css/pontare.css">
</head>
<body style="margin:0;">
  <table class="greenTable" id="myTable" width="80%">
    <tbody>

  <tr><td colspan="7"><form id="edit" action="" method="post" hidden >

<label for="btd1" ></label >
   <input type="text" name="Nume Proiect" id="btd1" value="" placeholder="Nume Proiect *">

  <label for="btd2" ></label >
<select type="text" name="Task Select" id="btd2" required>
<option value="" disabled selected hidden>Task Select *</option>
<option value="Librarie">Librarie</option>
<option value="Delete">Delete</option>
<option value="Marcaj">Marcaj</option>
<option value="Mancare">Mancare</option>
<option value="Suc">Suc</option>
</select>

<label for="btd3" ></label >
<input type="number" name="Volum" id="btd3" value="" placeholder="Volum *">

  <label for="btd4" ></label >
<select type="text" name="Unitati" id="btd4" required>
<option value="" disabled selected hidden>Unitati *</option>
<option value="ore">Ore</option>
<option value="caractere">Caractere</option>
<option value="imagini">Imagini</option>
<option value="tabele">Tabele</option>
<option value="fisiere">Fisiere</option>
</select>

  <label for="btd5" ></label >
      <input type="number" name="Ore Lucrate" id="btd5" value="" placeholder="Ore Lucrate *">

<label for="btd6" ></label >
<textarea id="btd6" name="comments" id="comments" style="font-family:sans-serif;font-size:1.2em;" placeholder="Comment">
</textarea>
</form >
</td>
</tr>
  <tr>
    <td width="30%">Nume Proiect</td>
<td width="10%">Task Select</td>
  <td width="10%">Volum</td>
  <td width="10%">Unitati</td>
  <td width="10%">Ore Lucrate</td>
  <td class="buttons" width="10%" colspan="2"><button class="add" >Add</button >
  <button class="hide" >Hide</button >
  </td>
  </tr>
  </tbody>
  </table >
</body>
</html>

I edited my Codes so I can give you guys a full see of my html/js/css

So where the switch is disable try delete the message and activate the switch. After you do that the Add button will not work anymore Thats my problem with the switch

Upvotes: 0

Views: 258

Answers (1)

ScaisEdge
ScaisEdge

Reputation: 133400

You should use strin propely quoted in case 

switch (inputName) {
    case 'Nume Proiect':
          message += 'Message for password ' + inputName + '\n';
          break;
    case 'Task Select':
          message += 'Message for email ' + inputName + '\n';
          break;
    case 'Volum':
          message += 'Message for email ' + inputName + '\n';
          break;
    case 'Unitati':
          message += 'Message for email ' + inputName + '\n';
          break;
    case 'Ore Lucrate':
          message += 'Message for email ' + inputName + '\n';
          break;

    }

and capital case too as suggested by Matt

Upvotes: 1

Related Questions