2016-09-05 3 views
1

フォームを設定し、入力を検証して別のWebサイト(index.html)にリダイレクトするjavascriptファイル(下図)を用意しました。検証は完全に機能しますが、ポストリターンを表示するのではなく、フォームを希望のページにリダイレクトする方法を理解することはできません。フォームはphpファイル(私はアクセスできない)にポストして、そのファイルの戻り値をindex.htmlに表示したいと思います。フォームのサブミット後にリダイレクト

フォーム:

function validateInput() { 

    var check = document.forms["form"].elements; 

    for (var i = 0; i < check.length; i++) { 
     var test = check[i]; 

     if (test.type === "text" && test.value === "") { 
      displayMsg("Please fill out all fields" +test.innerHTML); 
      return false; 
     } 
     if (test.type === "date") { 
      var pattern = /^\d{1,2}\/\d{1,2}\/\d{4}$/; 

      if (!test.value.match(pattern)) { 
       displayMsg("Please enter a valid date of birth"); 
       return false; 
      } 
     } 
     else if (test.name === "email") { 
      var re = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/; 

      if (!test.value.match(re)) { 
       displayMsg("Please enter a valid email address"); 
       return false; 
      } 
     } 
    } 
    return true; 
} 

function displayMsg(msg) { 
    var ele = document.getElementById("msg"); 
    ele.className = "show"; 
    ele.innerHTML = "<p>" + msg + "</p>"; 
} 

window.onload = function() { 
    var check = document.forms["form"].elements; 
    for (var i = 0; i < check.length; i++) { 
     check[i].addEventListener('click', function() { 
      var ele = document.getElementById("msg"); 

      if(ele.className != "hide") { 
       ele.className = "hide"; 
      } 
     }); 
    } 
} 
+0

あなたのhtmlフォームを見つけることができません。それがなければ、どのように関数呼び出しを知っていますか? – yash

+0

@yash申し訳ありませんが、コードを追加して編集します – Brittany

答えて

2

代わりのreturn true;あなたはwindow.location.hrefを使用する場所を設定し、デフォルトの提出を防ぐためにreturn false;を使用することができます:JavaScriptのファイル

<form name="form" action="register.php" onsubmit="return validateInput()" method="POST" > 
     <fieldset> 
     <legend>Personal Details</legend> 
     <label>Name</label><br> 
     <input type="text" name="name"><br><br> 
     <label>Email</label><br> 
     <input type="text" name="email"><br><br> 
     <label>Date of Birth</label><br> 
     <input type="text" name="dob"><br> 
     </fieldset> 
     <input type="submit" name="submit"> <input type="reset" name="reset"> 
    </form> 

フォーム:

function validateInput() { 
    .... 
    window.location.href = 'index.html'; 
    return false; 
} 
+0

私はそれを試みましたが、残念なことに動作しませんでした。それはまだ私にPHPファイルからのポストリターンを示しています。 – Brittany

+0

JavaScriptエラーはありませんか?あなたはコンソールをチェックしましたか? – Dekel

+0

申し訳ありません、はい、全然愚かなエラーを作りました。ありがとう、正しい答えとしてマークします。 – Brittany

関連する問題