The problem is that you're getting the value of the inputs into your name
, surname
, etc. variables, but then trying to set .value
on those variables. The variables contain strings, not elements.
You have two options:
Save the elements, not values, to the variables
Save the elements to the variables instead of the values, so you can use the elements at the end as well, see comments:
function send() {
// No `.value` on these, so we get the elements
var name = document.getElementById('name');
var surname = document.getElementById('surname');
var mail = document.getElementById('email');
var age = document.getElementById('age');
var text = document.getElementById('text');
// Include `.value` here
if (!name.value || !surname.value || !mail.value) {
alert("Enter all values");
text.value = "False input";
return;
} else {
var con = "You sur ?";
if (confirm(con)) {
text.value = "Good input";
}
}
// Reset the inputs
console.log(name.value);
name.value = "";
console.log(name.value);
surname.value = "";
email.value = "";
}
<form action="">
<div>
<label>Ime</label>
<input type="text" id="name">
</div>
<div>
<label>Prezime</label>
<input type="text" id="surname">
</div>
<div>
<label>Email</label>
<input type="text" id="email">
</div>
<div>
<label>Age</label>
<select name="age" id="age">
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
</select>
</div>
</form>
<div><input type="button" id="btn" value="Prati" onclick="send();"></div>
<div><input type="text" id="text" disabled></div>
Use the reset
method
However, if you just want to reset the inputs to their default value from the HTML, you can use the form's reset
method instead. To do that, I'd put the button inside the form, and use modern event handling; see comments:
// Use modern event handling
document.getElementById("btn").addEventListener("click", send);
function send() {
var name = document.getElementById('name').value;
var surname = document.getElementById('surname').value;
var mail = document.getElementById('email').value;
var age = document.getElementById('age').value;
var text = document.getElementById('text');
if (!name || !surname || !mail) {
alert("Enter all values");
text.value = "False input";
return;
} else {
var con = "You sur ?";
if (confirm(con)) {
text.value = "Good input";
}
}
// Here, `this` will refer to the button. Find the `form` it's in...
const form = this.closest("form");
// ...and reset it
form.reset();
}
<form action="">
<div>
<label>Ime</label>
<input type="text" id="name">
</div>
<div>
<label>Prezime</label>
<input type="text" id="surname">
</div>
<div>
<label>Email</label>
<input type="text" id="email">
</div>
<div>
<label>Age</label>
<select name="age" id="age">
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
</select>
</div>
<!-- Move button into the form -->
<div><input type="button" id="btn" value="Prati"></div>
</form>
<div><input type="text" id="text" disabled></div>