the problem here is i don't need input field required when i remove required the table still empty and another problem when i enter (not valid character)
also the table data will be deleted
i need the input field not required and when click add it adds a new row
var myInput = document.getElementById("myInput")
myTable = document.getElementById("myTable")
i = 1
num = 1
tabledata = myTable.innerHTML;
function arr() {
if(myInput.value!=""){
if(/^[a-z]+$/i.test(myInput.value)){
if (num % 2 == 0) {
myTable.innerHTML = myTable.innerHTML + '<tr style="background:#ff8000"><td>' + i + '</td><td>' + myInput.value + "</td></tr>";
myInput.value = "";
i++;
} else {
myTable.innerHTML = myTable.innerHTML + '<tr style="background:#ffb366"><td>' + i + '</td><td>' + myInput.value + "</td></tr>";
myInput.value = "";
i++;
}
num++;
}
else {
alert("Please Enter A Valid Charceter");
}
}else{
alert("This Field Is Reqiured Please Enter Your Name")
}};
function res() {
myTable.innerHTML = "<tr> <th>Id</th> <th>Name</th> </tr>";
i = 1;
num = 1;
}
<h1>Enter Your Name</h1>
<form>
<input type="text" id="myInput" required/>
<button onclick="arr()">Add</button>
</form>
<table id="myTable">
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</table>
<button onclick ="res()">Reset</button>
I didn't fully understand what you need, but I see here a little bit flaw:
When you click the "Add" button, the form is submitting, so you need to break this.
Try it:
<style>
#myTable tr {
background: #FF8000
}
#myTable tr:nth-child(odd){
background: #FFB366
}
</style>
<h1>Enter Your Name</h1>
<form id="myForm">
<input type="text" id="myInput" required />
<input type="submit" />
</form>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody id="myTable"></tbody>
</table>
<button id="myButton">Reset</button>
<script>
(function(){
"use strict";
var
form = document.getElementById("myForm"),
input = document.getElementById("myInput"),
table = document.getElementById("myTable"),
reset = document.getElementById("myButton");
form.addEventListener("submit", add, true);
function add(event){
event.preventDefault();
if( /^[a-z]+$/i.test(myInput.value) )
table.innerHTML += '<tr><td>' + (table.children.length + 1) + '</td><td>' + input.value + '</td></tr>';
return input.value = '';
}
function reset(){
table.innerHTML = '';
}
})()
</script>
Related
Here is how I am adding Bank names rows and the which will be added to it
How can i subtract from total row in real time > onkeyup > by creating input using jquery and putting value in it? please help. Actually I want my total sale to be deposited to different banks thats why I want it
<form method="GET" action="savebank.php" class="">
<table class="table table-bordered" id='TextBoxesGroup'>
<tr>
<th>Total Amount</th>
<th id="total" value="<?php echo $tsp; ?>">Rs. <?php echo $tsp; ?></th>
</tr>
<tr id="TextBoxDiv1">
<!-- INPUT BOXES WILL BE HERE-->
</tr>
</table>
<button type="submit" class="btn btn-lg btn-success btn-block" id="ttwo" style="display:none;">Submit</button>
</form>
<!-- Below is jquery -->
<script type="text/javascript">
$(document).ready(function() {
var counter = 2;
$("#addmore").click(function() {
if (counter > 30) {
alert("No more textboxes allowed");
return false;
}
var newTextBoxDiv = $(document.createElement('tr'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<td><input type="text" name="bank[]" required class="form-control" placeholder="Bank Name" id="textbox' + counter + '"></td>' +
'<td><input type="number" name="amnt[]" required class="form-control textboz" placeholder="Amount" id="textbox' + counter + '"></td>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("ttwo").css("display", "block");
$("#remove").click(function() {
if (counter == 1) {
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function() {
var msg = '';
for (i = 1; i < counter; i++) {
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
When i try writing in textboxes the second time the window shows undefined, and if I try writing in the textboxes for the third time, it shows nothing.
I have a table that i wish to append a tablerow to. So when a button is clicked it will append a tr to a tbody, it works on the first click, but not on the second or third.
var expName = document.getElementById("expName");
var button = document.getElementById("button");
var amount = document.getElementById("amount");
var tbody = document.getElementById("tbody");
var date = document.getElementById("calendar");
var clear = document.getElementById("clear");
//print the tabledata
button.addEventListener("click", function() {
expName = expName.value;
amount = amount.value;
date = date.value;
var tr = document.createElement("tr");
tr.innerHTML += "<td>" + expName + "</td>" + "<td>" + amount + "</td>" + "<td>" + date + "</td>";
//set the value back to the original
tbody.appendChild(tr);
document.getElementById("expName").value = "";
document.getElementById("amount").value = "";
document.getElementById("calendar").value = "";
//delte all table rows
clear.addEventListener("click", function() {
window.location.reload();
})
<h1>Expense Tracker</h1>
<b>Item Name: </b><input type="text" id="expName">
<br/>
<br/>
<b>Amount: </b><input type="text" id="amount">
<b>Date: </b><input type="date" id="calendar">
<br/>
<br/>
<button id="button">add expense</button>
<button id="clear">Clear List</button>
<br/>
<br/>
<table id="table">
<thead>
<th>Name</th>
<th>Amount</th>
<th>Date</th>
</thead>
<tbody id="tbody"></tbody>
</table>
I am unable to send the value of javascript variale 'userResults' to .html.
I want to display the contents of the form in tabular form.
Can you tell me a workaround for this?
This is in index.html
<form onSubmit="App.retrieveTransaction();" class="form2">
<h1 class="text-center">Retrieve transactions</h1>
<div class="form-group">
<label for="enterregnoselect">Reg No:</label><input id ="enterregnoselect" class="form-control" type ="text" required/>
</div>
<button type="submit" class="btn btn-primary" >Retrieve</button>
<hr />
<table class="table">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Name</th>
<th scope="col">Item</th>
<th scope="col">Credit</th>
<th scope="col">Debit</th>
<th scope="col">Price</th>
<th scope="col">Qty</th>
</tr>
</thead>
<tbody id="userResults">
</tbody>
</table>
<hr/>
</form>
This is the retrieveTransaction function in app.js called on submitting the form in index.html
retrieveTransaction: function() {
var transactionInstance;
var enteredregno = $('#enterregnoselect').val();
// var enteredregno = "0015/55";
App.contracts.Payment.deployed().then(function(instance) {
transactionInstance = instance;
return transactionInstance.transactionCount();
}).then(function(transactionCount) {
var userResults = $("#userResults");
userResults.empty();
for (var i = 1; i <= transactionCount; i++) {
transactionInstance.transactions(i).then(function(transaction) {
var date = transaction[0];
var regno = transaction[1];
var name = transaction[2];
var item = transaction[3];
var credit = transaction[4];
var debit = transaction[5];
var price = transaction[6];
var qty = transaction[7];
if(enteredregno == regno) {
var userTemplate = "<tr><th>" + date + "</th><td>" + name + "</td><td>" + item + "</td></tr>" + credit + "</th><td>" + debit + "</td><td>" + price + "</td></tr>" + qty + "</td></tr>";
userResults.append(userTemplate);
}
});
}
});
I want to add new data to the main table using the checkbox option, but the data added is not the same as the selected data. this is my code ...
<table border="1" id="table2">
<tr>
<td>Raka</td>
<input type="hidden" id="fname" value="Raka">
<td>Gilbert</td>
<input type="hidden" id="lname" value="Gilbert">
<td><input type="checkbox" name="chk"></td>
</tr>
<tr>
<td>Achyar</td>
<input type="hidden" id="fname" value="Achyar">
<td>Lucas</td>
<input type="hidden" id="lname" value="Lucas">
<td><input type="checkbox" name="chk"></td>
</tr>
</table>
<script>
$(document).on('click', '#Add', function() {
$("table").find('input[name="chk"]').each(function(){
if($(this).is(":checked")){
var fname = $('#fname').val();
var lname = $('#lname').val();
var newData = '<tr>'+
'<td>'+fname+'</td>'+
'<td>'+lname+'</td>'+
'<tr>';
$('table').append(newData);
}
});
})
</script>
You need to change your id="fname" to class="fname" and get the input value closest to checkbox. Currently you are getting data from the first inputs as they have the same id's.
function valueExists(value) {
if (!value) {
return true;
}
let exists = false;
$("#main-table").find('tr').each(function() {
let fname = $(this).find("td:nth-child(1)").text(),
lname = $(this).find("td:nth-child(2)").text();
const fullName = `${fname}${lname}`;
if (value.toLowerCase() === fullName.toLowerCase()) {
exists = true;
}
});
return exists;
}
$(document).on('click', '#add', function() {
$("table").find('input[name="chk"]').each(function(e) {
if ($(this).is(":checked")) {
var fname = $(this).parents('tr').find('.fname').val();
var lname = $(this).parents('tr').find('.lname').val();
if (valueExists(`${fname}${lname}`)) return;
var newData = '<tr>' +
'<td>' + fname + '</td>' +
'<td>' + lname + '</td>' +
'<tr>';
$('#main-table').append(newData);
}
});
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Main Table</h1>
<table class="table table-dark" border="1" id="main-table">
</table>
<hr>
<h1>Second table</h1>
<table border="1" id="table2">
<tr>
<td class="name">Raka</td>
<input type="hidden" class="fname" value="Raka">
<td class="last">Gilbert</td>
<input type="hidden" class="lname" value="Gilbert">
<td><input class="check" type="checkbox" name="chk"></td>
</tr>
<tr>
<td class="name">Achyar</td>
<input type="hidden" class="fname" value="Achyar">
<td class="last">Lucas</td>
<input type="hidden" class="lname" value="Lucas">
<td><input class="check" type="checkbox" name="chk"></td>
</tr>
</table>
<button type="button" id="add" name="button">Add</button>
Try this. I have used plain javascript
document.addEventListener("click", function() {
[...document.querySelectorAll("input[name='chk']")].forEach(data => {
console.log(data);
if (data.checked) {
const fname = document.getElementById("fname").value;
const lname = document.getElementById("lname").value;
const newData = `<tr><td>${ fname }</td><td>${ lname }</td</tr>`;
// "<tr>" + "<td>" + fname + "</td>" + "<td>" + lname + "</td>" + "<tr>";
document.getElementById("table2").innerHTML += newData;
}
});
});
Hope was useful. If any flaws please update
Here is a neater solution, using 2 tables as requested, without hidden inputs and a better use of 'tables' and 'trs' in jquery
$(function(){
$("#btnAdd").click(function(){
let table1 = $("#table1");
table2 = $("#table2");
$.each(table2.find('tr'), function(i, tr){
tr = $(tr);
let new_tr = $('<tr>');
if (tr.find("td input").is(":checked")) {
let fname = tr.find("td:nth-child(1)").html(),
lname = tr.find("td:nth-child(2)").html();
new_tr.append(
'<td>' + fname + '</td>' +
'<td>' + lname + '</td>' +
'<td><input type="checkbox" name="chk"></td>'
);
table1.append(new_tr)
}
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
TABLE 1
<table border="1" id="table1">
</table>
<hr/>
TABLE 2
<table border="1" id="table2">
<tr>
<td>Raka</td>
<td>Gilbert</td>
<td><input type="checkbox" name="chk"></td>
</tr>
<tr>
<td>Achyar</td>
<td>Lucas</td>
<td><input type="checkbox" name="chk"></td>
</tr>
</table>
<button type="button" id="btnAdd">Add</button>
<script>
var itemsAdded = Array();
function moveNumbers(text) {
var i = itemsAdded.indexOf(text)
if ( i >= 0) {
itemsAdded.splice(i,1);
} else {
itemsAdded.push(text);
}
document.getElementById("result1").value=itemsAdded.join(" ");
if ( i >= 0) {
} else{
itemsAdded.push(text);
}
document.getElementById("result2").value=itemsAdded.join(" ");
}
$(function() {
for (i=0;i<10;i++) {
console.log(i);
$("body").append("<input type='checkbox' name='add' value='" + i + "'
onclick='moveNumbers(this.value)'/> Checkbox" + i + "<br/>");
}
});
</script>
<table width="95%" height="24" border="1" align="center">
<tr>
<th><h2>Selected Image 5x7</h2></th>
<tr>
<td>
<textarea rows="4" cols="70" name="add" id="result1" style="background:#B0D2D7;
width:100%;overflow:auto;resize:none"
readonly></textarea>
</td>
</tr>
<tr><tr>
<th><h2>Selected Image 6x8</h2></th>
<tr>
<td>
<textarea rows="4" cols="70" name="add" id="result2" style="background:#B0D2D7;
width:100%;overflow:auto;resize:none"
readonly></textarea>
</td></tr>
</table>
Hi all, new at this so I apologize if it's rather messy.
I have this working but when I check the boxes the value's do appear in the text areas, but text it self is all over the place. Also need the check boxes, when unchecked to remove the text from the text area. Any ideas would be great! Hopes this makes sense...
Cheers.
It doesn't have to be so messy as you describe. Besides, I don't know how it is working for you as the structure of html is clearly broken in the current state.
Following is a bit of updated code, which I believe is equivalent to what you are trying to achieve with your snippet. DEMO
JS:
var itemsAdded = Array();
function moveNumbers() {
var text = this.value;
var i = itemsAdded.indexOf(text)
if (i >= 0) itemsAdded.splice(i, 1);
else itemsAdded.push(text);
document.getElementById("result1").value = itemsAdded.join(" ");
if (i < 0) itemsAdded.push(text);
document.getElementById("result2").value = itemsAdded.join(" ");
}
$(function () {
for (i = 0; i < 10; i++)
$("<div>Checkbox" + i + "</div>").appendTo(document.body)
.prepend($("<input type='checkbox' name='add'/>")
.val(i).click(moveNumbers));
});
HTML:
<table width="95%" height="24" border="1" align="center">
<tr>
<th>
<h2>Selected Image 5x7</h2>
</th>
</tr>
<tr>
<td>
<textarea rows="4" cols="70" name="add" id="result1" readonly></textarea>
</td>
</tr>
<tr>
<th>
<h2>Selected Image 6x8</h2>
</th>
</tr>
<tr>
<td>
<textarea rows="4" cols="70" name="add" id="result2" readonly></textarea>
</td>
</tr>
</table>
CSS:
textarea {
background:#B0D2D7;
width:100%;
overflow:auto;
resize:none
}
Try this http://jsfiddle.net/KCmbm/2/
NOTE: if you are not going to use special tags like [b]: use commented code(but it will replace all occurences of supplied text);
Javscript
var itemsAdded = Array();
function moveNumbers(text) {
console.log(text);
var addedText = '[b' + text + ']' + text + '[/b]';
$('#result1').val($('#result1').val() + addedText);
//$('#result1').val($('#result1').val() + text);
console.log(addedText);
}
function removeText(text){
//$('#result1').val($('#result1').val().replace(new RegExp(text, 'g'), ''));
$('#result1').val($('#result1').val().replace('[b' + text + ']' + text + '[/b]', ''));
}
$(document).ready(function(){
$('.chkAdd').on('change', function(){
$(this).prop('checked') ? moveNumbers($(this).val()) : removeText($(this).val());
});
})
You are not attaching the on click event correctly. They don't even get fired. See this example below. Once the checkboxes are added, attach the click event. You can get the value of the element from this as shown below. JS fiddle
var itemsAdded = Array();
function moveNumbers() {
var i = itemsAdded.indexOf(this.value)
if (i >= 0) {
itemsAdded.splice(i, 1);
} else {
itemsAdded.push(this.value);
}
document.getElementById("result1").value = itemsAdded.join(" ");
if (i < 0) {
itemsAdded.push(this.value);
}
document.getElementById("result2").value = itemsAdded.join(" ");
}
$(function () {
for (i = 0; i < 10; i++) {
console.log(i);
$("body").append("<input type='checkbox' name='add' value='" + i + "'/> Checkbox" + i + "<br/>");
}
$("input:checkbox").click(moveNumbers);
});