We Keep Coding

I want the table to have hidden input fields which appear only when I click on them

My table has text input fields, which should be hidden when the page load and appear when I click on them. This is what I have tried and it isn't working. But the reverse is working, i can make the field disappear when i click on it.
<div class="container-fluid">
<table id="sampleGrid" class="table">
<thead>
<tr>
<th>Fat (Z10006)</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="col-xs-8" name="Fat" ng-if="visible" ng-click="hidden()"></td>
</tr>
</tbody>
</table>
</div>
var sampleApp =angular.module('sampleApp',[]);
sampleApp.controller('gridController',function($scope,$http) {
$scope.visible = false;
$scope.hidden = function () {
$scope.visible = true;
};
})

try ng-show instead of ng-if
<input type="text" class="col-xs-8" name="Fat" ng-show="visible" ng-click="hidden()">

A small change was to be made. ng-click should be inside the so that the cell would appear on click.
<td ng-click="hidden()"><input type="text" class="col-xs-8" name="Fat" ng-if="visible"></td>

remove link when checkbox is checked

I have a table with Datatable plugin, and I did the part when the user clicks on the row (tr) that he will be redirected to that link. but i don't want the user to be redirected to the link when he clicks the checkbox on the row.
Here is the html:
<tr class="odd gradeX">
<td class="number_elem_lang">
<label class='with-square-checkbox2-mylist-details'>
<input type='checkbox'>
<span></span>
</label>
</td>
<td class=""> ID022ox</td>
<td class="list-name">First Lipsum List</td>
<td class=""> 22 Candidates</td>
<td class="">01 Apr 2016</td>
<td></td>
</tr>
Here is my javascript code for redirecting the user to the link when it's clicked:
$('#sample_1').on( 'click', 'tr', function() {
var $a = $(this).find('a').last();
if ( $a.length )
window.location = $a.attr('href');
} );
So i don't want to redirect the user when the checkbox is clicked, pls help :)
Thank you

