dynamic input with js/jquery - javascript

Im trying to build a dynamic input box. When I click on the numpad I want it to show on the box, and limit that box to one number. When it reaches its limit the next input would go to the next box.
I dont want the user to able to click and manually enter a value on the input box, i just want them to use the numpad. Is the input box a good solution to this?
Here's my code:
https://jsfiddle.net/Piq9117/dwxt928c/
This code puts the number that I clicked on all the boxes. How do I write it so it will go to the other box when the box already has a number?
$(function () {
var $passBox = $('input[type="text"]');
var $numpad = $('.numpad');
$numpad.on('click', function () {
var $numValue = $(this).text();
$passBox.val($numValue);
})
});

DEMO
<div class="passcode">
<div class="passcodeBox">
<ul>
<li><input type="text" readonly></li>
<li><input type="text" readonly></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<table>
<tbody>
<tr>
<td class="numpad">1</td>
<td class="numpad">2</td>
<td class="numpad">3</td>
</tr>
<tr>
<td class="numpad">4</td>
<td class="numpad">5</td>
<td class="numpad">6</td>
</tr>
<tr>
<td class="numpad">7</td>
<td class="numpad">8</td>
<td class="numpad">9</td>
</tr>
<tr>
<td></td>
<td class="numpad">0</td>
</tr>
</tbody>
</table>
</div>
Add attr readonly in input

Make your input fields as readonly, then replace the following script, you ll get result as you expected.
$(function() {
var $numpad = $('.numpad');
var n=0;
$numpad.on('click', function() {
var $passBox = $('input[type="text"]:eq('+n+')');
n=n+1;
if(n>1)
n=0;
var $numValue = $(this).text();
$passBox.val($numValue);
});
});
DEMO

Related

Adding a table stops js show/hide from working

I have a show/hide function on a web page where I want to improve the layout, but when I added a new table to put in headers for the data, the show/hide stopped working.
A snippet of the original code is:
<table id="cart-list">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
<tr class="cl-group">
<td class="cl-sh" title="Show [+] or Hide [-] this lists' products"> </td>
<td colspan="2">Cart List One:
<table id="cl-chg-1" class="cl-other cl-chg">
<tr>
<td>List Name:</td>
<td><input type="text" name="group_name[1]" value="Cart List One" maxlength="255" /></td>
</tr>
<tr>
<td>List Comments:</td>
<td><input type="text" name="group_comments[1]" maxlength="255" /></td>
</tr>
<tr>
<td><button type="button" onclick="cancelGroupEdit();">Cancel</button></td>
<td><button type="submit" name="change" value="1">Go</button></td>
</tr>
</table>
</td>
</tr>
</div>
<tr>
<td>Stuff Here</td>
</tr>
<tr>
<td>Stuff Here</td>
</tr>
</table>
And the js used is
var groups = document.getElementsByClassName("cl-sh");
if (groups) {
for (var i = 0; i < groups.length; i++) {
groups[i].onclick = function() {
this.classList.toggle('cl-a');
var productsDisplay = '';
if (this.classList.contains('cl-a')) {
productsDisplay = 'none';
}
var nextRow = this.parentNode.nextElementSibling;
while (nextRow) {
if (nextRow.classList.contains('cl-group')) {
break;
}
nextRow.style.display = productsDisplay;
nextRow = nextRow.nextElementSibling;
}
}
}
}
A fiddle can be seen here: https://jsfiddle.net/65j1nvpq/1/
The broken function with the additional table code added can be seen here: https://jsfiddle.net/cmgqeLf7/
I don't really understand why having an additional table is breaking the function.
Any suggestions on a fix for this?
What does your JS function do when you click on the +/- cell?
Firstly, it toggles whether the clicked cell contains the cl-a class. Then, it runs through all remaining rows in the same table, showing or hiding them as appropriate, until it finds a row with the class cl-group, or hits the end of the rows in that table.
Note the word same in the last paragraph.
In your first fiddle, you have one table. In your second fiddle, you have two, and the rows you wish to toggle the display of are not in the same table as the toggle button. This is why they are not showing/hiding when you click the toggle button.
I'm not sure exactly what your requirements for showing/hiding rows are, so I'm not going to propose a fix. However, understanding what the problem is may help you to find a fix for yourself.

Javascript Addition calculator

