1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

javascript inputbox increment

Discussion in 'JavaScript' started by love_bug, Oct 7, 2008.

  1. #1

    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..
     
    love_bug, Oct 7, 2008 IP
  2. jgarrison

    jgarrison Peon

    Messages:
    66
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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
     
    jgarrison, Oct 7, 2008 IP
  3. Logic Ali

    Logic Ali Well-Known Member

    Messages:
    170
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    108
    #3
    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.
     
    Logic Ali, Oct 13, 2008 IP
  4. ASPMachine

    ASPMachine Peon

    Messages:
    723
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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>
     
    ASPMachine, Oct 17, 2008 IP
  5. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #5
    so many solutions and not one that I'd use on account of them being so old fashioned and against best practices :D

    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.
     
    dimitar christoff, Oct 17, 2008 IP
  6. Gins Babu

    Gins Babu Member

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #6
    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?
     
    Gins Babu, Oct 26, 2009 IP
  7. camjohnson95

    camjohnson95 Active Member

    Messages:
    737
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #7
    
    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?
     
    Last edited: Oct 27, 2009
    camjohnson95, Oct 27, 2009 IP
  8. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #8
    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; :D 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 :D
     
    Last edited: Oct 27, 2009
    dimitar christoff, Oct 27, 2009 IP
  9. camjohnson95

    camjohnson95 Active Member

    Messages:
    737
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #9
    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.
     
    camjohnson95, Oct 27, 2009 IP
  10. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #10
    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 :D

    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 :D
    for example:
    something i never knew...
     
    Last edited: Oct 27, 2009
    dimitar christoff, Oct 27, 2009 IP
  11. camjohnson95

    camjohnson95 Active Member

    Messages:
    737
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #11
    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.
     
    camjohnson95, Oct 27, 2009 IP
  12. Beauford

    Beauford Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    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
     
    Beauford, Dec 20, 2010 IP