You can use e.target to check what element the user clicked on. In the example below, we check if the user clicked on an input of type checkbox. Then we don't run the rest of the function.
$('table').on( 'click', 'tr', function(e) {
var target = $(e.target);
debugger; // For debugging purposes.
if (target.is('input[type=checkbox]')) {
// Do not continue if it's an input
console.log('no redirect');
return true;
}
console.log('do redirect');
var $a = $(this).find('a').last();
if ( $a.length )
window.location = $a.attr('href');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="odd gradeX">
<td class="number_elem_lang">
<label class='with-square-checkbox2-mylist-details'>
<input type='checkbox'>
<span></span>
</label>
</td>
<td class=""> ID022ox</td>
<td class="list-name">First Lipsum List</td>
<td class=""> 22 Candidates</td>
<td class="">01 Apr 2016</td>
<td></td>
</tr>
</table>
Update:
In this particular case the checkbox had some custom styling, which led to e.target being a span. The solution is to change the condition to $(e.target).is('span'), or even better set a class on the span and use $(e.target).hasClass('my-custom-checkbox').

Here you go - Add this to cancel the event when the checkbox is clicked:
$("tr input:checkbox").click(function(event) {
event.stopPropagation();
// Do something
});
Here is a working Demo
$('table').on('click', 'tr', function() {
var $a = $(this).find('a').last();
if ($a.length)
alert("fsfsd");
});
$("tr input:checkbox").click(function(event) {
event.stopPropagation();
// Do something
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="odd gradeX">
<td class="number_elem_lang">
<label class='with-square-checkbox2-mylist-details'>
<input type='checkbox'>
<span></span>
</label>
</td>
<td class="">ID022ox</td>
<td class="list-name">First Lipsum List</td>
<td class="">22 Candidates</td>
<td class="">01 Apr 2016</td>
<td>
</td>
</tr>
</table>

Use the if construction
if ($('input.checkbox_check').is(':checked')) {
...
}

Add a class named yourradio in your radio button and add this javascript
<label class='with-square-checkbox2-mylist-details'>
<input type='checkbox' class="yourradio">
<span></span>
</label>
<script>
$('.yourradio').on('click', function(){
return false;
});

dynamic input with js/jquery

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

unable to set focus on textboxes using javascript

I am trying to set focus on textboxes 1 by 1 on tab press but its not working for me.
here is code that i have tried:
function showstep2() {
document.getElementById('step2').style.visibility = 'visible'
document.getElementById('prevOrdQuan').focus();
}
function showstep3() {
document.getElementById('step3').style.visibility = 'visible';
document.getElementById('takeOutAmt').focus();
}
function showstep4() {
document.getElementById('step4').style.visibility = 'visible';
document.getElementById('compsPerWeek').focus();
}
HTML:
<table style="width: 100%;" align="left">
<tbody>
<tr>
<td>How many TakeOut Orders do You do each week?</td>
<td><input tabindex="1" type="text" name="prevOrdQuan" id="prevOrdQuan" size="6" value="7" onblur=" doCalc1(); showstep2();" /></td>
</tr>
</tbody>
</table>
<table id="step2" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How many NEW TakeOut Orders do You expect each week? (15% Expected)</td>
<td><input tabindex="2" type="text" name="newOrdQuan" id="newOrdQuan" size="6" value="7" onblur="doCalc(); showstep3();" /></td>
</tr>
</tbody>
</table>
<table id="step3" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How Much Is Your Average Takeout Order?</td>
<td><input tabindex="3" type="text" name="takeOutAmt" id="takeOutAmt" size="6" value="20" onblur="doCalc2(); showstep4();" /></td>
</tr>
</tbody>
</table>
There are 3 textboxes,for 1st textbox i have set focus on load like this:
function setFocus() {
document.getElementById("prevOrdQuan").focus();
}
It sets the focus for 1st textbox.after pressing tab on 1st textbox it displays 2nd textbox but focus is not set on second textbox.
This is only the problem that i need to resolve.

You have a problem in the showstep2 function, you are focussing the element with the id prevOrdQuan which is the first text box. I think you wanted to focus newOrdQuan.
So change
document.getElementById('prevOrdQuan').focus();
to
document.getElementById('newOrdQuan').focus();
And it should work.
EDIT
You also need anything focusable below your text boxes (an additional input etc). Otherwise if you press tab on the first (and only) textbox, the browser focusses the address bar and thus firing the onblur event on both next textboxes and displaying both at the same time.
Here is an example of what I mean: http://jsfiddle.net/24TK4/1/
2nd EDIT
I think this is an elegant solution of the problem: http://jsfiddle.net/24TK4/2/
Look at the link at the and of the HTML code, it just displays an invisible link.

Get value from a textarea and place it in a new textarea with some added texts

I have a textarea (txtar1) that will be filled up by a user with HTML codes.
I have a 'generate' button;
When the 'generate button is clicked, the value from txtar1 will be placed in a another textarea (txtar2). But with some added css code.
here's what I've done:
HTML:
<table>
<tr>
<td valign="top"><label>Enter HTML Code : </label></td>
<td><textarea id="htmlcode_txtarea"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="button" name="" id="submit_btn" value="Generate" /></td>
</tr>
<tr id="new_html">
<td><label>New HTML</label></td>
<td><textarea id="new_htmlcode_txtarea"></textarea></td>
</tr>
javascript/jquery:
jQuery('#submit_btn').click(function(){
var newVal = jQuery('#htmlcode_txtarea').attr('value');
var addVal = "#af-form-1031686823 .af-element{float:left;}" +
"#af-form-1031686823 .af-clear{display:none}:" +
"#af-form-1031686823 .af-body input.text{width: 150px!important;margin0right:15px!important}" +
"#af-form-1031686823 .buttonContainer{margin-top:-6px!important}";
jQuery('#new_html').show();
jQuery('#new_htmlcode_txtarea').attr('value',newVal);
});
What should i Do?

easy wato achieve is make use of .val() function
$("#textarea2").val($("#textarea1").val() + "text to append ")