enter image description here
how do i create this in html.
when a user enter a value in textbox and click on Addition button then textbox became empty and addition button be disabled. then user enter second value and click on = button that show the result in textbox.
It's really hard to understand what are you exactly want based on question, however I've prepared a basic fiddle for you that should fix your problem or hopefully gives you and idea:
https://jsfiddle.net/Lzg5rfgr/
<table>
<tr>
<td>
<input type="number" id="userNumber">
</td>
</tr>
<tr>
<td>
<button id="plus">+</button>
</td>
<td>
<span id="enteredNumber"></span>
</td>
</tr>
<tr>
<td>=</td>
<td>
<span id="result">0</span>
</td>
</tr>
</table>
javascript using jquery:
$("#plus").on('click', function(){
var num = parseInt($("#userNumber").val()); // get the number
$("#result").html(num + parseInt( $("#result").html()) );
$("#userNumber").val(null); // empty the input box
$("#enteredNumber").html(num);
})

How to get the label value from table row when row number is known, using Javascript

I have a table like this-
<table>
<tr>
<td>
<label id="lbl1" value="1">Label1</label>
<td>
<td>
Some data
</td>
<td>
Some data
</td>
</tr>
<tr>
<td>
<label id="lbl2" value="1">Label1</label>
<td>
<td>
Some data
</td>
<td>
Some data
</td>
</tr>
<tr>
<td>
<label id="lbl3" value="1">Label1</label>
<td>
<td>
Some data
</td>
<td>
Some data
</td>
</tr>
</table>
My problem is that I want to alert the value of label present in the second row's first column. Assume that I don't know label id means I know its pattern like lbl1,lbl2 or lbl3.. but not exactly what it is in the second row.
If you are okay to use jQuery use this fiddle
var label = $('table tr:eq(1) td:eq(0)').find("label").attr("value")
alert(label);
You can use something like next
var labels = document.getElementsByTagName("label");
for (var i=0; i<labels.length; i++)
if (labels[i].id && labels[i].id.indexOf("lbl") == 0){
//you have found the label in the first row
}
You Can get label value by class name
$("label[class=lblclass]").each(function() {var result= $(this).val(); });
(OR)
You can get the Particular Label Value by ID
function getlabel_value(){var result=$('#lbl1').val();}

Trying to make an html checkbox which adds a number to an output field

