Need to create a button that adds input areas, and name the div differently, and can export them using JavaScript

Question

Alright, So basically I got a website that recieves a number of inputs, like lets say name, age, weight... After all the inputs, the text appears in a text area on the same website. I need the website to offer the function to add more levels, for example you click 'add level' and a dynamic new inputs appear that allow you to add more info. Im facing a problem that when i create a new dynamic div with those inputs, they all have the same id, which wont allow me to print each one individually. I have this function that prints out the results :

<form id="form" action="#">
    <script>
        $("#form").submit(function(event) {
            event.preventDefault();
            $("#template").val()... 
 </form>

Shortly : I need a way to make a button, that adds a new div with unique id.Inside there will be label inputs, the label will print out on submit.

Hope this is clear enough :)

Before making any assumptions, I have a couple of questions. What do you call "levels"? What is supposed to go in these inputs you are trying to add? — blex, Jun 16 '14 at 19:26
When you click the "add level" buttons, it should open a set of input lines, in which you can enter for example the name of your video, the date and the duration.The point here is to make the use add as much videos as he wants to, and still recieve all the info about all the videos in the output. — The Slothmeister, Jun 16 '14 at 19:32
So, every div that is created contains the same set of inputs? — blex, Jun 16 '14 at 19:37
They can't all have the same id, but they can have an id that is incremented for each addition. — TimSPQR, Jun 16 '14 at 19:37
blex - Yes! TimSPQR - that will work too, if it could be 1,2,3,4,5...simply numbers. anything that will allow me to print those things out and not mess up :) — The Slothmeister, Jun 16 '14 at 19:39

blex · Accepted Answer · 2014-06-16T20:06:06.957

0

If I understand your question correctly, this might be a way to do it :

HTML

<button id="addLevelBtn">Add a level</button>
<button id="getResultsBtn">Get results</button>

JS

//on click, add a level
$('#addLevelBtn').on('click',addLevel);

//on click, get results
$('#getResultsBtn').on('click',getResults);

//add the first level on load
addLevel();


function addLevel(){
    var nbOfSets = $('.setOfInputs').length;
    $('#addLevelBtn').before(
        '<div class="setOfInputs" id="set-'+nbOfSets+'">'

            +'<p>#set-'+nbOfSets+'</p>'

            +'<label for="age">Age: </label>'
            +'<input type="text" name="age">'

            +'<label for="weight">Weight: </label>'
            +'<input type="text" name="weight">'

        +'</div>');
}

function getResults(){
    var result="";
    $.each($('.setOfInputs'),function(){
        var id = $(this).attr('id');
        var age = $(this).find('[name=age]').val();
        var weight = $(this).find('[name=weight]').val();
        result += id + ' : age = ' + age + ' , weight = ' + weight + '\n';
    });
    alert(result);
}

JS Fiddle Demo

edited Jun 16 '14 at 20:06

answered Jun 16 '14 at 19:50

blex

24,941
5
39
72

Works perfectly fine, although i cant find a way to print them.I am using JavaScript as you can see, and cant seem to find a way to print out the information received from those labels. – The Slothmeister Jun 16 '14 at 20:00
@TheSlothmeister I just edited my answer, check out the [JS Fiddle](http://jsfiddle.net/Y9h5B/3/). – blex Jun 16 '14 at 20:06
Yay! Awesome! Again, would you ming helping me print this out into a text area, using a form? :) – The Slothmeister Jun 16 '14 at 20:10
A form would not be that useful for doing just that, unless you actually send it to a server, is that what you are planning on doing? – blex Jun 16 '14 at 20:13
Gotta admit, you pretty much sorted this thing for me :D and for that i am more than grateful! As soon as i get 15 rep ill up your answer! HUGE thank you to you sir! – The Slothmeister Jun 16 '14 at 20:56
Ok, so I must be really stupid, I cant get this code to work on my website.Nothing i tried works, none of the jQuery versions including 1.8.3, Not putting it on a clean website. It simply show me the buttons and the texarea, but not the labels. :( – The Slothmeister Jun 16 '14 at 21:12
@TheSlothmeister in my example, addLevel adds a level before #addLevelBtn, therefore change this ID according to your code. Also, don't forget to do addLevel(); on load to display the first set. And always check your javascript console (F12) for errors. – blex Jun 16 '14 at 21:16
@TheSlothmeister I noticed you closed a div that was not opened before. And in JS Fiddle, you don't need the head and body tags : [Updated your JS Fiddle](http://jsfiddle.net/MXXXT/131/) – blex Jun 16 '14 at 21:35
Oh, and VERY important for this to work : Your code is in the head tag, therefore it is executed before the html is fully loaded, wrap it all inside `$(document).ready(function(){/*all your js code goes here*/});` [Take a look here](http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready) – blex Jun 16 '14 at 21:38
For 2 hours, I have been sitting here with the idea of being a total dumb ass because i could not get the code to be executed in the right way.I was losing hope.Then after about all those answers you came back to me like a jesus of coding, and told me i need to add a document ready function.Thank you, for that. Without you, I could had a nerve break :) – The Slothmeister Jun 16 '14 at 21:49
Practice makes perfect, you'll get these reflexes as you make mistakes and learn from them ;) I code every day, I make mistakes every day, I learn every day and as long as this keeps happening, I'll be happy – blex Jun 16 '14 at 22:23

Need to create a button that adds input areas, and name the div differently, and can export them using JavaScript

1 Answers1

JS Fiddle Demo