I am looking for exactly the same solution... if anyone could show how me to increase field name also.. such as "field1", field2, field3 it would be greatly appreciated. thanks..
Here it is: In the head put: <script type="text/javascript"> function addInput() { var y = document.getElementById("nextID"); var z = y.value; y.value++; var x = document.getElementById("inputs"); x.innerHTML += "Field" + z + ": <input type=\"text\" id=\"field" + z + "\" /><br />"; } </script> In the body put: <form> <input type="button" onmousedown="addInput();" value="Add Textbox" /> <input type="hidden" id="nextID" value="1" /> </form> <div id="inputs"></div> -Jim
That doesn't add elements to the form, so they wont be submitted with it. Also the element must have a name attribute or it won't be submitted.
Hello! I recommend the following code. Try and Test it <html> <head> </head> <script type="text/javascript"> function addInput() { var s=document.all("countclick").value; document.all("countclick").value=Number(s)+1; var fieldname="field"+s; var x = document.getElementById("inputs"); x.innerHTML += "<input type=\"text\" name="+fieldname+"/>"; } </script> <body> <input type="hidden" id="countclick" value="0"/> <input type="button" onmousedown="addInput();" /> <div id="inputs"></div> </body> </html>
so many solutions and not one that I'd use on account of them being so old fashioned and against best practices no need to use an input type="hidden" as storage for javascript variables when all they have to do is initialise it as 'var count = 1'. also, using innerHTML += is not great either. <html> <head> <style> .foo { background: #ccc; font-weight: bold; margin: 2px; } </style> </head> <body> <input id="button" type="button" value="add input" /><br /><br /> <div id="inputs" style="width: 200px;"></div> <script type="text/javascript"> var target = document.getElementById("inputs"), count = 1, addInput = function() { var input = document.createElement("input"); input.setAttribute("name", "field"+count); input.setAttribute("id", "field"+count); input.setAttribute("value", "field"+count); input.setAttribute("size", 5); input.className = "foo"; target.appendChild(input); count++; }; document.getElementById("button").onclick = addInput; </script> </body> </html> PHP: the advantages to doing it my way are: - you write to dom direct - can change your target element to be the id of a form and these will then BE child nodes of the form. - its clean, scalable and semantic i can think of other ways of improving it but this is YOUR job good luck.
Hi, I am facing a scenario like above,but in my case i want to show up like Col A,Col B etc....The container where i am displaying this is being dynamically generated using jquery.Any help?
var target = document.getElementById("inputs"), count = 1, addInput = function() { Code (markup): dimitar, can you please explain what the comma seperation indicates? I have never seen this before...But I'm assuming that it is adding variables/functions to that element? So: var target = document.getElementById("inputs"), onclick = function() { //onclick } Code (markup): would add the onclick event handler? So it is like shorthand for the With block?
basically, its variable assignments. in modern javascript (i believe it may have started as a trend by Douglas Crockford (the father of JSON) or someone of that type - dean edwrds etc.) this practice is now also utilised by various code crunching optimisers / packers. variable assignments go as follow: // assign some variables in the current scope. var foo = 1, bar = 1, myFunction = function(someparam) { return someparam || false; }; // same as: var foo = 1; var bar = 1; function myfunction() { } // similarily, to make an array (as opposed to via constructor & var foo = new Array) var myArray = [], myArray2 = [1,2,4,5,10,30]; // similarily to make a hash var myobj = {}, myObj2 = { name: "bob", age: 2, getAge: function() { alert(this.age); } }; // mix them... var misc = [ 'string', 98.6, true, false, null, undefined, ['nested', 'array'], {object: true}, NaN, Infinity ]; // other interesting trends to do with variables i have found: var foo = 1, bar = 1, alpha = bar; // can be rewritten as: var foo = bar = alpha = 1; // checking for variables and trapping errors var constructor = function (spec, my) { var that, other private instance variables; my = my || {}; // empty object or default value in case its not sent as param. }; Code (javascript): if there ever was a useful book i'd recommend, it has to be "JavaScript: The Good Parts" by Douglas Crockford, Publisher: O'Reilly Pub Date: May 2, 2008 Print ISBN-13: 978-0-596-51774-8 Pages: 170 to answer your question here, onclick = function is a bad example in this context as it lacks scope - its event driven. it would have to be element.onclick = function - but this is also an assignment. so its probably better to do: var $ = function(selector) { return document.getElementById(selector); }, myEl = $("button"); myEl.onclick = function() { alert("clicked me!"); }; Code (javascript): otherwise, you'd just get the same as function onclick() { ... } that you can call as a standalone by onclick(); i guess you'd then do element.onclick = onclick; confusing... but it might just work as you can also see, in the chain of variable assignments, you can use any of the previous (left) assignments. so: var a = 0, b = a+1, c = b*3, d = function() { return a+b+c }; // etc. you get the idea. brilliant isn't it
Oh yeah. I recognize the syntax now.. var a, b, c; I've used it before but just never assigned values at the same time. And because it was a mixture of elements, values and functions i didn't realize what it was ... I'm not much into reading books on programming, I'd prefer to learn as I go. I believe it is much more effective (for me anyway). I have learnt a lot of what I know, of javascript, by just participating in these forums. Thanks for the recommendation though, I tried to add rep but it wouldn't let me.
i agree, learning by example is best, but i also need better examples to learn from. the kind of posts from joe blog's jquery hello world attempts or the numerous dynamic drive NS4 compatible scripts can actually be detrimental to one's knowledge anyway, 2 books i have on programming, this one and the mootools essentials by aarown newton. the latter also changed the way i program to the pattern and think about code in a major way... something i may not have done otherwise... read this though: http://stackoverflow.com/questions/61088/hidden-features-of-javascript very very very cool stuff in there. like - life changing for example: something i never knew...
hahah.. I think there is a LOT out there that may be, I may even be responsible for some... You may be right. A book may not be the best way to learn, but may be the best way to improve and learn better practices (something that I'm not all that up on, but I have been improving a lot lately). Anyway, I'll order your first suggestion and see how it goes. I'm still going to stay clear of frameworks for the moment... i just don't like them.
If this is old fashioned and not good practice, what would you suggest. I have a form that allows a user to add multiple inputs, and it could vary. Might be one might be 8. Hard coding them is not an option as I don't know the numbers, plus it is a lot messier than having an add input field. Your script works, but what I actually need is for it to add 7 inputs at one time on a line, and then if they press add, they get another 7 inputs on a line. This is so the user can add quantity, item, color, etc. Any help from anybody would be appreciated., and please note my javascript skills are zero. Wish I had the time to learn, but not at the moment. Thanks B