I am trying to create a table in which when I check a box, if the image displayed is yes.jpg, a number gets added in the output box at the bottom of the column. If not, no number gets added. There are three columns, and each checkbox affects three images and so three output boxes. Here is my code.
<html>
<head>
<script>
function onSelect(rowId)
{
var row = document.getElementById(rowId);
var checkBox = row.getElementsByTagName("checkRow")[0];
var outputRow = document.getElementById("outputRow");
var totalRow1 = outputRow.getElementById("total1");
var totalRow2 = outputRow.getElementById("total2");
var totalRow3 = outputRow.getElementById("total3");
//If box is checked, check images. If they are yes, edit boxes.
if (checkBox.checked)
if (row.getElementById.("image1").src.indexOf(yes.png) > -1)
{
totalRow1.innerHTML = "dfd";
}
else {
//checkBox =
}
}
/*function onCheck()
{
var total1 = document.getElementById("total1");
window.alert("sometext");
total1.innerHTML = "dfd";
} */
</script>
</head>
<body>
<table border="1">
<tr> <!-- Table Header -->
<td>
Checkbox
</td>
<td>
Items
</td>
<td>
Area 1
</td>
<td>
Area 2
</td>
<td>
Area 3
</td>
</tr>
<tr id="checkRow"> <!-- Row 1 -->
<td>
<form>
<input type="checkbox" name="Row1" value="Row1" onclick="onCheck();">
</form>
</td>
<td>
Item
</td>
<td id="image1">
<img src="yes.png" alt="Needed">
</td>
<td id="image2">
<img src="yes.png" alt="Needed">
</td>
<td id="image3">
<img src="no.png" alt="Needed">
</td>
</tr>
<tr id="outputRow"> <!-- Table Bottom -->
<td>
<!--Empty-->
</td>
<td>
Summation
</td>
<td id="total1">
Area 1
</td >
<td id="total2">
Area 2
</td>
<td id= "total3">
Area 3
</td>
</tr>
</table>
</body>
Currently, I am just trying to edit the output text on one of the output boxes (as seen in my onCheck() method). However, even this does not seem to work. I added an alert, which does not happen either. What am I doing wrong?
there are so many things, you are doing wrong,
firstly, you have called onCheck() function upon click on your checkbox, but there is not such javascript function. you have onSelect(id) instead.
second, you are trying to .getElementById your TDs as those ids, 'image1' and all are ids of tds and not imgs
and then you are accessing .src for them, so anyway that is wrong.
Improvements:
change your input checkbox to this:
<input type="checkbox" name="Row1" value="Row1" onchange="onCheck(this);">
what you are doing is that, you are passing reference of your input in the function onCheck(this);
2. now change your markup like this:
<td>
<form>
<input type="checkbox" name="Row1" value="Row1" onchange="onCheck(this);">
</form>
</td>
<td>
Item
</td>
<td >
<img id="image1" src="yes.png" alt="Needed">
</td>
<td >
<img id="image2" src="yes.png" alt="Needed">
</td>
<td >
<img id="image3" src="no.png" alt="Needed">
</td>
</tr>
all i've done is to provide IDs to the right elements i.e. to the IMGs, instead of TDs;
thirdly, make your onCheck() like this:
function onCheck(cb)
{
if(cb.checked===true)
{
if(document.getElementById('image1').src.toString().indexOf('yes')>0){
document.getElementById('total1').innerHTML='555';
}
else
{
document.getElementById('total1').innerHTML='No';
}
if(document.getElementById('image2').src.toString().indexOf('yes')>0){
document.getElementById('total2').innerHTML='555';
}
else
{
document.getElementById('total2').innerHTML='No';
}
if(document.getElementById('image3').src.toString().indexOf('yes')>0){
document.getElementById('total3').innerHTML='555';
}
else
{
document.getElementById('total3').innerHTML='No';
}
}
}
so basically onCheck is pretty much same as your one.
now , see this working fiddle, i've made for you, it works. ofcourse I hate the way you are doing it all. This all can be done in a much easier way.
also, learn about jQuery, it makes life easy.

edit in place

I have a table like this
<tr>
<td>No.</td>
<td>Username</td>
<td>Password</td>
<td>Valid Until</td>
<td>Delete</td>
<td>Edit</td>
</tr>
<tr>
<td>1</td>
<td id="1">
<div class="1u" style="display: none;">Username</div>
<input type="text" class="inputTxt" value="Username" style="display: block;"/>
</td>
<td id="1">
<div class="1p" style="display: none;">Password</div>
<input type="text" class="inputTxt" value="Password" style="display: block;"/></td>
<td>18 Jul 09</td>
<td><button value="1" class="deleteThis">x</button></td>
<td class="editRow">Edit</td>
</tr>
When edit is clicked i run this function this replaces the text with input field, so what i want is to cancel this back to text when somewhere else is click instead of save.
$('.editRow').click(function() {
var row = $(this).parent('tr');
row.find('.1u').slideUp('fast');
row.find('.1p').slideUp('fast');
row.find('.inputTxt').slideDown('fast');
}).blur(function() {
row.find('.inputTxt').slideUp('fast');
row.find('.1u').slideDown('fast');
row.find('.1p').slideDown('fast');
});
with this function text changes to input fields but input fields doesnt change back to text when i click somewhere else.
Thank You.
There's a nice plugin for this
Just edited my function because the plugin didn't suite well for my application
$('.editRow').live('click', function() {
var row = $(this).parent('td').parent('tr');
row.find('.1u').slideUp('fast');
row.find('.1p').slideUp('fast');
row.find('.inputTxt').slideDown('fast');
$(this).parent('td').empty().append('<a href=# class=cancel>Cancel</a> / <a href=# class=save>Save</a>');
});
Your blur is applying on the button td.editRow but not applying on the input fields. I think you should separate the code and it should work.
$('.editRow').click(function() {
var row = $(this).parent('tr');
row.find('.1u').slideUp('fast');
row.find('.1p').slideUp('fast');
row.find('.inputTxt')
.slideDown('fast')
.blur(function() {
row.find('.inputTxt').slideUp('fast');
row.find('.1u').slideDown('fast');
row.find('.1p').slideDown('fast');
});
});

Categories