如何驗證JavaScript中的表單元素然後移動到PHP頁面？

-2

我想通過javascrpit函數perform（）驗證輸入並移動到名爲i.php的php頁面，以將數據保存到數據庫中。下面是代碼：如何驗證JavaScript中的表單元素然後移動到PHP頁面？

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
<form action="i.php" method="post"> 
<br> 
Name <input type="text" name="name" id="name" > 
<span id="err"></span> 
</br> 
<br> 
Password <input type="Password" name="Password" id="password"> 
<span id="perr"></span> 
</br> 
<br> 
Gender 
<input type="radio" name="gender" id="gender" value="male">Male 
<input type="radio" name="gender" id="gender" value="female">Female 
</br> 
<br> 
Department <select name="department" id="department"> 
<option>------</option> 
<option>ECE</option> 
<option>BBA</option> 
<option>ENG</option>  
</select> 
</br> 
<br> 
<button name="btn" type="button" id="btn" onclick="perform()" >Button</button> 
<input type="submit" name="submit" value="Submit"> 
<input type="reset" name="reset" value="Clear"> 
</br> 
</form> 
<script type="text/javascript"> 
    function perform() 
    { 

     var name = document.getElementById('name').value; 
     var pass = document.getElementById('password').value; 
     var dept = document.getElementById('department').value; 
     var gender = document.getElementsByName('gender'); 
     var r =3; 
     if (name.length==0) 
     { 
      document.getElementById('err').innerHTML = "name not found"; 
      r++; 
     } 
     if (pass.length<=6 || pass.length>=32) 
     { 
      document.getElementById('perr').innerHTML = "password error"; 
      r++; 
     } 
     if(r==3) 
     { 
      window.location= "i.php"; 
     } 

    } 
</script> 
</body> 
</html>*

在i.php頁我用的var_dump看它是否已被提交或不DATAS。在i.php頁面的代碼：

<!Doctype html> 
<html> 
<head></head> 
<body> 
<?php 
var_dump($_POST); 
?> 
</body> 
</html>

但其表現ARRY（0）{} 看起來像有什麼，已經提交。

來源

2017-08-03 AHSAN HABIB

你只是重定向到'i.php'。重定向會導致GET請求，因此'$ _POST'將是空的（因爲它不是POST）。 – Ivar

-2

window.location將您重定向到的頁面，以保留字段值返回它

if(r==3) 
    { 
     return true; 
    }

來源

2017-08-03 07:03:27

的問題是，你正在使用JavaScript重定向，並輸掉了整個表格，並通過這樣的數據。

當表單是有效的，提交它，而不是重定向

function perform() { 
    var _name = document.getElementById('name').value; 
    var pass = document.getElementById('password').value; 
    var dept = document.getElementById('department').value; 
    var gender = document.getElementsByName('gender'); 
    var valid = true; 


    if (_name.length === 0) { 
    document.getElementById('err').innerHTML = "name not found"; 
    valid = false; 
    } 
    if (pass.length <= 6 || pass.length >= 32) { 
    document.getElementById('perr').innerHTML = "password error"; 
    valid = false; 
    } 
    if (valid) { 
    document.querySelector('form').submit(); 
    } 
}

注意name不是變量或表單元素一個好名字，因爲它已經在window.name存在，一個提交按鈕不能被命名爲submit，因爲它會覆蓋名爲form.submit()的功能

另一個選擇是刪除所有javascript，然後使用HTML5驗證。

來源

2017-08-03 07:04:56 adeneo

仍然沒有工作.. –

@AHSANHABIB - 那是因爲你再一次搞砸了名字。您的提交按鈕不能被命名爲'submit'，請輸入其他名稱。 – adeneo

問題是你沒有提交表單，你只是不用傳遞任何變量就去javascript的不同頁面。所以不要做

window.location =「i.php」;

你應該提交表單，像這樣

的document.getElementById（「formId」）提交（）。

，所以你應該給ID formId

來源

2017-08-03 07:05:59

它不工作。它不會去i.php頁面。我在form標籤中的action中聲明。 –

你是否給出了正確的ID？ –

-1

通過壓BTN您重定向只和你的形式不通過彥博提交轉讓你應該改變你的代碼的形式：

<form action="i.php" method="post" id ="form1">

和：

if(r==3) 
    { 
     form1.submit(); 
    }

來源

2017-08-03 07:06:41

問題是你只是重定向到i.php頁面而沒有發佈任何數據。在您的JS替換該行：這個

document.getElementsByTagName('form')[0].submit();

window.location = "i.php";

這會發現在你的DOM表格並提交其與已經輸入的數據一起保存值動作網頁。

您還需要重命名您的提交按鈕才能正常工作。否則，您將無法以編程方式調用窗體上的提交功能。

<input type="submit" name="submit-btn" value="Submit" />

應該做的伎倆。但是，除了驗證/提交按鈕之外，我並沒有真正看到提交按鈕的重點。 https://jsfiddle.net/dwu96jqw/1/

來源

2017-08-03 07:07:17 svsk

它不工作。它不會去i.php頁面。我在form標籤中的action中聲明。 –

看我最近的編輯。您的提交按鈕的名稱阻止提交功能。 – svsk

它工作。謝謝 –

使用此代碼：該解決方案在這裏

完整的代碼示例

<form action="i.php" method="post" onsubmit="perform();">

而在JavaScript中進行這些更改：

if(r!=3) { 
alert('please complete the form'; 
return false; 
}

JavaScript不發送POST標題與window.location！

通過使用此代碼，您不需要使用按鈕，JavaScript執行（）函數在窗體中單擊提交按鈕時運行。
如果真正輸入了表單值，那麼JavaScript執行（）不會返回並提交表單;否則，函數返回並阻止提交表單。

來源

2017-08-03 07:14:32

如何驗證JavaScript中的表單元素然後移動到PHP頁面？

回答

相關問題