-2

I am resetting my input value in the end of my function but I can't figure it out why it does not work? Is it the problem with my HTML or I made a dumb mistake in my script code?

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 i restart the inputs
  console.log(name);
  name.value = "";
  console.log(name);
  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>
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
itmemilan
  • 331
  • 4
  • 17
  • Have you tried checking for errors? `var name = document.getElementById('name').value` - so setting `name.value` won't affect the input field after all – Nico Haase Nov 17 '21 at 10:01

3 Answers3

1

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>
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
1

Have you tried running reset() on your form?

The HTMLFormElement.reset() method restores a form element's default values.

<form id="myForm">
function myFunction() {
  document.getElementById("myForm").reset();
}
Robgit28
  • 268
  • 4
  • 18
-1

Use this. You can trigger your form id.

document.getElementById("client").reset();

Check this out: How to reset (clear) form through JavaScript?

  • I would recommend removing the completely irrelevant jQuery code from this answer. – T.J. Crowder Nov 17 '21 at 09:55
  • In general, though, answers that just repeat what other answers say elsewhere aren't useful. Instead, vote to close as a duplicate (and comment if you think more clarity is needed). For this question, a good answer would explain *why* the OP's code didn't work, and show them how to make `reset` work with their code (their `form` has no `id`, so an answer that just magically picks `client` as an `id` out of the air isn't useful). – T.J. Crowder Nov 17 '21 at 10:05