Атрибут действия не работает в проверенной форме JS - PullRequest
0 голосов
/ 11 мая 2018

Файлы находятся в правильных местах, и страница формы, и страница заполнения формы находятся в одной папке. Когда я нажимаю «отправить», он корректно проверяет форму, но если все введено правильно и проверяется, он ничего не делает, просто убирает звездочки, как это должно быть в js. Я хочу, чтобы он ссылался на страницу form_complete.html после того, как вы нажали на submit и проверка прошла, но после проверки ничего не произошло,

HTML:

<form  id="contactform" action="form_complete.html" method="post">

  <p class = "labelp">
    <label for="name">Name: </label>
    <input type="text" name="name" id="name" placeholder="Enter your name" >
    <span>*</span><br><br>
  </p>
  <p class = "labelp">
    <label for="age">Age: </label>
    <input type="text" min="18" max="100" name="age" id="age" placeholder="Enter your age">  
    <!-- using type=text so I can practice isNaN in js -->
    <span>*</span><br><br>
  </p>
  <p class = "labelp"></p>
    <label for="country">Country: </label>
    <select name="country" id="country">
      <option value ="">Select a country</option>
      <option>USA</option>
      <option>Canada</option>
      <option>Mexico</option>
      <option>Brazil</option>
      <option>Japan</option>
      <option>China</option>
      <option>Other</option>
    </select>
    <span>*</span><br><br>
  </p>
  <p class = "labelp">
    <label for="email">E-mail: </label>
    <input type="email" name="email" id="email" placeholder="Enter your E-mail">
    <span>*</span><br><br>
  </p>
  <p class = "labelp">
    <label for="bday">Birthday: </label>
    <input type="date" name="bday" id="bday">
    <span>*</span><br><br>
  </p>
  <p class = "labelp">
    <label for="gender" id="gender">Gender: </label>
    <input type="radio" name="gender" value="male" id="male"> Male
    <input type="radio" name="gender" value="female" id="female"> Female
    <input type="radio" name="gender" value="other" id="other"> Other
    <br><br>
  </p>
    <label>Comments: </label>
    <textarea rows="5" cols="30">  </textarea><br><br>

    <input type="button" id="registerbtn" value="Submit">
    <input type="button" id="resetbtn" value="Reset">
</form>

JavaScript:

"use strict";
var $ = function(id) { return document.getElementById(id);};




var processEntries = function(){
    var isValid = true;


// values
var name = $("name").value;
var age = $("age").value;
var country = $("country").value;
var email = $("email").value;
var bday = $("bday").value;
var gender = "";
if ($("male").checked){gender = "Male";}
if ($("female").checked){gender = "Female";}
if ($("other").checked){gender = "Other";}
console.log(gender);  //check if gender buttons work

// name
if(name == ""){
    $("name").nextElementSibling.firstChild.nodeValue = "This field is required!";
    isValid = false;}
else{
    $("name").nextElementSibling.firstChild.nodeValue = "";
    }


// age
if(age == ""){
    $("age").nextElementSibling.firstChild.nodeValue = "This field is required!";
    isValid = false;
}
else if(isNaN(age)){
    $("age").nextElementSibling.firstChild.nodeValue = "This field must be a number!";
    isValid = false;
}
else{
        $("age").nextElementSibling.firstChild.nodeValue = "";
    }


//country
if(country == ""){
    $("country").nextElementSibling.firstChild.nodeValue = "Please select a country!";
    isValid = false;}
else{
    $("country").nextElementSibling.firstChild.nodeValue = "";
     }


 //email    
if(email == ""){
    $("email").nextElementSibling.firstChild.nodeValue = "This field is required!";
    isValid = false;}
else{
        $("email").nextElementSibling.firstChild.nodeValue = "";
    }

 //birthday   
if(bday == ""){
    $("bday").nextElementSibling.firstChild.nodeValue = "This field is required!";
    isValid = false;}
else{
    $("bday").nextElementSibling.firstChild.nodeValue = "";
    }
}

var resetForm = function(){
    $("contactform").reset();
    $("name").nextElementSibling.firstChild.nodeValue = "*";
    $("age").nextElementSibling.firstChild.nodeValue = "*";
    $("country").nextElementSibling.firstChild.nodeValue = "*";
    $("email").nextElementSibling.firstChild.nodeValue = "*";
    $("bday").nextElementSibling.firstChild.nodeValue = "*";
}


window.onload = function() {
    $("registerbtn").onclick = processEntries;
    $("resetbtn").onclick = resetForm;
    $("name").focus();
}

1 Ответ

0 голосов
/ 11 мая 2018

Пожалуйста, поставьте условие ниже в конце функции "processEntries"

if(isValid){
     $("#contactform").submit();
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...