Skrypt JS z egzaminu E.14-06-19.06

pytanie zadane 28 grudnia 2019 w JavaScript przez Pikus Nowicjusz (160 p.)

Napisałem taki skrypt siedzę nad nim już ładną chwile i nie mogę znaleźć błędu pomoże ktoś albo nakieruje na lepsze rozwiązanie.W skrócie ma on wyświetlić pod formularzem informacje wpisane do niego.

java

<script>
function wyslij(){
var a = document.getElementById("imie");
var b = document.getElementById("nazwisko");
var c = document.getElementById("email");
var d = document.getElementById("usluga");
document.getElementById("demo").innerHTML = a+" "+b+"<br>"+c+"<br>Usługa: "+d;
}
</script>

HTML formularz

<div>
<form name="jedne">
Imię:    <input type="text" name="imie" id="imie"><br>
Nazwisko:<input type="text" name="nazwisko" id="nazwisko"><br>
E-mail:  <input type="text" name="email" id="email"><br>
Usługa:  <select name="usluga" id="usluga">
<option selected>Naprawa komputera</option>
<option>Odzyskiwanie danych</option>
<option>problemy z oprogramowaniem</option>
<option>Konfiguracja sieci lan</option>
<option>Inne</option>
</select><br>

<input type="checkbox" name="usługa">Wyślij kopię wiadomości<br>
<input type="reset" value="Reset"><button onclick="wyslij()">wyślij</button>
</form>
</div>
<div id="demo"></div>

2 odpowiedzi

odpowiedź 28 grudnia 2019 przez Michałełe Nałogowiec (25,600 p.)

Witam

Nie wyświetla nic, ponieważ dla formularza gdy klikasz w button'a próbuje on przesłać ten formularz ( zauważ, iż w Twojej wersji URL mu się zmienia - zmienne otrzymują wartości).

Wystarczy w funkcji zatrzymać te automatyczne zdarzenia wywołując metodę preventDefault().

<script>
function wyslij( event){

event.preventDefault();

var a = document.getElementById("imie");
var b = document.getElementById("nazwisko");
var c = document.getElementById("email");
var d = document.getElementById("usluga");

document.getElementById("demo").innerHTML = a.value +" "+ b.value +"<br>"+ c.value +"<br>Usługa: "+d.value;
}
</script>

Nie zapomnij jeszcze zmienić w HTML

<input type="reset" value="Reset"><button onclick="wyslij( event)">wyślij</button>

odpowiedź 28 grudnia 2019 przez Pikus Nowicjusz (160 p.)

twoja poprawka nic mi nie dała spojrzałem jeszcze raz na spokojnie i poprawiłem wklejam jak by ktoś szukał rozwiązania

<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="styl.css" type="text/css"/>
<script>
function wyslij(){
var a = document.getElementById("imie").value;
var b = document.getElementById("nazwisko").value;
var c = document.getElementById("email").value;
var d = document.getElementById("usluga").value;
document.getElementById("demo").innerHTML = a+" "+b+"<br>"+c+"<br>Usługa: "+d;
}
</script>
</head>
<body>
<div>
Imię:    <input type="text" id="imie"><br>
Nazwisko:<input type="text" id="nazwisko"><br>
E-mail:  <input type="text" id="email"><br>
Usługa:  <select id="usluga">
<option selected>Naprawa komputera</option>
<option>Odzyskiwanie danych</option>
<option>problemy z oprogramowaniem</option>
<option>Konfiguracja sieci lan</option>
<option>Inne</option>
</select><br>

<input type="checkbox" id="usługa">Wyślij kopię wiadomości<br>
<input type="reset" value="Reset"><button onclick="wyslij()">wyślij</button>

</div>
<div id="demo"></div>

</body>
</html>