Dodaj element formularza dynamicznie za pomocą javascript - nie przesyłając

Question

Edycja: Naprawiłem problem, zaczynając od zera. Przepraszam, że tracę czas. Głosuj, aby zamknąć, jeśli czujesz się tak pochłonięty.

Mam problem z uzyskaniem rzeczywistych danych w formularzu do przesłania, gdy pola wejściowe są dodawane za pośrednictwem javascript. Pola pojawiają się i we właściwym miejscu, ale kiedy robię var_dump (fieldname) po stronie serwera, nic nie pokazuje się. Sprawdzanie za pomocą nagłówków Live HTTP mówi mi, że przeglądarka nie próbuje przesłać dynamicznie dodanych pól formularza.

Czy muszę jakoś "dołączyć" moje dynamicznie utworzone formularze do formularza?

Mój kod:

HTML

<form id="att_form" method="post" name="add_attachments" enctype="multipart/form-data" action="#"> 
<-- below input to prove form submits, just not the dyn added elements --> 
<input name="data[one]" type="text" /> 
<div id="add_fields"></div> 
<input type="submit" /> 
</form> 

JavaScript

function addFormField() 
{ 
var id = 1; 
var htm = "<p id='row" + id + "'><input type='text' size='20' name='txt[]' id='txt" + id + "' /></p>"; 
$("#add_fields".append(htm); 
} 

Kiedy przesłać formularz, mój wkład nazwany danych [jeden] pojawia się jako wartość POSTd , ale te dodane przez addFormField() nie. Pojawiają się w kodzie HTML we właściwym miejscu, ale nie POST. Czy muszę dołączyć element jako dziecko do elementu formularza, aby go przesłać?

Widziałem, Submit form input fields added with javascript, w którym wpadłem na pomysł, aby dane zostały dołączone do formularza potomnego, ale będzie to wymagało pewnej restrukturyzacji mojego CSS. Mam więc nadzieję, że jest to coś prostego, co mogę zrobić w powyższym kodzie.

Z góry dziękuję!

edytuj: poprawiono literówki, ale nadal nie działa. Postanowiłem skorzystać z bezpłatnej metody biblioteki JS omawianej w powyższym linku SO, ponieważ to działa dobrze. Dzięki za pomoc!

Answer 1

Było wiele literówek w kodzie. Na przykład nie zamknąłeś znacznika selektora dla jquery.

umieścić $("#add_fields".append(htm);

powinny były $("#add_fields").append(htm);

zauważy brakujące nawiasy.

Ale wierzę, że twój problem polega głównie na tym, jak próbujesz uzyskać dostęp do wartości poprzez PHP. Po prostu umieszczam twoje źródło na stronie testowej i wszystko działa, jeśli uzyskasz prawidłowy dostęp do wartości.

<?php 
foreach ($_REQUEST['txt'] as $printme) 
    echo $printme."<br/>"; 
?> 

Powyższe źródło działa poprawnie.

Answer 2

tam

wynosi 2 literówki w kodzie: htm zamiast html

i add_fields/add_files

Answer 3

jest to, że rzeczywisty kod?

Jeśli tak, to nie zamyka tag wejściowy i znacznik p .. więc może forma ich ignorować ..

var htm = "<p id='row" + id + "'><input type='text' size='20' name='txt[]' id='txt" + id + "' /></p>"; 

Answer 4

Podczas dodawania/dołączania lub używania innerHtml do umieszczania pól formularzy jako html, to czasami zostanie umieszczony poza formularzem, zobaczysz go jako część formularza, ale wewnętrznie nie jest.

Aby rozwiązać ten problem, należy dodać atrybut form z danymi wejściowymi, takimi jak form=myForm, a myForm powinien być identyfikatorem formularza.