CODEWITHSUNDEEP
jqueryhtml
Pullapooh
Pullapooh

Reputation: 161

jQuery get value from dynamic inputs and append

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>

Upvotes: 1

Views: 1929

Answers (1)

clouddreams
clouddreams

Reputation: 642

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.

Upvotes: 1

Related Questions