Loop through unknown amount of spans - JavaScript MVC - javascript

I have these functions:
$(".Read-Showing-Comment-Cancel").live('click', function (e) {
var guid = $(this).data("guid");
e.preventDefault();
var f = $('#comments-form-' + guid).slideUp();
$('comments-text-' + guid).empty();
$('comments-text-' + guid).value = "";
$(this).find('.comments-form-' + guid).hide();
$('comments-sendlink-' + guid).show();
});
$('.showComments').unbind('click').click(function (event) {
$('.ListingDisplayOptions').hide();
$(this).find('.comments-form-' + showGuid).show();
var showGuid = $(this).attr('rel');
loadShowingsComments(showGuid);
$(this).attr('id', 'comments-sendlink-' + showGuid);
event.preventDefault();
});
function loadShowingsComments(guid) {
var commentTextArea = "#comments-form-" + guid;
var commentDisplay = ".spanComments" + guid;
var curComment = $(commentDisplay).text();
var element = "#comments-form-" + guid;
$(element).slideDown();
}
<script>
function showComments() {
var comments = document.querySelectorAll(".spanComments");
for (var i = 0; i < comments.length; i++) {
comments[i].innerHTML = "This is comment #" + i;
}
}
</script>
View Comments
Those functions should grab the information from my controller (it's hooked up correctly. I've stepped through that and it has populated the right information) and place them in my span:
<tr class="p_la" id="comments-form-#currentShowing.ShowingGUID" style="display:none;">
<td colspan="4" style="border-right:5px solid #DDDDDD;">
<form action="" method="post">
<span class="spanComments" cols="100" rows="5">#string.Format("{0} / {1}", #currentShowing.Comments.DateAdded, #currentShowing.Comments.CommentsValue)</span>
<br />
Close
</form>
</td>
</tr>
Unfortunately, when I click on my hyperlink, it only populates the first span with the first span's information. Works great for the first span but when you click on the hyperlink in the second, third, fourth, etc item, they will only open up the first span with the first span's information.
The code should populate each successive span with its own information.

My JQuery was off. It needed this to be changed:
$(".Read-Showing-Comment-Cancel").live('click', function (e) {
var guid = $(this).data("guid");
e.preventDefault();
var f = $('#comments-form-' + guid).slideUp();
$('comments-text-' + guid).empty();
$('comments-text-' + guid).value = "";
$(this).parent("form").parent("td").parent("tr").hide();
$('comments-sendlink-' + guid).show();
});
$('.showComments').unbind('click').click(function (event) {
$('.ListingDisplayOptions').hide();
var showGuid = $(this).attr('rel');
$(this).parent("td").parent("tr").next('#comments-form-' + showGuid).show();
$(this).attr('id', 'comments-sendlink-' + showGuid);
event.preventDefault();
});

Related

How to create a button to add URL links in the form

Does anyone know how to add like a link button into a form? For example, a user clicks a + button and they can add an URL. They can add another URL if they wish and remove any links if required. Would be good to have validation for links as well.
I know for validation of the URL I can use "Check if a JavaScript string is a URL", but will need something that will validate all links if multiple have been added.
The best way to explain what I am trying to do is by looking at "Can I insert a hyperlink in my form?" in the form builder.
I just want to add links, and I don't need to display text or anything like that.
Is this what are you looking for?
Your question is a bit unclear.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
let i = 0;
let ii = 0;
function isURL(s) {
var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*#)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%#!\-\/]))?/
return regexp.test(s);
}
function removeLink(id, iid) {
console.log(id);
console.log(iid);
$(id).remove();
$(iid).remove();
return false;
}
function addLink(id) {
var input = prompt("Enter the link", "https://www.example.com");
var valid = isURL(input);
console.log(valid);
if(valid) {
var element = '<br><a id="_' + i + '" href="' + input + '">Link</a>';
console.log(element);
$(id).append(element);
let d = "'#_" + i + "'";
let dd = "'#__" + ii + "'";
let elment = ' <button type="button" id="__' + ii + '" onclick="removeLink(' + d + ', ' + dd + ')">Remove it!</button>';
$(id).append(elment);
console.log(elment);
i = i + 1;
ii = ii + 1;
}
else {
alert("The URL that you have entred is wrong.");
}
return false;
}
</script>
</head>
<body>
<form id="_form" method="POST">
<button type="button" onclick="addLink('#_form')">Add link</button>
</form>
</body>
</html>
Try it here: https://codepen.io/marchmello/pen/ZEGjMyR?editors=1000
What about DOM - not using longer form, so using URL as link text too.
function addUrl(e) {
var f = e.form;
var a = document.createElement("A");
a.href = e.value; // link URL
a.textContent = e.value; // link text
f.appendChild(a);
var x = document.createElement("INPUT");
x.type = "button";
x.value = "X";
x.onclick = remove;
f.appendChild(x);
f.appendChild(document.createElement("BR"));
}
function remove() {
var el = this, // button
parent = el.parentNode, // a must for remove
a = el.previousElementSibling; // anchor
if(el.nextSibling.tagName == 'BR') parent.removeChild(el.nextSibling);
parent.removeChild(el);
parent.removeChild(a);
}
<form>
<input name="url" size="50">
<input type="button" value="Add" onclick="addUrl(this.form.url)"><br>
</form>

