Still a beginner in using jquery, and its about making a calculator, I know this is a big problem because it still has an error in it and there's a lot of code to be done to make it work, so what I need is adding, subtracting, multiplying, and dividing two numbers, and upon pressing the operator the first number that was pressed wouldn't be gone rather it will be gone and be change after pressing for the second number. It would also be a big thanks if y'all could help me my problem. Thanks a lot.
$(document).ready(function() {
var number = "";
$(".numeric").click(function() {
var num = $(this).val();
number = number + "" + num;
$("#container").val(number);
});
$(".clear").click(function() {
$("#container").val("");
number = "";
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Sample Calculator</title>
</head>
<body>
<input type="text" id="container" placeholder="" readOnly="readOnly" />
<br /><br />
<table border="1" cellpadding="3">
<tbody>
<tr>
<td>
<input type="button" class="numeric" value="7" />
</td>
<td>
<input type="button" class="numeric" value="8" />
</td>
<td>
<input type="button" class="numeric" value="9" />
</td>
<td>
<input type="button" class="operation" value="+" />
</td>
</tr>
<tr>
<td>
<input type="button" class="numeric" value="4" />
</td>
<td>
<input type="button" class="numeric" value="5" />
</td>
<td>
<input type="button" class="numeric" value="6" />
</td>
<td>
<input type="button" class="operation" value="-" />
</td>
</tr>
<tr>
<td>
<input type="button" class="numeric" value="1" />
</td>
<td>
<input type="button" class="numeric" value="2" />
</td>
<td>
<input type="button" class="numeric" value="3" />
</td>
<td>
<input type="button" class="operation" value="*" />
</td>
</tr>
<tr>
<td>
<input type="button" class="numeric" value="0" />
</td>
<td>
<input type="button" class="operation" value="=" />
</td>
<td>
<input type="button" class="operation" value="/" />
</td>
<td>
<input type="button" class="clear" value="Clear" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
Related
Trying to make a small numberpad as shown in the picture attached as apart of my Javascript practice. Loooking for help/tips that could possibly fix or pit me in the right direction in to getting a working Numpad that has a working reset function. Without the reset function code, im able to input numbers into my textbox. but the additional code lose functionality.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Q4</title>
</head>
<body>
<form action="" method="" name="Q4">
<table cellpadding="3" cellspacing="3" border="0">
<td colspan="3"><input id=Key type="text" value="" maxlength="10" name="Key" /></td>
<tr>
<td> <input type="button" value="1" id="1" " style="font-size:25px;" onClick=addNumber(this); /></td>
<td> <input type="button" value="2" id="2" " style="font-size:25px;" onClick=addNumber(this); /></td>
<td> <input type="button" value="3" id="3" " style="font-size:25px;" onClick=addNumber(this); /></td>
</tr>
<tr>
<td><input type="button" value="4" id="4" " style="font-size:25px;" onClick=addNumber(this); /></td>
<td><input type="button" value="5" id="5" " style="font-size:25px;" onClick=addNumber(this); /></td>
<td><input type="button" value="6" id="6" " style="font-size:25px;" onClick=addNumber(this); /></td>
</tr>
<tr>
<td><input type="button" value="7" id="7" " style="font-size:25px;" onClick=addNumber(this); /></td>
<td><input type="button" value="8" id="8" " style="font-size:25px;" onClick=addNumber(this); /></td>
<td><input type="button" value="9" id="9" " style="font-size:25px;" onClick=addNumber(this); /></td>
</tr>
<tr>
<td colspan="3"><input type="button" value="Reset" id="Reset" onClick=clearNumber(this); /> </td>
</tr>
</table>
<script>
function addNumber(element){
document.getElementById('Key').value = document.getElementById('Key').value+element.value;
}
function Reset {
document.getElementById("Key").reset();
}
</script>
</body>
</html>
Try this..
function addNumber(element) {
document.getElementById('Key').value = document.getElementById('Key').value+element.value;
}
function clearNumber() {
document.getElementById("Key").value = "";
}
<table cellpadding="3" cellspacing="3" border="0">
<tr>
<td colspan="3">
<input id="Key" type="text" value="" maxlength="10" name="Key" />
</td>
</tr>
<tr>
<td>
<input type="button" value="1" id="1" style="font-size:25px;" onclick="addNumber(this)" />
</td>
<td>
<input type="button" value="2" id="2" style="font-size:25px;" onclick="addNumber(this)" />
</td>
<td>
<input type="button" value="3" id="3" style="font-size:25px;" onclick="addNumber(this)" />
</td>
</tr>
<tr>
<td>
<input type="button" value="4" id="4" style="font-size:25px;" onclick="addNumber(this)" />
</td>
<td>
<input type="button" value="5" id="5" style="font-size:25px;" onclick="addNumber(this)" />
</td>
<td>
<input type="button" value="6" id="6" style="font-size:25px;" onclick="addNumber(this)" />
</td>
</tr>
<tr>
<td>
<input type="button" value="7" id="7" style="font-size:25px;" onclick="addNumber(this)" />
</td>
<td>
<input type="button" value="8" id="8" style="font-size:25px;" onclick="addNumber(this)" />
</td>
<td>
<input type="button" value="9" id="9" style="font-size:25px;" onclick="addNumber(this)" />
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="Reset" id="Reset" onclick="clearNumber(this)" />
</td>
</tr>
</table>
I made a data sheet similar to excel with columns and rows and a buttons to add rows and column if needed I want to make a cell or div disabled (for read-only) that display the summation of numbers inside cells in a specific column, the problem is how I select that column and every newly added cell to that column
here is the code of the datasheet
<div class="content-container">
<div class="search">
<button class="table_btn" id="addrow">
Add Row
</button>
<button class="table_btn" id="addcol">
Add Column
</button>
<button class="table_btn" id="sav">
Save
</button>
<button class="table_btn" id="edi">
Edit
</button>
<input type="text" class="form-control" id="search-box" />
</div>
<table
class="table table-striped table-dark table-hover table-bordered"
id="mtable"
>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
<tr>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
<td>
<input class="tableTd" type="text" />
</td>
</tr>
</tbody>
</table>
</div>
https://jsfiddle.net/georgesteven1/5dsn7ouc/22/
If I get it right, you are looking for a selector for all elements in a certain column. If so you can use the ":nth-child(n)" CSS selector.
Let's say you need to select the second column:
$("tr td:nth-child(2)").addClass("selected");
Hope it helps.
I want to check if a table has any duplicated column in rows. If a table has, an alert to be displayed that without adding database of. Then I want to unplug duplicated data from the table. How can I do that? I'm waiting for your help!
This is my table has duplicated class A:
This is my table html code.
<table id="tblSeatInfo">
<thead>
<tr>
<td>
Class
</td>
<td>
Given Seat
</td>
<td>
Adult Buying Price
</td>
<td>
Adult Selling Price
</td>
<td>
Child Buying Price
</td>
<td>
Child Selling Price
</td>
<td>
Infant Buying Price
</td>
<td>
Infant Selling Price
</td>
</tr>
</thead>
<tbody>
<tr class="tr-notremove">
<td>
<input class="form-control" type="text" name="class" />
</td>
<td>
<input class="form-control seat" type="text" name="givenseat" />
</td>
<td>
<input class="form-control decimal" type="text" name="adultbuyingprice" />
</td>
<td>
<input class="form-control decimal" type="text" name="adultprice" />
</td>
<td>
<input class="form-control decimal" type="text" name="childbuyingprice" />
</td>
<td>
<input class="form-control decimal" type="text" name="childprice" />
</td>
<td>
<input class="form-control decimal" type="text" name="infantbuyingprice" />
</td>
<td>
<input class="form-control decimal" type="text" name="infantprice" />
</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-md btn-success btn-addnewseat">Add</button>
<button type="button" class="btn btn-md btn-warning btn-removenewseat">Remove</button>
</div>
</td>
</tr>
</tbody>
</table>
Try something like this
$('[name="class"]').on('input',function(){
var value = $(this).val();
$('[name="class"]').not(this).each(function(){
if($(this).val() == value) {
alert('duplicate content');
}
})
});
demo: https://jsfiddle.net/r3oq636w/1/
I am trying to make a little form in which the users select their gender. I have a script that creates a new line for additional users but the problem is that as this code clones the previous element and the radio button name attribute is the same as before making the gender selection name unusable, is there a way to change the radio buttons name when adding a new row so the group will be different to the previous groups name.
function addRow() {
var radName = document.getElementsByName('gender2').value;
var table = document.getElementById('myTable');
var row = document.getElementById('lastRow');
var newRow = row.cloneNode(true);
table.appendChild(newRow);
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<div id="tableDiv">
<table id="myTable">
<tr id="firstRow">
<td>Surname</td>
<td>Forname(S)</td>
<td>Age</td>
<td>City</td>
<td class="gender">Male</td>
<td class="gender">Female</td>
</tr>
<tr>
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender0" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender0" type="radio" value="Female" />
</td>
</tr>
<tr>
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender1" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender1" type="radio" value="Female" />
</td>
</tr>
<tr id="lastRow">
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender2" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender2" type="radio" value="Female" />
</td>
</tr>
</table>
</div>
<input type="submit" id="buttonOne" onclick="addRow()" value="+" />
</div>
</body>
</html>
Assign name property for child elements of cloned node.
Use querySelector to select element.
Use querySelectorAll('#myTable tr') selector to get the length of the tr elements.
function addRow() {
var radName = document.getElementsByName('gender2').value;
var table = document.getElementById('myTable');
var row = document.getElementById('lastRow');
var newRow = row.cloneNode(true);
var index = --document.querySelectorAll('#myTable tr').length;
newRow.querySelector('[value="Male"]').name = 'gender' + index;
newRow.querySelector('[value="Male"]').name = 'gender' + index;
table.appendChild(newRow);
}
<div id="tableDiv">
<table id="myTable">
<tr id="firstRow">
<td>Surname</td>
<td>Forname(S)</td>
<td>Age</td>
<td>City</td>
<td class="gender">Male</td>
<td class="gender">Female</td>
</tr>
<tr>
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender0" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender0" type="radio" value="Female" />
</td>
</tr>
<tr>
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender1" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender1" type="radio" value="Female" />
</td>
</tr>
<tr id="lastRow">
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender2" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender2" type="radio" value="Female" />
</td>
</tr>
</table>
</div>
<input type="submit" id="buttonOne" onclick="addRow()" value="+" />
You should not try to clone the line and make changes to names.
You should generate the HTML code for the row and hanlding the correct name directly.
Here is an example snippet:
var idx = 0;
window.onload = addRow;
function addRow() {
var rowHTML = '<td><input placeholder="Surname" /></td><td><input placeholder="Forename(S)" /></td><td><input placeholder="Age" /></td><td><input placeholder="City" /></td><td><input class="gender" name="gender' + idx + '" type="radio" value="Male" /></td><td><input class="gender" name="gender' + idx + '" type="radio" value="Female" /></td>';
var row = document.createElement("tr");
row.innerHTML = rowHTML;
var table = document.getElementById('myTable');
table.appendChild(row);
idx++;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<div id="tableDiv">
<table id="myTable">
<tr id="firstRow">
<td>Surname</td>
<td>Forname(S)</td>
<td>Age</td>
<td>City</td>
<td class="gender">Male</td>
<td class="gender">Female</td>
</tr>
</table>
<input type="submit" id="buttonOne" onclick="addRow()" value="+" />
</div>
</body>
</html>
Done this with JQuery, Try this:
function addRow() {
var table = $('#myTable');
var newRow = $("#myTable tr:last").clone()
var name = $(newRow).find("input[type='radio']").attr("name");
var newVal = parseInt(name.match(/\d+/)) + 1;
$(newRow).find("input[type='radio']").attr("name", 'gender' + newVal);
table.append(newRow);
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<div id="tableDiv">
<table id="myTable">
<tr id="firstRow">
<td>Surname</td>
<td>Forname(S)</td>
<td>Age</td>
<td>City</td>
<td class="gender">Male</td>
<td class="gender">Female</td>
</tr>
<tr>
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender0" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender0" type="radio" value="Female" />
</td>
</tr>
<tr>
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender1" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender1" type="radio" value="Female" />
</td>
</tr>
<tr id="lastRow">
<td>
<input placeholder="Surname" />
</td>
<td>
<input placeholder="Forename(S)" />
</td>
<td>
<input placeholder="Age" />
</td>
<td>
<input placeholder="City" />
</td>
<td>
<input class="gender" name="gender2" type="radio" value="Male" />
</td>
<td>
<input class="gender" name="gender2" type="radio" value="Female" />
</td>
</tr>
</table>
</div>
<input type="submit" id="buttonOne" onclick="addRow()" value="+" />
</div>
</body>
</html>
I'm trying to write a kiosk-style web app for iOS. I've created some buttons, which their only purpose is to insert some text into an input box, and everything seems fine. The problem is it's very very slow on the iPad itself.
Here's the function:
function addCode(key1){
var input1 = document.getElementById("productid");
input1.value += key1;
}
This is the input box:
<input type="text" id="productid" name="productid" placeholder="Product ID" readonly="true">
And here's how I call the function:
<input type="button" value="GEN" onclick="addCode('GEN');">
I'm not sure what's the problem here. As I've said, this works fine on my computer, but not on the iPad...
Thanks in Advance!
EDIT: Here's the complete code for the page
<!DOCTYPE HTML>
<html>
<head>
<title>Find a Product</title>
<link rel="stylesheet" href="fonts/mainfont.css">
<link rel="stylesheet" href="css/main.css">
<meta charset="UTF-8">
<script src="js/jquery.js"></script>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="user-scalable=no, width=device-width" />
<script>
function addCode(key1){
var input1 = document.getElementById("productid");
input1.value += key1;
}
function emptyCode(){
var input2 = document.getElementById("productid");
input2.value = "";
}
</script>
</head>
<body oncontextmenu="return false">
<div align="center">
<div id="find">
<form action="find_product.php" method="POST">
<fieldset>
<p><input type="text" id="productid" name="productid" placeholder="Product ID" readonly="true"></p>
<br />
<table border="0" width="320px">
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="GEN" onclick="addCode('GEN');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="TST" onclick="addCode('TST');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="CSU" onclick="addCode('CSU');"></p>
</td>
</tr>
<!--EndRow-->
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="1" onclick="addCode('1');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="2" onclick="addCode('2');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="3" onclick="addCode('3');"></p>
</td>
</tr>
<!--EndRow-->
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="4" onclick="addCode('4');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="5" onclick="addCode('5');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="6" onclick="addCode('6');"></p>
</td>
</tr>
<!--EndRow-->
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="7" onclick="addCode('7');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="8" onclick="addCode('8');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="9" onclick="addCode('9');"></p>
</td>
</tr>
<!--EndRow-->
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="Clear" onclick="emptyCode();"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="0" onclick="addCode('0');"></p>
</td>
<td width="10px"></td>
<td width="100px">
</td>
</tr>
<!--EndRow-->
</table>
<br />
<p><input type="submit" value="Find"></p>
</fieldset>
</form>
</div>
<!-- end login -->
</div>
</body>
</html>