Przesyłanie danych z obiektu javascript do formularza HTML5

pytanie zadane 4 kwietnia 2016 w JavaScript przez adamek339 Użytkownik (600 p.)

Witam, chciałbym przesłać dane z obiektu js np. Student.imie do formularza HTML5 aby wartość imie wyświetliła się w formularzu. Próbowałem kilku sposobów ale mi nie wychodzi. Czy wie ktoś może jak to zrobić? Z góry dziękuję i pozdrawiam.

3 odpowiedzi

odpowiedź 4 kwietnia 2016 przez Vento Pasjonat (17,120 p.)

<body>


<input type="text" name="" id="imie">

<script type="text/javascript">
    var imie = "Paweł";
    document.getElementById("imie").value = imie;
</script>

</body>

Czy o to chodzi?

komentarz 4 kwietnia 2016 przez adamek339 Użytkownik (600 p.)

Tak dokładnie o to tylko mam jeszcze jeden problem. Jeśli osadzę skrypt w oddzielnym pliku js to wtedy nie działa :/

komentarz 4 kwietnia 2016 przez ScriptyChris Mędrzec (190,170 p.)

@Vento, dobrze myślisz, ale autor chciał pole obiektu, a nie zmienną. Twoją propozycję trzeba nieco zmodyfikować :)

var obj = {
      imie: 'Pawel',
      wiek: '20',
      plec: 'mezczyzna'
};

document.getElementById("imie").value = obj.imie;

komentarz 4 kwietnia 2016 przez ScriptyChris Mędrzec (190,170 p.)

mam jeszcze jeden problem. Jeśli osadzę skrypt w oddzielnym pliku js to wtedy nie działa

Czy pojawia się jakiś błąd w konsoli?

Czy podałeś prawidłową ścieżkę do pliku .js w atrybucie src tagu <script>?

Np. <script type="text/javascript" src="kod.js"> ... </script>

Wtedy plik JavaScriptu musi być umieszczony w tym samym folderze co plik HTML, z którego się tam odwołujesz.

komentarz 4 kwietnia 2016 przez adamek339 Użytkownik (600 p.)

Ale po odpowiedzi domyśliłem się żeby tam wstawić wartość z obiektu więc jest ok :) Teraz został tylko ten problem ze skrypt nie działa gdy jest w pliku js a nie w dokumencie HTML.

Wie ktoś może dlaczego tak się dzieje i co zrobić aby to naprawić?

komentarz 4 kwietnia 2016 przez adamek339 Użytkownik (600 p.)

tak. w sekcji head mam <script src="skrypt.js"></script>

a cały sktypt wygląda tak




function pierwiastek()
{
	
	this.name='';
	this.wartosciowosc=1;
	
	
	
		
};

var mypierwiastek=new pierwiastek();
mypierwiastek.name='Hel';
mypierwiastek.wartosciowosc=89;
 document.getElementById("imie").value = mypierwiastek.wartosciowosc;

komentarz 4 kwietnia 2016 przez adamek339 Użytkownik (600 p.)

Skrypt jest dobrze podpięty ponieważ wstawiłem alert i zadziałał z tym że nie we wszystkich miejscach skryptu . Alert nie działa jeśli zostanie podpięty na końcu skryptu.

Czyli tak jakby ta część odpowiedzialna za obsługę formularza nie wykonuje sie.

komentarz 4 kwietnia 2016 przez ScriptyChris Mędrzec (190,170 p.)

w sekcji head mam <script src="skrypt.js"></script>

Wobec tego w konsoli powinieneś zobaczyć coś w stylu "document.getElementById("imie") is undefined", ponieważ skrypt chce zmodyfikować element HTML, który jeszcze się nie załadował. Skrypty JavaScript umieszczaj w na końcu <body>

Poza tym.nazwy funkcji, które pełnią funkcję konstruktorów obiektów pisze się z dużej litery, czyli function Pierwiastek(), a dodatkowo - po co Ci konstruktor funkcji, skoro nie pozwalasz tam podawać żadnych parametrów? Stwórz sobie obiekt w zapisie literalnym (Literal Object Notation). Konstruktory mają sens, gdy dany obiekt ma jakieś domyślne wartości, ale umożliwisz tworzenie obiektów z customowymi własnościami - wtedy tworząc obiekt, piszesz sobie np.

function Pracownik (imie, staz, pensja)
{
     this.imie = 'Jan' || imie;  // pracownik domylsnie nazywa sie "Jan" albo tak jak podasz w funkcji
     this.staz = 'rok' || staz; // domyslnie pracownik ma rok stazu, albo tyle ile podasz jako parametr, ale musisz uscislic jaki okres czasu tu moze byc wpisany, aby pozniejsza walidacja byla mozliwa
     this.pensja = '1600' || pensja;  // domyslnie 1600, albo tyle ile podasz przez parametr
}
var domyslnyPracownik = new Pracownik (); // obiekt ten zostanie stworzony z domyslnymi wlasnociami, czyli >> domyslnyPracownik = {imie: "Jan", staz: "rok", pensja: 1600};
var mojPracownik = new Pracownik ('Adam', 'kwartal', 2300); // nadaje pracownikowi wlasne imie, staz i pensje
console.log("Pracownik: ", mojPracownik); // nowyPracownik {imie: "Jan", staz: "kwartal", pensja: 2300};

komentarz 4 kwietnia 2016 przez ScriptyChris Mędrzec (190,170 p.)

Skrypt jest dobrze podpięty ponieważ wstawiłem alert i zadziałał z tym że nie we wszystkich miejscach skryptu . Alert nie działa jeśli zostanie podpięty na końcu skryptu.

Czyli tak jakby ta część odpowiedzialna za obsługę formularza nie wykonuje sie.

Wstaw cały kod HTML i JS.

odpowiedź 4 kwietnia 2016 przez Grzesiek Eleryk Mądrala (6,820 p.)

elementHTM np innerHTML = wartość

komentarz 4 kwietnia 2016 przez adamek339 Użytkownik (600 p.)

Możesz coś więcej napisać?

komentarz 4 kwietnia 2016 przez ScriptyChris Mędrzec (190,170 p.)

@Grzesiek Eleryk

W <input> nie ma pola .innerHTML tylko jest atrybut .value

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

komentarz 5 kwietnia 2016 przez Grzesiek Eleryk Mądrala (6,820 p.)

Wow wygrałeś nic np to znaczy na przykład

odpowiedź 4 kwietnia 2016 przez adamek339 Użytkownik (600 p.)

Dodałem linijkę <script src="skrypt.js"></script> w sekcji body i wszysko działa :) Dziękuję za pomoc.

Jeśli mogę to chciałbym zadać jeszcze jedno pytanie. Chce zrobić projekt z użyciem drag&drop. Mam dwie sekcje na stronie w jednej są obrazki pierwiastków z układu okresowego. Chciałbym aby po przeciągnięciu obrazka np. z Wodorem do pustej sekcji w formularze na dole wyświetliły informacje np. wartościowości, grupie do jakiej należy itp.

Dzięki waszej pomocy wiem już jak wysłać dane z obiektu js do formularza bo myślę że te dane o pierwiastkach będę przechowywać w obiektach.(jesli to złe rozwiązanie to mnie poprawcie). Mam też zrobioną obsługę drag&drop z tym ,że teraz muszę jakoś zaprogramować to że gdy przeciągnę obrazek np z Siarką to skrypt wykryje jaki to pierwiastek i wyśle odpowiednie dane do formularzy. Tylko że nie za bardzo wiem jak to zrobić. Jeśli wstawie swój kod Drag&Drop to dacie mi jakieś wskazówki?

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}