How to make the what happening box like twitter in our site?

I am doing this by taking the cursor position from the content-editable box. When a new tag is created the cursor comes before the tag but it should be after the tag. Also i am not able to merge/split the tag.
Please give some idea how can i do this.
Visit (https://plnkr.co/edit/DSHKEcOnBXi54KyiMpaT?p=preview) !
What i want here, after pressing the enter key for new tag the cursor should be at the end of tag while it is not and also the merging/spliting functionality like the twitter what's happening box.
Thanks in advance.
Now this code is working fr me
$scope.myIndexValue = "5";
$scope.searchTag = function(term) {
var tagList = [];
angular.forEach($rootScope.tags, function(item) {
if (item.name.toUpperCase().indexOf(term.toUpperCase()) >= 0) {
tagList.push(item);
}
});
$scope.tag = tagList;
return $q.when(tagList);
};
$scope.getTagText = function(item) {
// note item.label is sent when the typedText wasn't found
return '<a>#<i>' + (item.name || item.label) + '</i></a> ';
};
$scope.resetDemo = function() {
// finally enter content that will raise a menu after everything is set up
$timeout(function() {
//var html = "Tell us something about this or add a macro like brb, omw, (smile)";
var htmlContent = $element.find('#htmlContent');
var html = "";
if (htmlContent) {
var ngHtmlContent = angular.element(htmlContent);
ngHtmlContent.html(html);
ngHtmlContent.scope().htmlContent = html;
// select right after the #
mentioUtil.selectElement(null, htmlContent, [0], 8);
ngHtmlContent.scope().$apply();
}
}, 0);
};
HTML :
<div class="share_tags fs-12">
<div class="row margin_row">
<div class="col-md-12 no_padding">
<div class="form-group">
<div contenteditable="true" mentio
mentio-typed-term="typedTerm"
mentio-macros="macros"
mentio-require-leading-space="true"
mentio-select-not-found="true"
class="editor tag" placeholder="Tell Us something about This"
mentio-id="'htmlContent'"
id="htmlContent"
ng-model="htmlContent">
</div>
</div>
<mentio-menu
mentio-for="'htmlContent'"
mentio-trigger-char="'#'"
mentio-items="tag"
mentio-template-url="/people-mentions.tpl"
mentio-search="searchTag(term)"
mentio-select="getTagText(item)"
></mentio-menu>
</div>
</div>
<script type="text/ng-template" id="/people-mentions.tpl">
<ul class="list-group user-search">
<li mentio-menu-item="tag" ng-repeat="tag in items" class="list-group-item">
<span ng-bind-html="tag.name | mentioHighlight:typedTerm:'menu-highlighted' | unsafe"></span>
</li>
</ul>
</script>
</div>
Reference link
http://jeff-collins.github.io/ment.io/?utm_source=angular-js.in&utm_medium=website&utm_campaign=content-curation#/
is working fine for me.
This is not working perfectly but for the time being i am using this code.
In app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function ($scope, $filter, $element) {
var tags;
$scope.allTags = ['Tag1', 'PrivateTag', 'Xtag', 'PublicTag1', 'newTag', 'socialTag', 'cricketTag'];
var replacedTag = '';
var replacedIndex;
var data;
$scope.log = function (name) {
$scope.tags = [];
$('ul').html(' ');
console.log("here", $('ul'))
var data = $('textarea').val();
replacedIndex = data.indexOf(replacedTag)
console.log('test', name, replacedTag, replacedIndex, data);
var replacedData = data.substring(0, replacedIndex - 1) + ' #' + name + data.substr(replacedIndex + replacedTag.length);
$('textarea').val(replacedData);
$('textarea').keyup();
}
f = $scope.log;
$('textarea').on('keyup', function (e) {
function getIndexOf(arr, val) {
var l = arr.length,
k = 0;
for (k = 0; k < l; k = k + 1) {
if (arr[k] === val) {
return k;
}
}
return false;
}
$('ul').html('');
$scope.tags = [];
tags = $(this).val().match(/#\S+/g);
console.log("---tags-", tags)
var a = data = $(this).val();
if (tags && tags.length) {
tags.forEach(function (tag,index) {
var index1 = getIndexOf(tags, tag);
console.log("index----",index, index1,tag)
replacedTag = tag;
$scope.tags = tag ? $filter('filter')($scope.allTags, tag.substr(1)) : [];
if ($scope.tags && $scope.tags.length && (e.keyCode && e.keCode != 32)) {
$scope.tags.forEach(function (tag1, index) {
$('ul').append('<li>' + '<a href="javascript:;" onclick=f("' + tag1 + '");>'
+ tag1 + '</a>' + '</li>')
})
}
else {
$('ul').html(' ');
}
if(index == index1) {
var b = a.substring(0, a.indexOf(tag) - 1) + ' <a>' + tag + '</a> ' + a.substr(a.indexOf(tag) + tag.length);
}
else {
var b = a.substring(0, a.lastIndexOf(tag) - 1) + ' <a>' + tag + '</a> ' + a.substr(a.lastIndexOf(tag) + tag.length);
}
a = b;
$('p').html(b)
})
}
})
});
HTML
<br>
<br>
<p></p>
<textarea rows="2" cols="80"></textarea>
<div>
<ul>
</ul>
</div>
For live demo Visit
https://plnkr.co/edit/SD9eouQa5yrViwxQD6yN?p=preview
i am also looking for the better answer.
I assume you're talking about gathering hash tags from a string of sorts, the snippet below demonstrates how you can build an array of #hashed tags without modifying the cursor position.
It uses a simple regular expression to match tags found in the textarea and then pushes them to an array.
var tags;
$('textarea').on('keyup', function(){
tags = $(this).val().match(/#\S+/g)
$('ul').html('');
tags.forEach(function(tag){
$('ul').append('<li>' + tag + '</li>')
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
<ul></ul>

how to get dynamic id of dynamically created textbox in jquery

i want to perform keyup event via textbox id, and all textbox are dynamically created with onclick button event. for this i have to make 20 keyup function. if i use 20 keyup function then my code will become too lengthy and complex. instead of this i want to use a common function for all textbox. can anybody suggest me how to do it..thanks
here is what i am doing to solve it:
<div class="input_fields_wrap">
<button class="add_field_button">Add Booking</button></div>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
var counter = 2;
$(".add_field_button").click(function() {
if (counter > 10) {
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<div id="target"><label>Textbox #' + counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="firsttextbox' + counter + '" value="" > <input type="text" name="textbox' + counter +
'" id="secondtextbox' + counter + '" value="" > Remove<input type="text" id="box' + counter + '" value="">sum</div>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
function check(a, b) {
var first = a;
var second = b;
var temp = temp;
var novalue = "";
result = parseInt(first) + parseInt(second);
if (!isNaN(result)) {
return result;
} else {
return novalue;
}
}
$(this).on("keyup", "#firsttextbox2", function(e) {
e.preventDefault();
var a = document.getElementById('firsttextbox2').value;
var b = document.getElementById('secondtextbox2').value;
var number = 2;
result = check(a, b);
document.getElementById('box2').value = result;
});
$(this).on("keyup", "#firsttextbox3", function(e) {
var number = 3;
e.preventDefault();
var a = document.getElementById('firsttextbox3').value;
var b = document.getElementById('secondtextbox3').value;
result = check(a, b);
document.getElementById('box3').value = result;
});
$(this).on("keyup", "#firsttextbox4", function(e) {
var number = 4;
e.preventDefault();
var a = document.getElementById('firsttextbox4').value;
var b = document.getElementById('secondtextbox4').value;
result = check(a, b);
final = document.getElementById('box4').value = result;
});
$(this).on("keyup", "#secondtextbox2", function(e) {
e.preventDefault();
var a = document.getElementById('firsttextbox2').value;
var b = document.getElementById('secondtextbox2').value;
result = check(a, b);
document.getElementById('box2').value = result;
});
$(this).on("keyup", "#secondtextbox3", function(e) {
e.preventDefault();
var a = document.getElementById('firsttextbox3').value;
var b = document.getElementById('secondtextbox3').value;
result = check(a, b);
document.getElementById('box3').value = result;
});
$(this).on("keyup", "#secondtextbox4", function(e) {
e.preventDefault();
var a = document.getElementById('firsttextbox4').value;
var b = document.getElementById('secondtextbox4').value;
result = check(a, b);
document.getElementById('box4').value = result;
});
$(this).on("click", "#remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('#target').remove();
counter--;
});
});
</script>
See the snippet below to see how you can make this implementation more modular and useable. The trick is to think: what do I want to do? I want to be able to add multiple inputs and add their value, printing the result in another input.
It comes down to using classes - since we are going to use the same kind of thing for every row. Then apply something that works for all classes. No IDs whatsoever! You can even use the name property of the input that contains the value you want to save. Using the [] in that property will even pass you back a nice array when POSTING!
I know this looks like a daunting lot, but remove my comments and the number of lines reduces dramatically and this kind of code is almost infinitely extendable and reusable.
But have a look, this works and its simple and - most of all - it's DRY (don't repeat yourself 0 once you do, re-evaluate as there should be a better way!)!
Update
You could also use a <ol>as a wrapper and then add an <li> to this every time, so you get automatic counting of boxes in the front end without any effort from your end! Actually, thats so nice for this that I have changed my implementation.
var add = $('#add_boxes');
var all = $('#boxes');
var amountOfInputs = 2;
var maximumBoxes = 10;
add.click(function(event){
// create a limit
if($(".box").length >= maximumBoxes){
alert("You cannot have more than 10 boxes!");
return;
}
var listItem = $('<li class="box"></li>');
// we will add 2 boxes here, but we can modify this in the amountOfBoxes value
for(var i = 0; i < amountOfInputs; i++){
listItem.append('<input type="text" class="input" />');
}
listItem.append('<input type="text" class="output" name="value" />');
// Lets add a link to remove this group as well, with a removeGroup class
listItem.append('<input type="button" value="Remove" class="removeGroup" />')
listItem.appendTo(all);
});
// This will tie in ANY input you add to the page. I have added them with the class `input`, but you can use any class you want, as long as you target it correctly.
$(document).on("keyup", "input.input", function(event){
// Get the group
var group = $(this).parent();
// Get the children (all that arent the .output input)
var children = group.children("input:not(.output)");
// Get the input where you want to print the output
var output = group.children(".output");
// Set a value
var value = 0;
// Here we will run through every input and add its value
children.each(function(){
// Add the value of every box. If parseInt fails, add 0.
value += parseInt(this.value) || 0;
});
// Print the output value
output.val(value);
});
// Lets implement your remove field option by removing the groups parent div on click
$(document).on("click", ".removeGroup", function(event){
event.preventDefault();
$(this).parent(".box").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ol id="boxes">
</ol>
<input type="button" value="Add a row" id="add_boxes" />
You can target all your textboxes, present or future, whatever their number, with a simple function like this :
$(document).on("keyup", "input[type=text]", function(){
var $textbox = $(this);
console.log($textbox.val());
})
$("button").click(function(){
$("#container").append('<input type="text" /><br>');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<input type="text" /><br>
<input type="text" /><br>
<input type="text" /><br>
</div>
<button>Create one more</button>
You don't need complicated generated IDs, not necessarily a class (except if you have other input[type=text] you don't want to conflict with). And you don't need to duplicate your code and write 20 times the same function. Ever. If you're duplicating code, you're doing wrong.
Add classes "a" and "b" to the textboxes and "box" to the box. Then add data-idx attribute with the index (unused!?). Finally register the event handlers:
$('.a').on('keyup', function(e){
e.preventDefault();
var $this = $(this)
var $p = $this.parent()
var a= this.value;
var b= $p.find('.b').val()
var number =$this.data('idx') //unused!?
var result = check(a,b)
$p.find('.box').val(result)
})
$('.b').on('keyup', function(e){
e.preventDefault();
var $this = $(this)
var $p = $this.parent()
var a= $p.find('.a').val()
var b= this.value
var result = check(a,b)
$p.find('.box').val(result)
})
Or a general one:
$('.a,.b').on('keyup', function(e){
e.preventDefault();
var $p = $(this).parent()
var a= $p.find('.a').val()
var b= $p.find('.b').val()
var result = check(a,b)
$p.find('.box').val(result)
})
You can assign a class to all textboxes on which you want to perform keyup event and than using this class you can attach the event on elements which have that class. Here is an example
var html="";
for (var i = 0; i < 20; i++)
{
html += "<input type='text' id='txt" + i + "' class='someClass' />";
}
$("#testDiv").html(html);
Attach keyup event on elements which have class someClass.
$(".someClass").keyup(function () {
alert($(this).attr("id"));
});
A little helper to combine with your favorite answer:
var uid = function () {
var id = 0;
return function () {
return ++id;
};
}();
Usage:
uid(); // 1
uid(); // 2
uid(); // 3
Providing a code-snippet which may give you some hint:
$(".add_field_button").click(function ()
{
if (counter > 10)
{
alert("Only 10 textboxes allow");
return false;
}
var txtBoxDiv = $("<div id='TextBoxDiv"+counter+"' style='float:left;width:10%; position:relative; margin-left:5px;' align='center'></div>");
//creating the risk weight
var txtBox1 = $('<input />',
{
'id' : 'fst_textbox_' + counter,
'name' : 'textbox'+counter,
'type' : 'text',
'class' : 'input_field',
'onClick' : 'txtBoxFun(this,'+counter+')'
});
var txtBox2 = $('<input />',
{
'id' : 'sec_textbox_' + counter,
'name' : 'textbox'+counter,
'type' : 'text',
'class' : 'input_field',
'onClick' : 'txtBoxFun(this,'+counter+')'
});
var txtBox3 = $('<input />',
{
'id' : 'sum_textbox_' + counter,
'name' : 'textbox'+counter,
'type' : 'text',
'class' : 'input_field',
});
$(txtBoxDiv).append(txtBox1).append(txtBox2);
$(txtBoxDiv).append(txtBox3);
});
function txtBoxFun(obj, count)
{
var idGet = $(obj).attr('id');
var idArr = new Array();
idArr = idGet.split("_");
if(idArr[0] == "fst")
{
var sumTxt = parseInt(parseInt($(obj).val()) + parseInt($("#sec_textbox_"+count).val()));
}
else if(idArr[0] == "sec")
{
var sumTxt = parseInt(parseInt($(obj).val()) + parseInt($("#fst_textbox_"+count).val()));
}
$("#sum_textbox_"+count).val(sumTxt);
}

JavaScript adding and removing <tr> with EventListener and jQuery

Apologies for the very messy code. I'm confused by where my $().ready(function() and individual functions should be placed.
What works:
1) $(".calc").change(function() - this updates a span and divs with data selected from a table populated from a database
2) When the page is loaded, before the $(".calc").change(function() is called the function addRow(e) manages to write "hey" to the console log, but fails with ReferenceError: Can't find variable: tbody addRow (furniture-product.php, line 396). Once the $(".calc").change(function() is run, the console log no longer works
What does not work:
1) function addRow(e)
2) function removeRow(e)
I'm certain it's a case of having something small in the wrong place, but I have tried moving parts of the script around but with no success.
$().ready(function () {
"use strict";
var tbody = document.getElementById("the-tbody");
document.getElementById("btn-add").addEventListener("click", addRow, false);
tbody.addEventListener("click", removeRow, false);
var radios = $('input[type=radio]');
radios.on('change', function () {
radios.each(function () {
var radio = $(this);
radio.closest('.article-option')[radio.is(':checked') ? 'addClass' : 'removeClass']('highlight');
});
});
$(".calc").change(function () {
calctotal()
});
});
function addRow(e) {
console.log("hey");
var product_id = $('input[name="product_name"]').val();
var product_price = $('input[name="product_price"]').val();
var row = document.createElement('tr');
row.innerHTML = '<td><input type="hidden" name="item_id[]" value="' + product_id + '"><p>' + name + '</p><input type="hidden" name="price[]" value="' + product_price + '" class="price">£<span id="amount" class="amount">0</span> <span class="remove">[x]</span></td>';
tbody.appendChild(row);
update_amounts();
}
function removeRow(e) {
var elm;
for (elm = e.target; elm !== this; elm = elm.parentNode) {
if (/\bremove\b/.test(elm.className)) {
removeElement(elm.parentNode);
e.stopPropagation();
return;
update_amounts();
}
}
}
function calctotal() {
var total = 0;
var radios = $('input[type=radio]');
radios.each(function () {
var radio = $(this);
radio.closest('.article-option')[radio.is(':checked') ? 'addClass' : 'removeClass']('highlight');
});
$(".calc:checked").each(function () {
var a = this.value.split(",");
total += parseFloat(a[0]);
name = (a[1]);
image = (a[2]);
curtainid = (a[3]);
curtaindesc = (a[4]);
$("span.img").html('<div class="row curtain-img"><img src="images/furniture/' + image + '" class="img-responsive img-rounded" style="border: 5px solid #5f4865"></div>');
$("div#product_name").html('<input type="hidden" name="product_name" value="' + curtainid + '">' + name + '');
$("div#product_desc").html('' + curtaindesc + '');
$("div#product_add").html('<input type="button" id="btn-add" value="Add">');
$("div#product_price").html('<input type="hidden" name="product_price" value="' + total.toFixed(2) + '"><strong>£' + total.toFixed(2) + '</strong>');
});
}
Quite simply the HTML is
<table id="myTable">
<tbody id="the-tbody"></tbody>
</table>
<input type="button" id="btn-add" value="Add">
JS Fiddle: http://jsfiddle.net/pw25p3qt/
There's a number of issues with the code - too many to list.
Here's a working version, with some of the original code stripped out, leaving just the raw add/remove functionality.
HTML
<table id="myTable" border>
<thead>
<tr><th>Product</th><th>Unit Price</th><th>Quantity</th><th>Total Price</th><th>Remove</th></tr>
</thead>
<tbody id="the-tbody"></tbody>
<tr><td id="totalCell" colspan="5">Total: £<span id="total"></span></td></tr>
</table>
<input type="button" id="btn-add" value="Add" />
Javascript
$(function() {
"use strict";
$("#btn-add").on('click', addRow);
var tbody = $("#the-tbody").on('click', '.remove', removeRow);//delegate click handling to the tbody element.
calc();
function calc() {
var sum = 0;
$('tr.product').each(function() {
var qty = Number($(this).find('.qty').text()),
price = Number($(this).find('.price').text()),
amount = (qty * price).toFixed(2);
$(this).find('.amount').text(amount);
sum += Number(amount);
});
$('#total').text(sum.toFixed(2));
}
function addRow(e) {
$('<tr class="product"><td>Sample Product</td><td>£<span class="price">1.00</span></td><td><span class="qty">1</span></td><td>£<span class="amount"></span></td><td><span class="remove">[x]</span></td></tr>').appendTo(tbody);
calc();
}
function removeRow(e) {
$(this).closest("tr").remove();
calc();
}
});
DEMO
Note how the Remove buttons' click action is delegated to the tbody element. This is necessary to ensure that every remove button that is added later (as part of a product row) has the required action without the need to attach the click handler individually.
Note also that all the worker functions, addRow(), removeRow() and calc() are now defined inside the $(function() {}) structure. This ensures that vars such as tbody remain in scope (without resorting to the global scope).
Ahhh.. You all doing correct. Just define your variable just on top, ie. before document.ready().
var tbody=null;
$().ready(function () {
"use strict";
tbody = document.getElementById("the-tbody");
document.getElementById("btn-add").addEventListener("click", addRow, false);
tbody.addEventListener("click", removeRow, false);
var radios = $('input[type=radio]');
radios.on('change', function () {
radios.each(function () {
var radio = $(this);
radio.closest('.article-option')[radio.is(':checked') ? 'addClass' : 'removeClass']('highlight');
});
});
$(".calc").change(function () {
calctotal()
});
});

Showing hidden textboxes as they are filled

I have a page of thirty text boxes with Id's roughly correlating to _Q0/_Q1/_Q2/_Q3 etc.
I'm trying to design a JS code that will hide all but the first box, and then will reveal the next textbox as the previous one is filled in.
Here is my code:
$(function () {
for(var i=1;i<30;i++){
var t = i
document.getElementById("_Q" + t).style.visibility = 'hidden';
};
var idNumber = 0
document.getElementById("_Q"+idNumber).onKeyUp(function(){return boxAdder()});
function boxAdder(){
idNumber = idNumber+1;
document.getElementById("_Q" + idNumber).style.visibility = 'block';
document.getElementById("_Q" + idNumber).onKeyUp(function(){return boxAdder()});
};
});
So far all the boxes are hidden excluding the first box. However when I write into the first box nothing happens. I'm not entirely sure where this code is going wrong.
Edit: sample JSFiddle: http://jsfiddle.net/8b7pH/3/
Solved! Here is the final code:
$(function () {
for(var i=1;i<=5;i++){
var t = i;
document.getElementById("_Q" + t).style.visibility = 'hidden';
// document.getElementById("_Q" + idNumber).onkeyup = function(){console.log("hi"); return boxAdder(t+1);};
}
var idNumber = 0;
document.getElementById("_Q0").onkeyup = function(){console.log("hi"); return boxAdder(0);};
function boxAdder(numm){
console.log("ho");
//idNumber = idNumber+1;
document.getElementById("_Q" + numm).style.visibility = 'visible';
document.getElementById("_Q" + numm).onkeyup = function(){return boxAdder(numm+1);};
}
});
This does what you want:
$(function () {
var $boxes = $("[id^=_Q]").hide().keyup(function(){ //Hide all, then attach keyup
var i = $(this).index(); //Index of the box being typed
$boxes.eq(i+1).show(); //Get and show next textbox
});
$boxes.first().show(); //Show next textbox
});
Btw $("[id^=_Q]") selects all elements whose id starts with _Q
Working OK here: http://jsfiddle.net/edgarinvillegas/8b7pH/7/
Cheers
My suggestion is that you assign a function to the onchange event of the text boxes, and give each one an id as follows:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function textChange(){
// Get the number of the caller's id
var inputNumber = $(event.target).attr('id').split("txt")[1];
// Select the next input by increasing the inputNumber and set its "display" attr to block
$("#txt" + ++inputNumber).css("display", "block");
}
</script>
<from>
<input type="text" id="txt1" onchange="textChange()" />
<input type="text" style="display:none;" id="txt2" onchange="textChange()" />
<input type="text" style="display:none;" id="txt3" onchange="textChange()" />
<input type="text" style="display:none;" id="txt4" onchange="textChange()" />
<input type="text" style="display:none;" id="txt5" onchange="textChange()" />
</form>
A working example can be found here:
http://jsfiddle.net/WChd8/
Thanks for the fiddle. I've updated it to a working one.
Here's the code:
$(function () {
for(var i=1;i<=5;i++){
var t = i;
document.getElementById("_Q" + t).style.visibility = 'hidden';
}
var idNumber = 0;
document.getElementById("_Q" + idNumber).onkeyup = function(){console.log("hi"); return boxAdder();};
function boxAdder(){
console.log("ho");
idNumber = idNumber+1;
document.getElementById("_Q" + idNumber).style.visibility = 'visible';
document.getElementById("_Q" + idNumber).onkeyup = function(){return boxAdder();};
}
});
The significant change was the syntax for onkeyup: element.onkeyup = function(). Other than that, there were a bunch of missing semicolons that didn't matter. I added console.logs that can obviously be removed.
EDIT
Edgar found a valid bug, so I put in a fix. Basically, remove the onkeyup event as soon as it's called:
document.getElementById("_Q" + idNumber).onkeyup = function(){this.onkeyup = null; return boxAdder();};
function boxAdder(){
idNumber = idNumber+1;
document.getElementById("_Q" + idNumber).style.visibility = 'visible';
document.getElementById("_Q" + idNumber).onkeyup = function(){this.onkeyup = null; return boxAdder();};
}
Note the new this.onkeyup = null; in two places.
This is a javascript only approach, based on what you already had, that also checks for the content written in the input. If is blank, it hides the next one again.
for(var i=0;i<30;i++){
var element = document.getElementById("_Q" + i);
if(element != null)
{
element.onkeyup = function() {
var next = parseInt(this.id.replace("_Q", "")) + 1;
document.getElementById("_Q" + next).style.visibility = (this.value != "" ? "visible" : "hidden");
}
}
if(i>0)
element.style.visibility = 'hidden';
};

Categories