jQuery get value from dynamic inputs and append

Question

How do I get a form input value with jQuery and then put the value in to another input and also in a tag. The form is dynamic this means that there is a button that creates new inputs.

I ask for the Project name and then when you click add new field it adds the new fields on the page. But I would like to get the Project name from the add new input, input form and display it on top of the generated field and inside one of the inputted(generated) field as value.

Here is the code where the project name should go h3 -> '<h3 class="tyonNimi'+rowNum+'"></h3>' The input -> '<input id="etuNimi'+rowNum+'"" name="etuNimi[]" placeholder="Etunimi" type="text">' The full code is down below.

here is a picture of what it should look like: enter image description here

The <h3> would be code and not shown in the text. Only the Project name is shown.

jQUery Code:

 $(document).ready(function() {

    var rowNum = 0;
    function addRow(frm) {
            rowNum ++;
            var tyonNimi = $(".inputRow").closest("#etuNimi").val();
            var row =  '<div class="inputRow'+rowNum+'">' + '<h3 class="tyonNimi'+rowNum+'"></h3>' + '<label for="etuNimi">Etunimi: </label>' + '<input id="etuNimi'+rowNum+'"" name="etuNimi[]" placeholder="Etunimi" type="text">' + '<label for="sukuNimi">Sukunimi: </label>' + '<input id="sukuNimi'+rowNum+'"" name="sukuNimi[]" placeholder="Sukunimi" type="text">' + '</div>';
            jQuery('#inputRow-Dynamic').append(row);

        }

    $('a.addField').click(function(e){
        event.preventDefault();
        addRow(1, false);
        var prjNimi = $(".projektinNimi").val();
        $('.projektinNimi').val(prjNimi);
    });

});

HTML Code:

    <div id="inputRow-Dynamic"></div>
   <a class="submitButton" href="#" onclick="document.palkkalaskuri.submit(); return false;">Laske</a>
<label for="projektinNimi">Projektin Nimi: </label><input id="projektinNimi" name="projektinNimi[]" placeholder="Projektin nimi" type="text"><a class="addField" href="#">Add Fields</a>

clouddreams · Accepted Answer · 2014-02-07 00:44:58Z

1

When you call $('a.addField').click(function(e), you need to use e.preventDefault(). You declare e as argument, you have to use that variable name 'e', not 'event'. Correcting this should add new row on top your input box.

answered Feb 7, 2014 at 0:44

clouddreams

6421 gold badge5 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pullapooh Over a year ago

Hi, the new row is working already. but I added your recommendation :) Do you know how I would get the value from #projektinNimiand append it above the generated field in side a h3?.

clouddreams Over a year ago

you just take the val of input box and set the text of h3 to that. Here's the fiddle jsfiddle.net/a6yRg to give you the idea. Note that, you would need to set ids for h3 to the current rowNum. And set the text of h3 with current row id to the project name.

Pullapooh Over a year ago

I am now setting the ids. I do not understand how I can get it to work that only the new row gets the project name and the old rows stay the same. It Now changes every h3 to the new name.

clouddreams Over a year ago

show me the updated fiddle pls. The idea is you have to modify the line jQuery('h3').text(jQuery('#projektinNimi').val());. Instead of h3, it has to be the id of new row. Makes sense?

Pullapooh Over a year ago

aaah, yes now its working! here is my modify jQuery('.tyonNimi'+rowNum).text(jQuery('#projektinNimi').val()); Thanks for the clear explanation.

Collectives™ on Stack Overflow

jQuery get value from dynamic inputs and append

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related