Napisałem poniższy kod, aby wyświetlić dane formularza na stronie. Jakie inne metody mogę używać do ponownego napisania poniższego kodu, aby uwzględnić walidację formularza. Jestem początkującym JavaScript i ...

2
Testing999 20 marzec 2021, 22:41

2 odpowiedzi

Najlepsza odpowiedź

Myślę, że o to pytasz

<head>
    <script type="text/javascript">
        var totalAge = 0;
        
        function collect(frm) { 
        var name = frm.nm.value;
        var age = parseInt(frm.ag.value);
        
        totalAge += age;
        
        try {
            if (name == "" || name == null) {
            alert('Enter your name');
          } 
          else if (age == "" || age == null || age == NaN) {
            alert('Enter a valid age');
          }
          else {
            document.getElementById("results").innerHTML+="Name: "+ name +"<br>Age: "+ age + "<br>total age: "+ totalAge +"<hr>"
                frm.reset();
          }
        }
        catch (e) {
         console.log(e);
        }
        
        } 
        </script>
    <style>
    /* #entries,#results{float:left} */
    </style> 
    </head>
    <body>
    <div id="entries">
    <form name ="myform">
    Enter name: <input type="text" name="nm"/><br>
    Enter age: <input type="number" name="ag"/><br>
    <input type="button" value="display" onclick="collect(this.form)"/>
    </form>
    </div>
    <div id="results"></div>
  
    </body>
1
Manu Sampablo 20 marzec 2021, 20:36

Właśnie wykonałem prosty walidacja wieku.

function collect(frm) {
  if (Number(frm.ag.value) >= 18) {
    document.getElementById("results").innerHTML +=
      "Name: " + frm.nm.value + "<br>Age: " + frm.ag.value + "<hr>";
    document.getElementById("warn").textContent = "";
    frm.reset();
  } else {
    document.getElementById("warn").textContent =
      "18+ Are only allowed!";
  }
}
#warn {
  color: red;
}
<div id="entries">
  <form name="myform">
    Enter name: <input type="text" name="nm" /><br> Enter age: <input type="number" name="ag" /><br>
    <input type="button" value="display" onclick="collect(this.form)" />
  </form>
</div>
<h4 id="warn"></h4>
<div id="results"></div>

EDYTUJ:

Nie robiłeś tego w odpowiedni sposób, więc starał się lepiej.

const nameInput = document.getElementById("nameInput");
const ageInput = document.getElementById("ageInput");
const btnInput = document.getElementById("btnInput");

const results = document.getElementById("results");
const warn = document.getElementById("warn");
const ageCounter = document.getElementById("totalAgeCounter");

let ageCount = 0;

function collectData() {
  if (nameInput.value !== "" && Number(ageInput.value) >= 18) {
    results.innerHTML += `Name: ${nameInput.value} <br>Age: ${ageInput.value} <hr>`;

    ageCount += Number(ageInput.value);
    ageCounter.textContent = ageCount;

    warn.textContent = "";
    nameInput.value = "";
    ageInput.value = "";
  } else {
    warn.textContent = "18+ Are only allowed!";
  }
}

btnInput.addEventListener("click", collectData);
#warn {
  color: red;
}

#totalAgeCounter {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  background-color: blue;
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  border-radius: 50%;
  font-weight: bolder;
  font-size: 18px;
}
<div id="entries">
  <form name="myform">
    Enter name:
    <input type="text" id="nameInput" />
    <br /> Enter age:
    <input type="number" id="ageInput" />
    <br />
    <input type="button" value="display" id="btnInput" />
  </form>
</div>

<h4 id="warn"></h4>
<div id="results"></div>
<div id="totalAgeCounter"></div>
1
Manas Khandelwal 20 marzec 2021, 20:49