Andrei Ref
Reputation: 53
How to Add a Switcher Jquery?
I try to be as specific as a can with what my question is.
What I am trying to accomplish here is to form an Alert Box for the different type of Inputs that I have. I want all the Inputs to be alerted in the same box not different. What I tried is to create a switcher for my Message but it seems something is wrong with it. After I am adding the Switch Function to the code, my ADD button won't work anymore.
I've posted my full code here HTML/Jquery/CSS. If you look in it you will find the area with /* ---- */. Il post everything so you guys can see the actual problem.
First, the Table will work properly cuz il leave the Switcher in the Blockade. If you guys put the message above it in the blockade and let the switcher on. You will notice that the add button will not function anymore.
Please help me resolve this someone. Thank you very much for assisting me :)
$(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>What I want is for each Input to make another message to appear for example.
Task Select: You didn't select any Task or something like this :)
Thanks to everyone :)
Il be here to communicate any more Info you guys might need to help me out
Upvotes: 0
Views: 152
Answers (1)
Patrick Mlr
Reputation: 2965
I can't see the problem here. If I enable your switch, it works.
See the snippet 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 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;
switch (inputName) {
case 'Nume Proiect':
message += 'Please enter the ' + inputName + '\n';
break;
case 'Task Select':
message += 'task enter ' + inputName + '\n';
break;
case 'Volum':
message += 'please volum ' + inputName + '\n';
break;
case 'Unitati':
message += 'lorem ipsum ' + inputName + '\n';
break;
case 'Ore Lucrate':
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();
}/* 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>Upvotes: 1
Related Questions
- Toggle switch css
- How to change toggle switch with JavaScript
- How to create a DIV style switcher?
- How make switcher without toggleClass
- How to create switching button in jQuery
- How can I add html on/off flip switch to jquery?
- JavaScript style switcher in Wordpress
- Building a switcher feature
- jquery div switch
- Switch information using jQuery