Pobieranie danych z formularza i dynamiczne dodawanie pól

Witam! Mam formularz, w którym potrzebuję dodać kilka pól. Liczba dodanych pól ma zależeć od liczby jaką podał użytkownik np. jeśli liczba dzieci = 3, zostaną dodane 3 pola do wpisania wieku i 3 do podania ceny za pobyt w obiekcie noclegowym. Udało mi się napisać funkcję, która dodaje określoną ilość pól, ale działa tylko na pojedynczej wartości przypisanej "na sztywno". Próbuję więc dodatkowo napisać funkcję, która będzie mi na bieżąco(bez konieczności użycia buttona!) pobierała i wyświetlała dane z pierwszego pola - liczba dzieci. Niestety wyświetla tylko domyślną wartość ustawioną w polu - 0. Kiedy wpiszę cokolwiek innego, dalej wyświetla domyślną wartość oraz błąd w konsoli Firefox'a:

TypeError: $(...).val is not a function

Proszę o pomoc

html

<div id="mres-form16">Liczba dzieci:<input type="text" id="countc" name="countc" size="60" placeholder = "0" value="0" ></input></div>
	<div id="mres-form17"></div> //wiek dziecka 1..n
	<div id="mres-form18"></div> //wiek

<script> 
	
$('#countc').keyup(function(){
var newValue = $(this).val();
    $('#mres-form18').text(newValue);
    })
.keyup();	


	var startingNo = $('#countc').val();
var $node = "";
for(varCount=1;varCount<=startingNo;varCount++){
    var displayCount = varCount;
    $node += '<p><label for="var'+displayCount+'">Variable '+displayCount+': </label><input type="text" name="var'+displayCount+'" id="var'+displayCount+'"></p>';
	
}	
$('#mres-form18').prepend($node);	
		
</script>

Czemu używasz dwa razy funkcję keyup? Dodatkowo w funkcji która jest wywoływana po wciśnięciu klawisza masz tylko te dwie instrukcje:

var newValue = $(this).val();
$('#mres-form18').text(newValue);

Cała reszta wykona się tylko raz po załadowaniu JSa.

Pawilonek napisał(a):

Czemu używasz dwa razy funkcję keyup? Dodatkowo w funkcji która jest wywoływana po wciśnięciu klawisza masz tylko te dwie instrukcje:

var newValue = $(this).val();
$('#mres-form18').text(newValue);

Cała reszta wykona się tylko raz po załadowaniu JSa.

Korzystałam z tego //api.jquery.com/val/ (Find the value of an input box.)
Na powyższej stronie jest demo, gdzie taki kod działa jak powinien.

$('#countc').keyup(function(){
var newValue = $(this).val();
    $('#mres-form18').text(newValue);
    })
.keyup();   

Dlaczego więc u mnie wyświetla cały czas tylko domyślną wartość poa=0 a nie wyświeltla tego co wpiszę z klawiatury i po wpisaniu czegokolwiek z klawiatury Firefoxowa konsola pokazuje error:

TypeError: $(...).val is not a function

bacha napisał(a):

Dlaczego więc u mnie wyświetla cały czas tylko domyślną wartość poa=0 a nie wyświeltla tego co wpiszę z klawiatury i po wpisaniu czegokolwiek z klawiatury Firefoxowa konsola pokazuje error:

TypeError: $(...).val is not a function

Skoro chcesz żeby (na razie) było wyświetlane to co wpisałeś to kod który podałeś 'działa': https://jsfiddle.net/ghfrtssf/
Więc albo masz błąd w innym miejscu albo nie dodałeś poprawnie biblioteki jQuery.

Pawilonek napisał(a):

bacha napisał(a):

Dlaczego więc u mnie wyświetla cały czas tylko domyślną wartość poa=0 a nie wyświeltla tego co wpiszę z klawiatury i po wpisaniu czegokolwiek z klawiatury Firefoxowa konsola pokazuje error:

TypeError: $(...).val is not a function

Skoro chcesz żeby (na razie) było wyświetlane to co wpisałeś to kod który podałeś działa: https://jsfiddle.net/ghfrtssf/
Więc albo masz błąd w innym miejscu albo nie dodałeś poprawnie biblioteki jQuery.

Mam dodane coś takiego <script src="https://code.jquery.com/jquery-1.10.2.js"></script> na samym początku całego kodu strony i kiedy mam to dodoane Firefox wyświetla jeszcze coś takiego:

TypeError: jQuery(...).tooltip is not a function
ale kiedy usunę problem znika a za to pojawia się
TypeError: $(...) is null
dotyczący tej linijki

$('#countc').keyup(function(){

czyli wygląda, że w ogóle nie pobiera danych.
Strona jest oparta na joomli ale zawiera też mnóstwo mojego kodu wstawionego za pomocą Sourcerera. Może to w joomli tkwi problem?

Firefoxa nie mam więc nie sprawdzę. Ten kod co podawałem wcześniej Ci działa? https://jsfiddle.net/ghfrtssf/ Jeżeli tak to problemu trzeba szukać gdzie indziej a nie w tym kodzie.

Tu masz coś na szybko http://codepen.io/Skayfer/pen/LNQdPa

Starałem się zachować twoją nomenklature jeśli chodzi o nazewnictwo i strukturę, ale puryści polecają owijanie etykietek inputów w <label> http://www.w3schools.com/tags/tag_label.asp
do

jquery oczywiście do sekcji head strony.